非document调用querySelector的作用、概念及报错修正技术问询

核心概念 #

当你在普通DOM元素节点上调用querySelector()/querySelectorAll()时，它的查找范围不是整个文档，而是当前元素的所有后代节点（包括子节点、孙节点等）——相当于在这个元素的DOM子树里执行选择器匹配，只会返回属于该元素子树的匹配元素，和document上的全局查找完全是两个范围。

所有继承Element接口的DOM元素都支持这两个方法，语法和document上的一致：传入CSS选择器字符串，querySelector()返回第一个匹配的元素（无匹配则返回null），querySelectorAll()返回所有匹配元素组成的NodeList。

你的代码错误原因 #

你写的代码里，h5是你新建的独立<h5>元素，它本身没有任何子节点，更不存在类名为para的后代元素，所以h5.querySelector(".para")必然返回null，调用null.append()自然会抛出错误。而document.querySelector(".para")能成功，是因为这个<p class="para">属于整个文档的DOM树，全局查找能定位到它。

修正后的代码 #

如果你的需求是把"world"追加到"hello"所在的<p>元素里，不需要通过h5去查找，直接复用全局找到的目标元素即可：

// 先获取目标p元素，避免重复查询DOM
const paraElement = document.querySelector(".para");
paraElement.append(" hello");

// 新建h5元素（如果需要添加到页面中）
const h5 = document.createElement('h5');
h5.textContent = "text updated";
h5.className = "first";
// 可选：把h5添加到p元素里
paraElement.appendChild(h5);

// 追加"world"到p元素中
paraElement.append(" world");

如果你的初衷是想在h5的子树里查找元素，那需要先把匹配的元素添加到h5的子节点中，比如：

const h5 = document.createElement('h5');
h5.className = "first";
// 创建一个带para类的元素并添加到h5里
const paraInH5 = document.createElement('span');
paraInH5.className = "para";
h5.appendChild(paraInH5);

// 现在就能从h5里查到.para元素了
h5.querySelector(".para").append(" world");
// 最后把h5添加到文档中才能看到效果
document.body.appendChild(h5);

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