首页 > 代码库 > 第十章—DOM(0)—NODE类型

第十章—DOM(0)—NODE类型

2024-09-09 13:38:06   214人阅读

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>

输出：

技术分享

 

第十章—DOM(0)—NODE类型


联系
我们