JavaScript DOM 节点基础属性详解：类型、标签与内容

JavaScript DOM 节点基础属性详解：类型、标签与内容

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

前言

在 JavaScript 中操作 DOM 时，理解节点的基础属性是至关重要的。本文将深入探讨 DOM 节点的类型、标签和内容相关属性，帮助开发者更好地掌握 DOM 操作的核心概念。

DOM 节点类层次结构

DOM 节点不是简单的数据结构，它们实际上属于特定的 JavaScript 类，这些类形成了一个完整的继承体系：

1. EventTarget - 所有 DOM 节点的根类，提供事件处理能力
2. Node - 基础节点类，提供基本的节点属性和方法
3. Element - 元素节点基类
4. HTMLElement - HTML 元素基类
5. 具体元素类（如 HTMLInputElement、HTMLDivElement 等）

// 检查节点继承关系
console.log(document.body instanceof HTMLBodyElement); // true
console.log(document.body instanceof HTMLElement); // true
console.log(document.body instanceof Element); // true
console.log(document.body instanceof Node); // true
console.log(document.body instanceof EventTarget); // true

节点类型检测

nodeType 属性

nodeType 是一个经典的节点类型检测方式，返回数字值：

• 1：元素节点
• 3：文本节点
• 9：文档节点

console.log(document.body.nodeType); // 1 (元素节点)
console.log(document.body.firstChild.nodeType); // 3 (文本节点)
console.log(document.nodeType); // 9 (文档节点)

现代检测方法

虽然 nodeType 仍然可用，但现代 JavaScript 更推荐使用 instanceof 检查：

if (element instanceof HTMLInputElement) {
  // 处理输入框元素
}

标签名称相关属性

tagName 和 nodeName

这两个属性都可用于获取元素的标签名：

console.log(document.body.tagName); // "BODY"
console.log(document.body.nodeName); // "BODY"

区别在于：

• tagName 仅适用于元素节点
• nodeName 适用于所有节点类型

const comment = document.createComment('测试注释');
console.log(comment.tagName); // undefined
console.log(comment.nodeName); // "#comment"

节点内容操作

innerHTML：HTML 内容

innerHTML 允许获取或设置元素的 HTML 内容：

const div = document.querySelector('div');
console.log(div.innerHTML); // 获取内容
div.innerHTML = '<strong>新内容</strong>'; // 设置内容

注意事项：

• 插入的脚本不会执行
• 使用 += 会完全重写内容（导致资源重新加载）

outerHTML：包含元素本身的 HTML

outerHTML 包含元素自身的 HTML：

const div = document.querySelector('div');
console.log(div.outerHTML); // 如 "<div>内容</div>"

重要区别：设置 outerHTML 会替换整个元素，而不是修改它。

textContent：纯文本内容

textContent 提供元素的纯文本内容（忽略所有标签）：

const div = document.querySelector('div');
console.log(div.textContent); // 纯文本内容
div.textContent = '安全文本内容'; // 安全设置文本

与 innerHTML 相比，textContent 更安全，适合处理用户输入。

文本节点内容

对于文本和注释节点，使用 data 或 nodeValue：

const textNode = document.body.firstChild;
console.log(textNode.data); // 文本内容
console.log(textNode.nodeValue); // 同上

hidden 属性

hidden 属性提供了一种简单的方式来显示/隐藏元素：

const element = document.getElementById('myElement');
element.hidden = true; // 隐藏元素
element.hidden = false; // 显示元素

这相当于 style.display="none"，但语法更简洁。

总结

理解 DOM 节点的基本属性是有效操作 DOM 的基础。关键点包括：

1. DOM 节点属于特定的类层次结构
2. 有多种方式检测节点类型（nodeType、instanceof）
3. 内容操作有不同方法（innerHTML、outerHTML、textContent）
4. hidden 属性提供简单的可见性控制

掌握这些基础知识后，你将能够更自信地处理各种 DOM 操作场景。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info