如何在NodeList元素上调用querySelectorAll()？解决调用报错问题

嘿，这个坑我之前踩过！咱们来一步步捋清楚问题出在哪，以及怎么解决。

为什么会抛出TypeError？ #

mutation.addedNodes返回的是一个NodeList，里面包含的是所有被添加的节点，但这些节点不一定都是你期望的Element类型——它们可能是文本节点、注释节点，甚至是文档片段（DocumentFragment）。而只有Element对象（以及部分类似Element的节点，比如DocumentFragment）才拥有**querySelectorAll()**方法，所以当你直接对非Element节点调用这个方法时，就会触发类型错误。

正确的做法：先判断节点类型再调用方法 #

我们只需要在调用querySelectorAll()之前，先检查当前节点是不是Element类型，再执行后续操作就行。有两种常用的判断方式：

方式1：用instanceof判断

for(var i = 0; i < mutation.addedNodes.length; i++) { 
  const node = mutation.addedNodes[i];
  // 确认当前节点是Element类型
  if (node instanceof Element) {
    // 这里替换成你实际需要的选择器
    const inputs = node.querySelectorAll('input'); 
    console.log(inputs);
  }
}

方式2：用nodeType判断

每个节点都有nodeType属性，其中Element节点的nodeType值为1（也可以用常量Node.ELEMENT_NODE，语义更清晰）：

for(var i = 0; i < mutation.addedNodes.length; i++) { 
  const node = mutation.addedNodes[i];
  // 检查是否为Element节点
  if (node.nodeType === Node.ELEMENT_NODE) {
    const inputs = node.querySelectorAll('input');
    console.log(inputs);
  }
}

额外说明：处理DocumentFragment的情况 #

如果你的场景里可能会添加DocumentFragment（节点类型为11，即Node.DOCUMENT_FRAGMENT_NODE），它也支持querySelectorAll()方法，你可以把判断条件扩展一下：

if (node instanceof Element || node instanceof DocumentFragment) {
  // 执行查询操作
}

这样就能确保只有支持querySelectorAll()的节点才会执行对应的方法，避免报错啦！

内容的提问来源于stack exchange，提问作者Shahdab Aalam Saifi