左小白的技术日常
Github

element.childNodes 和 element.children 有什么区别

这篇文章发布于 2020/12/30,归类于
标签:
childNodes与childrenchildNodes children区别

元素的 childNodeschildren 属性都是用于获取元素子节点,他们返回值都是类数组对象,且都是活动对象(当节点变更后,值也会动态变更)。但有以下区别:

  1. childNodes 获取的子节点包含所有节点类型,比如注释节点、文本节点、换行空白符文本节点,而 children 仅包含元素类型的子节点。
  2. childNodes 类型是 NodeList,children 类型是 HTMLCollection

有了 childNodes 为什么又出了 children 这个 DOM 专有扩展?children 属性是因为 IE9 之前的版本与其他浏览器在处理空白文本节点上有差异才出现的。参见 《JavaScript 高级程序设计(第 4 版)》第 15 章 DOM 扩展 - 专有扩展 - children 属性 p456

(function() {
  let testDom = document.createElement('div')
  testDom.innerHTML = `
    123
    <!-- sdfsdf -->
    <span>abc</span>
    <div>test</div>
  `
  let { childNodes, children } = testDom
  console.log(childNodes) // NodeList(7) [text, comment, text, span, text, div, text]
  console.log(children) // HTMLCollection(2) [span, div]

  // 动态性、再次向节点追加内容,再打印之前获取的值
  testDom.appendChild(document.createElement('div'))
  console.log(childNodes) // NodeList(8) [text, comment, text, span, text, div, text, div]
  console.log(children) // HTMLCollection(3) [span, div, div]
})()