文档对象模型（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
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：释放按下的鼠标键时触发。
如对本文有疑问， 点击进行留言回复！！
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论