小tips:HTML DOM中的children和childNodes属性

childNodes 属性

标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象。包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。

所有主流浏览器都支持 childNodes 属性。

有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }      
}

获得 body 元素的子节点集合:

document.body.childNodes;

children 属性

获取 body 元素的子元素集合:

var c = document.body.children;

定义和用法:children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象。

提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量,然后使用序列号(index,起始值为0)访问每个子元素。

children 属性与 childNodes 属性的差别

  • childNodes 属性返回所有的节点,包括文本节点、注释节点;
  • children 属性只返回元素节点;

注:IE6 到 IE8 完全支持 children 属性,但是,返回元素节点和注释节点,IE9 以上版本只返回元素节点。

参考地址:

原文地址:https://www.cnblogs.com/moqiutao/p/6629080.html