码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-03-19 23:56:24      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:null   hal   back   lin   document   length   images   rip   font   

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类型

标签:null   hal   back   lin   document   length   images   rip   font   

原文地址:http://www.cnblogs.com/xuzhudong/p/6582578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!