技术问询：DOM树中元素节点与文本节点的区别及innerHTML适用范围

核心区别 #

• 节点类型标识不同：元素节点的nodeType值为1，文本节点的nodeType值为3，你可以通过这个属性快速区分二者。
• 角色与结构差异：元素节点对应HTML里的各类标签（比如<div>、<p>），是DOM树的“骨架”，可以嵌套其他元素节点或文本节点；文本节点就是标签里的纯文本内容，是骨架里的“填充内容”，只能存字符串，没法嵌套任何节点。
• 可操作属性不同：元素节点拥有innerHTML、className、style这类用于操作结构和样式的属性；文本节点只有nodeValue或textContent来修改自身文本，根本没有innerHTML属性。

和innerHTML的关联 #

innerHTML是元素节点专属的属性，它的作用是读取或替换元素内部的整个HTML结构（包括嵌套的标签和文本）。而文本节点本身就是纯文本，不存在“内部HTML结构”的概念，所以访问文本节点的innerHTML会得到undefined，自然也没法用它来操作文本节点。

举个实际例子：

<div id="demo">Hi <b>there</b></div>

const elemNode = document.getElementById('demo');
console.log(elemNode.nodeType); // 1（元素节点）
console.log(elemNode.innerHTML); // "Hi <b>there</b>"

const textNode = elemNode.firstChild;
console.log(textNode.nodeType); // 3（文本节点）
console.log(textNode.innerHTML); // undefined

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