修改HTML标签文本时出现querySelectorAll is not a function错误的排查

首先明确一点：你用来修改文本的两种写法完全没问题，document.querySelector('#btn_sort').textContent = "comment"和$('#btn_sort').text("comment")都是合法且正确的操作，报错和你的代码无关，问题出在你引入的外部JS库上。

错误原因分析 #

从你提供的库代码片段来看，这个库用MutationObserver监听DOM变动，当监听到childList类型的变动时，会遍历新增的节点（addedNodes），然后尝试对每个节点调用querySelectorAll方法来收集带id、class或href的元素。

但这里有个明显的缺陷：不是所有DOM节点都有querySelectorAll方法——只有元素节点（nodeType === 1）才有这个方法，而文本节点、注释节点这类非元素节点是没有的。当你的文本修改操作触发了这个监听器，且新增的节点里包含非元素节点时，就会抛出querySelectorAll is not a function的错误。

解决方案 #

1. 优先更新/修复外部库
   这是最根本的解决方式，你可以：

   • 检查该库是否有更新版本，开发者可能已经修复了这个bug；
   • 如果无法更新，你可以手动修改库的代码，在调用querySelectorAll前先判断节点类型：

     // 原代码片段修改前：
     // var s = c.querySelectorAll("[id],[class],[href]"), a = 0; a < s.length; a += 1) t.push(s[a])
     // 修改后：
     if (c.nodeType === 1) { // 仅对元素节点执行查询操作
       var s = c.querySelectorAll("[id],[class],[href]");
       for (var a = 0; a < s.length; a += 1) t.push(s[a])
     }
     

2. 是否可以忽略错误？
   不建议忽略。虽然目前你的文本修改功能正常，但这个错误会中断库的后续逻辑执行，可能导致库的其他功能失效，甚至在复杂DOM操作场景下引发更严重的问题。

总结 #

你的代码没有问题，错误源于外部库的代码缺陷，最好的做法是修复或更新这个库，避免后续出现潜在问题。

内容的提问来源于stack exchange，提问作者I have 10 fingers