第十章—DOM(0)—NODE类型
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>
输出:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步