学习DOM模型-childNodes()案例教程

<!DOCTYPE>
<html>
<head>
<title>childNodes</title>
<script language="javascript">
function myDOMInspector(){
//文档的DOM结构必须是在整个文档加载完毕后才能正确分析出来，因此放在函数内，页面加载完成后才用<body>的onload加载

 var oUl=document.getElementById("myList");
 //getElementById获取<UL>标签

 var DOMString="";
 if(oUl.hasChildNodes()){
  //hasChildNodes()返回布尔值，判断是否有子节点

  var oCh=oUl.childNodes;
  //返回数组

  for(var i=0;i<oCh.length;i++)
  //逐一查找

  DOMString+=oCh[i].nodeName+"\n";
}
alert(DOMString);
}
</script>
</head>

<body onload="myDOMInspector()">
<ul id="myList"><li>HTML</li><li>JavaScript</li><li>CSS</li></ul>
</body>
</html>

运行结果：

注意！<ul><li>标签之间不要有空格、换行，否则会被判断为文本节点，输出如下：

学习DOM模型-childNodes()案例教程

这点与我们日常的书写习惯不同，提醒特别注意

学习DOM模型-childNodes()案例教程

相关推荐