获取HTML子节点时控制台输出NodeList为空的问题

你代码里的核心问题是错误获取了DOCTYPE节点而非html元素：

• document.getRootNode()返回的就是当前文档对象document，它的childNodes第一个节点是<!DOCTYPE html>，这个节点本身没有子节点，所以打印出来的NodeList是空的。

正确的解决方式 #

直接用document.documentElement获取html元素，这是标准且可靠的方法：

const htmlElementNode = document.documentElement;
console.log(htmlElementNode.childNodes);

或者如果你一定要从document.childNodes里取，要注意取第二个节点（索引为1）：

const rootNode = document.getRootNode();
// 注意：这种方式不推荐，因为部分环境下document.childNodes的顺序可能有差异
const htmlElementNode = rootNode.childNodes[1];
console.log(htmlElementNode.childNodes);

另外还要确认脚本的执行时机：如果你的脚本放在<head>里且没有等待DOM加载，此时html的子节点可能还未完全解析，但这种情况一般不会返回空的NodeList，至少会有<head>节点。如果需要确保DOM完全加载，可以把脚本放在</body>标签前，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', () => {
  const htmlElementNode = document.documentElement;
  console.log(htmlElementNode.childNodes);
});

内容的提问来源于stack exchange，提问作者Maryam Fatima