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

JavaScript childNodes

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

此属性可以获取指定元素的所有直接子节点。

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

childNodes属性的功能与children属性类似,异同点总结如下:

(1).childrenW3C标准属性。

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

关于children属性可以参阅JavaScript children一章节。

语法结构:

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

浏览器支持:

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

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

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

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

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

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

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("box");
  let oshow=document.getElementById("show");
  let obt=document.getElementById("bt");
  obt.onclick = function () {
    oshow.innerHTML = odiv.childNodes.length;
  }
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <div></div>
  <div></div>
</div>
<input type="button" id="bt" value="查看效果" />
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/221754uazi6foiokh2ivox.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

有运行结果可以得出box元素具有五个子节点。

相信,肯定有不少初学者对此产生疑惑,box元素下明明只有两个div元素,怎么会有5个子节点。

在前面提到过,childNodes获取子节点没有类型限制,div是两个元素节点,还有三个文本节点。

这是因为空格和换行被看做一个文本节点,5个子节点 三个文本节点 + 二个元素节点。

浏览器兼容问题:

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

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

通常情况下,我们只需要获取子元素节点,children属性可以很好的获得。

但是由于children属性是非w3c标准,所以有很大可能突然不被某一些浏览器支持。

所以还是使用childNodes更加稳妥,不过需要将文本节点过滤。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script>  
window.onload=function() { 
  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>  
<div id="show"></div> 
<ul id="box"> 
  <li>蚂蚁部落一</li> 
  <li>蚂蚁部落二</li> 
  <li>蚂蚁部落三</li> 
  <li>蚂蚁部落四</li> 
</ul> 
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/221854xe6qq51hhq5zlhdh.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

最新评论

返回顶部