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

最新推荐文章于 2024-05-13 13:37:50 发布

傻丁鱼

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量214

点赞数

分类专栏： Javascript 文章标签： DOM Javascript

本文链接：https://blog.csdn.net/qq_42015806/article/details/84567296

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>标签之间不要有空格、换行，否则会被判断为文本节点，输出如下：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

傻丁鱼

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习DOM模型-childNodes()案例教程

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

扫一扫