我修改了class的值，为什么还是能通过querySelector获取到元素节点？

一开始class的值是one，那我通过'.one'拿取到了p标签。然后我修改了class的值，为什么还能拿取到p标签，还可以去修改p标签的文本内容，把'你好'改成了'hello'?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="one">你好</p>
    <script>
        //通过class，拿取到P标签
        var box = document.querySelector('.one')
        //修改了class的值
        box.className = 'newOne'
        // 为什么还能修改p标签的文本内容
        box.innerHTML = 'hello'
        console.log("打印下class的值:" + box.className);
    </script>
</body>

</html>

为什么不可以？有一个盒子上面写着one,你通过one找到了这个盒子，你把盒子上面写的字擦了，改成了newone,会影响往盒子里面放东西吗？

通过 document.querySelector('.one') 获取到的是一个 DOM 元素，你修改 className这个对象的引用是不会变的。
你只是修改了 DOM 元素的 class 属性，并没有影响 box 对象的引用

通过querySelector获取到元素节点后，保存在变量box中。然后你修改了box的className属性为'newOne'，实际上这只是修改了元素节点的class属性的值，并没有改变元素节点本身。
通过querySelector获取到的元素节点是一个引用，保存在变量中后，这个引用指向的是DOM树中对应的元素。当你修改了元素节点的属性，比如className，只是改变了元素节点的属性值，并没有改变DOM树中的结构。
dom还在那你接着修改内容也没问题。你要是移除了dom 才会报错

【以下回答由 GPT 生成】

答案：

当你通过querySelector方法获取一个元素节点时，会返回一个对该节点的引用。这个引用并不会随着class的值的变化而更新。即使你修改了class的值，元素节点的引用仍然存在，所以你仍然可以通过这个引用来访问该节点。

修改class的值只会影响元素在渲染时的样式，不会影响元素在DOM树中的位置和引用。

同样的道理，当你修改元素的innerHTML属性时，只是更新了元素的内容，并没有影响到元素节点的引用。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^