修改H#元素文本后，绑定到span的常量无法生效问题求助

核心原因 #

JS中通过querySelector获取的DOM元素引用，是指向内存中具体的DOM对象，并非和元素ID绑定的动态关联。当你重置父元素的innerHTML时，原来的DOM元素会被替换成全新的对象，旧引用自然无法影响新元素。

详细过程拆解 #

1. 初始执行const result = document.querySelector("#span-id")，result指向页面上最初存在的那个<span id="span-id">对应的内存对象。
2. 执行resultText.textContent = "Something else."时，h2的子元素（包括那个span）会被清空。
3. 执行resultText.innerHTML = 'Some text:<span id="span-id">Content</span>!'时，浏览器会：
   • 把之前从h2中移除的旧span对象彻底从DOM树中剥离（无其他引用时会被垃圾回收）。
   • 解析HTML字符串，创建全新的DOM元素树，其中包含一个新的<span id="span-id">内存对象——这个新对象和旧的result指向的对象完全无关。
4. 此时修改result.textContent = "New Content"，只是在修改那个已经被移出页面的旧span，页面上显示的新span不会有任何变化，所以console.log输出的还是新span的原始内容。

为何重新查询就能生效？ #

在重置innerHTML后重新调用document.querySelector("#span-id")，会获取到浏览器新创建的那个span对象，修改它的textContent自然会同步到页面上。这里和用const还是普通变量无关——const只是限制变量不能被重新赋值，但它指向的对象属性是可以修改的，问题的本质是引用的对象已经不是页面上的那个了。

修正后的代码示例 #

const resultText = document.querySelector("#h2-id");
resultText.textContent = "Something else.";
resultText.innerHTML = 'Some text:<span id="span-id">Content</span>!';
// 重置innerHTML后，重新获取页面上的新span元素
const newResult = document.querySelector("#span-id");
newResult.textContent = "New Content";
console.log(resultText.textContent); // 输出：Some text:New Content!

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