JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

   

其中属性、元素(标签)、文本都属于节点

 

<title></title>

   <scripttype="text/javascript">

       window.onload= function () {

           //找d1的所有子节点

           //1childNodes获取所有的子节点获取文本节点和元素节点

           vard1 = document.getElementById("d1");

             for(i=0;i<=d1.length;i++)

           //alert(d1.childNodes[i].nodeName); //将会返回所有的文本节点和元素节点

 

           document.body.removeChild(d1);

 

           //           for (var i = 0; i< d1.childNodes.length; i++) {

           //               //节点 node

           //               //当时文本节点的时候

           //               if(d1.childNodes[i].nodeType == 3) {

           //                   alert(d1.childNodes[i].nodeValue);

           //               }

           //           }

           //d1.nodeValue//获取节点的值 只能获取文本节点的值

         //d1.nodeType //1 元素节点(标签) 2属性节点  3文本节点

 

 

           //children 获取子节点只获取元素节点 只有ie支持

           //           for (var i = 0; i< d1.children.length; i++) {

           //               alert(d1.children[i]);

           //           }

 

 

           //2parentNode父节点

           //element元素节点

           //node 所有类似的节点  文本属性 元素

           //           var d11 =document.getElementById("d11");

           //           var d = d11.parentNode;

           //           alert(d.id);

 

 

           //3兄弟节点     Sibling兄弟姐妹

 

           //nextSibling 下一个兄弟节点

           //           var d2 =document.getElementById("d2");

           //           var d =d2.nextSibling;

           //           alert(d.id);

           //           

           //           var dd =d2.previousSibling;//上一个兄弟节点

 

           //           alert(dd.id);

       }

   </script>

</head>

<body>

   <divid="d1">

    d1

       <!--123-->

       <divid="d11">d11

           <div>steee</div>

           <div>steee</div>

       </div>

       <divid="d12">d12</div>

       <divid="Div1">d13</div>

   </div>

 

   <divid="d2">

   d2<divid="d22"></div>

   </div>

 

   <divid="d3">

   d3<divid="d33"></div>

   </div>

</body>

</html>

posted @ 2013-08-14 17:57  pangbangb  阅读(1653)  评论(1编辑  收藏  举报