亲宝软件园·资讯

展开

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

莺时 人气:0

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

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

1、对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口;

2、对于HTML,dom使html形成一颗dom树,包含文档、元素、节点。

文档:整个页面就是一个文档;

元素:页面中所有的标签都叫做元素;

节点:页面中所有的内容都是节点。文档、元素、属性、文本都是节点,代码间的换行也是一个节点。

我们获取过来的所有DOM元素都是一个对象(object)。

 

 

对于DOM操作,我们主要针对于 对元素的操作,主要有创建、增、删、改、查、属性操作、事件操作。

一、创建

主要包括三种:

1、document.write

特点:如果页面文档流加载完毕(即所有的代码执行完毕),再调用这句话会导致页面重绘(即重新给我们创建了一个html页面,我们之前写的东西都没了)。(很少使用)

2、innerHTML:将内容写入某个DOM节点,不会导致页面全部重绘。

3、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()创建多个元素时效率稍微低一些,但结构清晰。

二、增

主要包括两种:

1、appendChild:node.appendChild(child)是在后面追加元素

2、insertBefore:node.insertBefore(child)是添加到最前面

三、删

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

四、改

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

1、修改元素属性:src、href、title等。可以直接修改,这些属性都是可读写的。

2、修改普通元素内容:innerText、innerHTML。(两者都是可读写的)

element.innerText:读取时,只读取标签里面的内容,不会少文字,但不会读取里边的标签、空格和换行。(非标准)

element.innerHTML:读取时,整个读取出来,包括html标签,同时保留空格和换行。(W3C标准,常用)

3、修改表单元素:value(表单里边的内容)、type(表单类型)、disabled(是否被使用)等。

4、修改元素样式:style、className。可以直接通过style修改属性,如果需要修改的属性较多或者为了方便操作,建议修改className。

五、查

主要获取查询dom的元素

1、DOM提供的API方法:getEementById、getElementsByTagName等古老的方法。

2、H5提供的新方法:querySelector、querySelectorAll 。(提倡)

3、利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)。(提倡)

六、属性操作

主要针对自定义属性

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

2、getAttribute:获取dom的属性值

获取dom的属性值有两种方法:element.属性   和   element.getAttribute(‘属性’)

区别:

element.属性  获取的是内置属性值(元素本身自带的属性);

element.getAttribute(‘属性’)主要获取的是自定义的属性(我们自己添加的属性)。

3、removeAttribute:移除属性。  removeAttribute(‘属性’)  

七、事件操作

给元素注册事件,采取:事件源.事件类型=事件处理程序

onclick:鼠标左键单击事件。

onmouseover:鼠标经过时触发。

onmouseout:鼠标离开时触发。

onfocus:获得鼠标焦点触发。

onblur: 失去鼠标焦点触发。

dblclick: 鼠标左键双击事件。

onmousemove:鼠标移动触发。

onmousedown:按下鼠标键时触发。

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

 
 

加载全部内容

相关教程
猜你喜欢
用户评论