JavaScript文档对象模型(DOM)——DOM核心操做

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列DOM接口，经过这些DOM接口能够改变网页的内容、结构和样式。

一、对于JavaScript，为了可以使JavaScript操做HTML，JavaScript就有了一套本身的dom编程接口；

二、对于HTML，dom使html造成一颗dom树，包含文档、元素、节点。

文档：整个页面就是一个文档；

元素：页面中全部的标签都叫作元素；

节点：页面中全部的内容都是节点。文档、元素、属性、文本都是节点，代码间的换行也是一个节点。

咱们获取过来的全部DOM元素都是一个对象（object）。

 

 

对于DOM操做，咱们主要针对于 对元素的操做，主要有建立、增、删、改、查、属性操做、事件操做。

1、建立

主要包括三种：

一、document.write

特色：若是页面文档流加载完毕（即全部的代码执行完毕），再调用这句话会致使页面重绘（即从新给咱们建立了一个html页面，咱们以前写的东西都没了）。（不多使用）

二、innerHTML：将内容写入某个DOM节点，不会致使页面所有重绘。

三、createElement：也不会致使页面重绘。

innerHTML和createElement效率对比：

①innerHTML拼接效率测试：

 1 <script>
 2     function fn() {  3         var d1 = +new Date();  4 
 5         var str = '';  6         for (var i = 0; i < 1000; i++) {  7             document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';  8  }  9         var d2 = +new Date(); 10         console.log(d2 - d1); 11  } 12  fn(); 13 </script>

执行结果以下

执行速度为1600毫秒左右

 

②createElement效率测试

 1 <script>
 2     function fn() {  3         var d1 = +new Date();  4 
 5         for (var i = 0; i < 1000; i++) {  6             var div = document.createElement('div');  7             div.style.width = '100px';  8             div.style.height = '2px';  9             div.style.border = '1px solid red'; 10  document.body.appendChild(div); 11  } 12         var d2 = +new Date(); 13         console.log(d2 - d1); 14  } 15  fn(); 16 </script>

执行结果以下

 执行速度为十几秒

 

③innerHTML数组效率测试

 1 <script>
 2     function fn() {  3         var d1 = +new Date();  4         var array = [];  5         for (var i = 0; i < 1000; i++) {  6             array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');  7  }  8         document.body.innerHTML = array.join('');  9         var d2 = +new Date(); 10         console.log(d2 - d1); 11  } 12  fn(); 13 </script>

执行结果以下

 执行速度为个位数秒

结果分析：

执行效率：innerHTML数组效率 > createElement效率 > innerHTML拼接效率

因此建立多个元素时innerHTML效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂麻烦一些。

createElement()建立多个元素时效率稍微低一些，但结构清晰。

2、增

主要包括两种：

一、appendChild：node.appendChild(child)是在后面追加元素

二、insertBefore：node.insertBefore(child)是添加到最前面

3、删

removeChild：node.removeChild(child)删除父节点中的一个子节点，并返回被删除的节点。

4、改

主要是修改dom元素的属性，dom元素的内容、属性，表单的值等。

一、修改元素属性：src、href、title等。能够直接修改，这些属性都是可读写的。

二、修改普通元素内容：innerText、innerHTML。（二者都是可读写的）

element.innerText：读取时，只读取标签里面的内容，不会少文字，但不会读取里边的标签、空格和换行。（非标准）

element.innerHTML：读取时，整个读取出来，包括html标签，同时保留空格和换行。（W3C标准，经常使用）

三、修改表单元素：value（表单里边的内容）、type（表单类型）、disabled（是否被使用）等。

四、修改元素样式：style、className。能够直接经过style修改属性，若是须要修改的属性较多或者为了方便操做，建议修改className。

5、查

主要获取查询dom的元素

一、DOM提供的API方法：getEementById、getElementsByTagName等古老的方法。

二、H5提供的新方法：querySelector、querySelectorAll 。（提倡）

三、利用节点操做获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）。（提倡）

6、属性操做

主要针对自定义属性

一、setAttribute：设置dom的属性值。 element.setAttribute('属性', '值');  主要针对自定义属性

二、getAttribute：获取dom的属性值

获取dom的属性值有两种方法：element.属性   和   element.getAttribute（‘属性’）

区别：

element.属性  获取的是内置属性值（元素自己自带的属性）；

element.getAttribute（‘属性’）主要获取的是自定义的属性（咱们本身添加的属性）。

三、removeAttribute：移除属性。  removeAttribute(‘属性’)  

7、事件操做

给元素注册事件，采起：事件源.事件类型=事件处理程序

onclick：鼠标左键单击事件。

onmouseover：鼠标通过时触发。

onmouseout：鼠标离开时触发。

onfocus：得到鼠标焦点触发。

onblur： 失去鼠标焦点触发。

dblclick： 鼠标左键双击事件。

onmousemove：鼠标移动触发。

onmousedown：按下鼠标键时触发。

onmouseup：释放按下的鼠标键时触发。