js之element.children与element.childNodes区别&兼容

element.children 获取的是当前元素的所有子节点元素(不包括文本元素),children返回的是HTMLCollection类型

element.childNodes 获取的是当前元素的有所子元素(节点元素和文本元素),childNodes返回的是NodeList类型

children会出现不兼容问题,兼容性代码如下:

1. 判断该浏览器是否支持children属性,是则返回element.children

2.如果不支持,则通过childNodes来获取该元素的所有子元素

3.通过nodeType属性过滤掉非节点元素,保存到elementArr中

4.返回elementArr

代码如下:

function getElementChild(element){

if (!element.children) {

var elementList = element.childNodes;

var elementItem,

elementArr = [];

for(var i = 0; i < elementList.length; i++){

elementItem = elementList[i];

if(elementItem.nodeType == 1){//说明该节点为元素节点

elementArr.push(elementItem);

}

}

return elementArr;

}else{

return element.children;

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 658评论 0 1
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 788评论 0 1
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、节...
    LuckyS007阅读 861评论 0 0
  • “总觉得一段感情——"呃,后半截不知道该怎么接,只能够就这么吊在这,戛然而止。 又或者这句可以作为一个小说的开篇,...
    彣言阅读 270评论 0 0