您的位置:首页> 前端教程> JS教程
文章导航

JavaScript childNodes

2018-10-8 22:15| 作者: admin| 查看: 1999| 评论: 0|来自: 蚂蚁部落

childNodes 属性可以获取指定元素的所有直接子节点,返回值是一个集合。

直接子节点就是第一级子节点,再深层次的后代节点不包括在内。

此属性的功能与 children 属性类似,总结如下:

(1).children W3C 标准属性。

(2).childNodes 获取所有类型子节点,children 只获取子元素节点。

关于 children 属性更多内容可以参阅 JavaScript children 一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
elementNode.childNodes

浏览器支持:

(1).IE 浏览器支持此属性。

(2).edge 浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera 浏览器支持此属性。

(6).safari 浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#box {
  width :120px;
  height :70px;
  list-style-type: none;
  border :2px dotted #ccc;
  font-size :12px;
  margin-bottom: 5px;
}
#show {
  width :120px;
  color :green;
  font-size :12px;
  border :2px dotted #ccc;
  text-align: center;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("box");
  let oShow = document.getElementById("show");
  oShow.innerHTML = oDiv.childNodes.length;
}
</script>
</head>
<body>
<div id="box">
  <div></div>
  <div></div>
</div>
<div id="show"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/01/220326z3vfpr2udf2u42r3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).box 元素具有五个子节点。

(2).box 元素下有两个子元素节点,同时包含三个文本节点。

(3).空格和换行被作为文本节点处理。浏览器兼容问题:

(1).IE9+ 和其他标准浏览器返回 5。

(2).IE9 以下浏览器会忽略文本和空格,所以返回 2。

通常情况下,只需要获取子元素节点,当前 children 属性可以胜任此任务。

但 children 属性是 w3c 标准属性,所以有可能突然不被浏览器支持。

所以还是使用 childNodes 更加稳妥,下面做一下兼容性处理:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style>
#box {
  width :120px;
  height :70px;
  list-style-type: none;
  border :2px dotted #ccc;
  font-size :12px;
  margin-bottom: 5px;
}
#show {
  width :160px;
  color :green;
  font-size :12px;
  border :2px dotted #ccc;
  text-align: center;
}
</style>
<script>  
window.onload= ()=> { 
  let oBox = document.getElementById("box"); 
  let childNodes = oBox.childNodes;
  let oshow = document.getElementById("show"); 
  let arr = [];
  for (let index = 0; index < childNodes.length; index++) {
    if (childNodes[index].nodeType != 1) {
      continue;
    } else {
      arr.push(childNodes[index]);
    }
  } 
  oshow.innerHTML = arr.length;
} 
</script>  
</head>  
<body>  
<ul id="box"> 
  <li>蚂蚁部落一</li> 
  <li>蚂蚁部落二</li> 
  <li>蚂蚁部落三</li> 
  <li>蚂蚁部落四</li> 
</ul> 
<div id="show"></div> 
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202004/01/220412cmm8l3f6om8oesfo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过 for 循环将文本节点过滤掉,实现与 children 相同的功能。

相关阅读:

(1).for循环可以参阅JavaScript for 循环语句一章节。

(2).nodeType可以参阅JavaScript nodeType 节点类型一章节。

(3).continue可以参阅JavaScript break与continue语句一章节。

(4).push方法可以参阅JavaScript push()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:location.href下一篇:location.hostname
返回顶部