JavaScript【DOM操作】

来源：互联网发布：淘宝企业店铺要钱吗编辑：程序博客网时间：2024/06/11 18:35

1、概念

JavaScript简称JS，是运行在浏览器端的一门脚本语言。其代表行为（网页界面和用户交互），用于响应用户操作。一开始主要用来做浏览器端验证，但是现在功能已经不止于此。
所谓的脚本语言就是指：代码不需要编译，可以直接运行，并且读入一行，运行一行。

特点：
    弱类型:声明时不需要指定类型
    动态类型的语言：可以动态的分配类型
    是解释型的语言，由浏览器的JavaScript引擎执行

2、编写的位置

需要写在script标签中：

<script type="text/javascript">   // JavaScript代码</script>

可以引入外部的js文件：

<script type="text/javascript" src=""></script>

src为外部js文件的路径

3、变量的声明

不需要指定类型，通过var关键字声明，要告诉浏览器自己编写的是JavaScript代码。

类型的分配

首先需要声明变量；然后给变量赋值时，会分配类型；也可以重新给变量赋值，动态分配类型。

示例：

 // 声明变量avar a;// 给变量a赋值为10【即数值型】a = 10;// 弹出一个警告框alert(a); // 10// 重新将字符串复制给变量a【动态改变a的类型为字符型】a = "abc";alert(a); // abc

命名规范

字母，下划线（_），美元符号（$）开头，推荐使用字母开头，大小写敏感。

4、函数

相当于Java中的方法
在JavaScript中，函数也被看作为一个对象，可以将一个函数的引用赋值给一个变量

函数的声明

通过function关键字
每一个语句都是用分号（;）隔开

有名函数

function 函数名 (形式参数1, 形式参数2){
};

不需要指定形参的类型

匿名函数

var 变量名 = function(){};

变量名就是函数名

函数的使用

通过函数名【有名函数】或接收函数的变量名【匿名函数】，外加小括号来调用函数
函数名(实参);

函数的特点

⑴ js函数的形参，不需要指定类型，即不需要使用var关键字
⑵ js函数调用时，不会检查参数的个数和类型
⑶ 当传入的参数和函数的参数个数不匹配时：
⒈ 参数不够：使用null补充
⒉ 参数过多：从前往后匹配使用

使用示例

【无参的匿名函数】

   // 声明一个匿名函数，并用变量fun来接收   var fun = function(){     alert("我是匿名函数");   };   // 通过fun来调用函数   fun();

【有参的有名函数】

   // 声明一个有名(sum)的有参的函数  // a和b不需要指定类型，所以没有写var  function sum(a, b){    // 返回a+b的结果    return a + b;  };  // 打印两个数值相加  alert(sum(3, 4.7)); // 7.7 // 打印数值和字符串相加 alert(sum("a", 2)); // a2 【字符串拼接】 // 打印数值和布尔类型相加 // true为1；false为0，和数字计算 alert(sum(false, 3)); // 3 alert(sum(true, 3)); // 4 // 打印形参个数不匹配的结果 // 少写参数 alert(sum(3)); // NaN 【Not A Number】 // 多写参数 alert(sum(1, 2, 3)); // 3 【会从前往后匹配使用】

5、对象

在JavaScript中，所有的对象都是Object类型

创建对象的方式

⑴ 通过new Object(); 来创建一个对象
⑵ 直接创建并初始化对象 { }; 并在大括号中初始化属性和函数，属性或函数跟值用冒号（:）连接，多个属性或函数之间通过逗号（,）隔开

注意：
⑴ 对象的属性或函数，必须通过对象来调用
⑵ 调用不存在的属性，返回结果为：undefined【未定义的】

使用示例

