DOM1定义了一个node接口,该接口由DOM的所有节点类型实现。
所有的节点都存在这样或那样的关系。在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素。
这里要注意一个概念:nodeList
输出:
如下例子:
1 <div id="myDiv"> </div><!-- 此处有空格 --> 2 <script> 3 var div = document.getElementById('myDiv'); 4 var test = div.firstChild; 5 if (test.nextSibling === null) { 6 alert('good');//输出good 7 } 8 if (test.previousSibling === null) {
9 alert('bad');//输出bad 10 }
操作节点
加入到文档中
1 <style> 2 #test {font-size: 20px;background: red;height: 100px;} 3 #myDiv {color:red;} 4 </style> 5 </head> 6 <body> 7 <ul id="test"> 8 <li>1</li><li>2</li><li>3</li> 9 </ul> 10 <script> 11 var oul = document.getElementById('test'); 12 var deep = oul.cloneNode(true); 13 alert(deep.childNodes.length);//7 14 oul.parentNode.insertBefore(deep,oul); 15 var shallow = oul.cloneNode(false); 16 alert(shallow.childNodes.length);//0 17 oul.parentNode.insertBefore(shallow,deep); 18 19 </script>
输出: