首页 > 其他 > 详细

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

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!