本文深入讲解 dom 树中 element node（元素节点）与 text node（文本节点）的本质差异，阐明二者在结构、属性、方法支持（如 innerhtml）等方面的严格区分，帮助开发者准确理解 dom 操作边界。
在浏览器的 DOM（Document Object Model）中，每个 HTML 文档都被解析为一棵由不同类型的节点构成的树。其中，元素节点（Element Node） 和 文本节点（Text Node） 是最基础、最常接触的两类节点，但它们在语义、结构能力和 API 支持上存在根本性差异。
本质区别：语义与能力
-
元素节点（Node.ELEMENT_NODE, nodeType === 1）
表示一个 HTML 或 XML 标签，例如、、 等。它具备完整的 DOM 元素特性：可拥有子节点（包括其他元素节点和文本节点）、可设置/读取属性（如 id、class）、支持事件监听，并提供丰富的操作接口（如 innerHTML、appendChild()、querySelector()）。
文本节点（Node.TEXT_NODE, nodeType === 3）
仅用于承载纯字符数据（即“渲染可见的文本内容”），例如Hello world!
中的 "Hello "、"world" 和 "!" 各自构成独立的文本节点。它没有标签、没有属性、不能有子节点，也不支持 innerHTML、className、getAttribute() 等元素专属 API。关键验证：innerHTML 的适用性
innerHTML 是典型的仅限元素节点使用的属性：
const div = document.querySelector('div'); console.log(div.nodeType); // 1 → Element node ✅ div.innerHTML = 'Valid'; // ✅ 正常工作 const textNode = div.firstChild; console.log(textNode.nodeType); // 3 → Text node ❌ console.log(textNode.innerHTML); // undefined（无此属性） // textNode.innerHTML = 'test'; // ❌ 静默失败，无效果 textNode.textContent = 'Updated text'; // ✅ 正确方式：用 textContent 修改文本节点内容⚠️ 注意：尝试对文本节点访问或赋值 innerHTML 不会报错，但会被忽略——这是常见调试陷阱。应始终通过 nodeType 或 instanceof 判断节点类型：if (node instanceof Element) { node.innerHTML = 'safe'; } else if (node instanceof Text) { node.textContent = 'safe'; }
实际 DOM 结构示例
以下 HTML 片段：
Hello World !对应 DOM 子节点结构（简化）：
div#container (Element, nodeType=1) ├── Text "Hello\n " (Text, nodeType=3) ├── span (Element, nodeType=1) │ └── Text "World" (Text, nodeType=3) └── Text "\n !" (Text, nodeType=3)
可见：空白符（换行、缩进）也会生成文本节点； 是元素节点，其内部 "World" 是独立文本节点。
总结
特性 元素节点（Element） 文本节点（Text） nodeType 1 3 可拥有子节点 ✅（元素、文本、注释等） ❌（纯数据容器） 可设置属性 ✅（id, style, 自定义属性） ❌ 支持 innerHTML ✅ ❌（应使用 textContent） 主要用途 构建结构、控制行为与样式 存储和呈现原始文本内容 掌握这一区分，是安全、高效进行 DOM 操作（如遍历、替换、注入）的前提。切记：不要假设所有节点都支持元素 API——先判型，再操作。
