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

时间:2022-03-15 13:55:53

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

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//获取节点的值 只能获取文本节点的值

属性节点  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>