HTML中h2元素的.textContent与.firstChild.data区别及.data解析

核心区别分析 #

针对你给出的HTML（<h2>标签内包含换行，实际存在一个空白文本节点），两种写法的差异体现在操作对象和容错性上：

• 代码片段1：操作的是h2元素节点的textContent属性。该属性会直接替换元素下所有子节点的内容——无论元素原有多少子节点（文本、元素节点均包含在内），设置textContent后都会被清空并替换为目标文本。即便h2完全为空（无任何子节点），这段代码也能正常执行，自动创建对应文本节点。
• 代码片段2：先通过firstChild获取h2的第一个子节点（此处为空白文本节点），再修改该文本节点的.data属性。如果h2是完全空的（比如<h2></h2>无换行），firstChild会返回null，此时执行代码会直接抛出Cannot set properties of null (setting 'data')的错误。

.data属性是什么 #

.data是DOM中**文本节点（Text）、注释节点（Comment）、CDATA节点（CDATASection）**的原生属性，用于读写节点内容：

• 它和文本节点的nodeValue属性完全等价，只是命名更直观，专门指向这类节点的内容存储容器。
• 例如用document.createTextNode('test')创建文本节点后，通过node.data可获取值'test'，修改node.data也会直接改变该文本节点的内容。

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