// ⑴ 通过new Object()，创建一个对象var obj1 = new Object();obj1.name = "张三";obj1.age = 14;obj1.info = function(){             // 通过对象来调用       通过this关键字来调用【this代表调用这个函数的对象】  return "我是：" + obj1.name + "，年龄：" + this.age;};alert(obj1.name); // 张三alert(obj1.info());// 我是：张三，年龄：14// 该对象没有此属性alert(obj1.a); // undefined// ⑵ 直接创建并初始化对象var obj2 = {  name:"李四",  age:16,  info:function(){    return this.name + ", " +  this.age;  }};alert(obj2.info());// 李四, 16

6、事件

事件即：用户和浏览器之间发生的交互

注意：需要给标签设置特定事件时，使用JS代码来给HTML标签指定事件，当特定的操作发生时，事件方法才会被浏览器调用

例如：通过js给按钮设置单击事件
    三种方式：
        ⑴ 每一个标签都有事件的属性: onclick,可以在属性值中直接使用js代码
            但是这种方式的耦合度很高，基本不使用
        ⑵ 在script标签内书写js代码
            要写在所有的标签后面
        ⑶ 在head标签中的script标签中书写js代码
            但是如果直接写js代码，会报错：
            Uncaught TypeError: Cannot set property ‘onclick’ of null
            因为文档的加载方式是从上到下，执行js代码的时候，btn对象还没有，所以对象为空

解决方法：让js代码在整个文档加载完成之后再执行
这时就需要调用window对象的onload函数。因为这个函数是当文档加载完成后，浏览器才调用

Tips：window对象：表示浏览器窗口

使用示例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>添加点击事件</title>    <script type="text/javascript">      /* 添加事件方式3，在头部标签中的script标签中写JS代码           需要调用window对象的onload函数           这样才能找到btn3按钮对象 */      window.onload = function(){        var btn3 = document.getElementById("btn3");        btn3.onclick = function(){          alert("Button 3");        };      };    </script>  </head>  <body>                                   <!-- 添加事件方式1，通过标签的onclick属性来创建点击事件                                        这种方式耦合度较高，尽量不要用 -->    <input type="button" value="按钮1" onclick="alert('我是按钮1');" />    <br /><br />    <button id = "btn2">按钮2</button>    <br /><br />    <button id = 'btn3'>按钮3</button>    <!-- 添加事件方式2，在所有的标签的下面添加JS代码 -->    <script type="text/javascript">      var btn2 = document.getElementById("btn2");      btn2.onclick = function(){        alert("按钮2");      };    </script>  </body></html>

7、DOM

概念

Document Object Model 文档对象模型
帮助我们在JS中查找标签对象，对标签进行增删改查，添加或修改属性，设置CSS样式等操作

    将整个文档当作一个对象，页面中所有的内容都是对象，都是document的后代对象。而对象操作标签（元素）很方便，属性和函数可以直接调用
    缺点是：使用麻烦，浏览器兼容性差
    因为浏览器解析网页有三个引擎：html、css、js引擎，每个浏览器的解析效果不同，所以在使用时需要判断是哪个浏览器
    所以一般开发时都会使用第三方的JS库，例如jQuery等

Document：代表整个 HTML 文档，可以用来访问页面中的所有元素

Window对象表示一个浏览器窗口或一个框架。Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。所以，可以只写document，而不必写 window.document

节点

节点：Node——构成HTML文档最基本的单元

节点分为三类：
元素节点：构成HTML文档最基本的HTML元素，对应HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

示例：

 <font color="red">字体</font> 元素节点：所有的font标签，即：<font color="red">字体</font> 属性节点：font标签的属性，即：color="red" 文本节点：font标签的文本内容，即：字体

元素类型

父元素：只要有子元素的元素都是父元素
子元素：有上级元素的元素
祖先元素：父元素的更上级元素
后代元素：子元素的下级元素
    例如： html是div的祖先元素
                div是html的后代元素
兄弟元素：在同一个层级内的元素
    例如： head和body就是兄弟元素

常用的DOM对象属性

nodeName

返回节点的名称

nodeType

返回节点的类型

nodeValue

返回节点的值

innerHTML

获取或设置元素的文本内容
虽不是W3C标准，却被所有主流的浏览器支持
    ① 读取元素内部HTML代码
        元素对象.innerHTML
    ② 修改元素内部HTML代码
        元素对象.innerHTML=HTML代码

childNodes

返回元素的所有子节点。返回值类型为 [object NodeList]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

firstChild

返回元素的第一个子节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

lastChild

返回元素的最后一个子元素
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

parentNode

返回元素的父节点

previousSibling

返回元素的前一个兄弟节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

nextSibling

返回元素的后一个兄弟节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

value

返回或设置元素的value属性值

常用的DOM对象方法

getElementById

document.getElementById(String elementId);
返回带有指定 ID 的元素。查找一个元素

getElementsByTagName

document.getElementsByTagName(String tagname);
根据标签名查找元素。返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。查找一组元素。返回值类型为[object HTMLCollection]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

getElementsByName

document.getElementsByName(String elementName);
根据name属性值查询元素。一般是input元素或一组元素。返回值类型为[object HTMLCollection]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

使用示例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>DOM操作</title>    <script type="text/javascript">      window.onload = function(){        // 根据标签名获取元素【返回一个集合】        var btns = document.getElementsByTagName("button");        // 获取节点类型        // alert(btns); // [object HTMLCollection]        // 因为整个页面中只有一个button，所以取第一个        var btn = btns[0];        // alert(btn); // [object HTMLButtonElement]        // 修改按钮的onclick事件        btn.onclick = function(){          // 根据id获取节点          var fEle = document.getElementById("f1");          fEle.color = "red";        };//////////////////////////////////////////////////////////////////////////////////        // 根据name属性获取节点【返回一个集合】        var lists = document.getElementsByName("list");        // alert(lists); // [object HTMLCollection]        // 因为整个页面中只有一个无序列表，所以取第一个        var list = lists[0];        // 得到ul的所有子节点【li】        var children =  list.childNodes;        // 获取集合的长度        var len = children.length;        // 因为有的浏览器在解析DOM时，会将空格、字符也解析为节点        alert(len); // 7 【IE10 测试】        var first = list.firstChild;        // 还是因为有的浏览器会将空格解析为节点        alert(first); // [object Text] 【IE10 测试】        var last = list.firstChild;        alert(last); // [object Text] 【IE10 测试】//////////////////////////////////////////////////////////////////////////////////        // 获取id为li2的li标签        var li2 = document.getElementById("li2");        // 获取li的父节点【ul】        var parentEle = li2.parentNode;        alert(parentEle); // [object HTMLUListElement]        // 获取li的前一个兄弟节点        var preEle = li2.previousSibling;        // 还是因为有的浏览器会将空格解析为节点        alert(preEle); // [object Text] 【IE10 测试】        // 获取li的下一个兄弟节点        var nextEle = li2.nextSibling;        alert(nextEle); // [object Text] 【IE10 测试】//////////////////////////////////////////////////////////////////////////////////        var hEle = document.getElementsByTagName("h1")[0];        // 获取元素的文本内容        alert(hEle.innerHTML); // 这是1级标签        hEle.innerHTML = "修改！";        var fEle = document.getElementById("f1");        alert(fEle.innerHTML); // 我是font标签        // 节点的名称        alert(fEle.nodeName); // FONT        // 节点的类型        alert(fEle.nodeType); // 1        // 节点的值        alert(fEle.nodeValue); // null        var txtEle = document.getElementById("txt");        // 获取input标签的value属性值        var typeEle = txtEle.value;        alert(typeEle);        // 修改input标签的value属性值        txtEle.value = "txt";      };    </script>  </head>  <body>    <h1>这是1级标签</h1>    <font id="f1">我是font标签</font><br /><br />    <button>让上面的font标签文字变红色</button><br /><br />    <ul name="list">      <li>列表项1</li>      <li id="li2">列表项2</li>      <li>列表项3</li>    </ul>    <input type="text" id="txt" value="文本框" />  </body></html>

0 0