JavaScript教程：深入理解DOM节点属性-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00112/article/details/148416589

JavaScript教程：深入理解DOM节点属性

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

DOM（文档对象模型）是JavaScript与网页交互的核心。理解DOM节点的属性和方法是前端开发的基础。本文将深入探讨DOM节点的类型、标签和内容相关属性，帮助开发者更好地操作网页元素。

DOM节点类层次结构

DOM节点不是简单的对象，它们遵循严格的类继承体系：

EventTarget - 所有DOM节点的基类，提供事件处理能力
Node - 提供基础DOM节点功能，如父子节点关系
Element - 元素节点的基类
HTMLElement - 所有HTML元素的基类
特定元素类（如HTMLInputElement、HTMLDivElement等）

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

节点类型识别

nodeType属性

nodeType是最传统的节点类型识别方式：

document.body.nodeType;  // 1 (元素节点)
document.nodeType;       // 9 (文档节点)

虽然现代JavaScript推荐使用instanceof检查，但nodeType在某些简单场景下仍然有用。

标签名称获取

获取节点标签名称有两种方式：

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

document.body.tagName;  // "BODY"
document.body.nodeName; // "BODY"

// 注释节点
comment.nodeName; // "#comment"
comment.tagName;  // undefined

注意：在HTML模式下，标签名称总是大写的。

节点内容操作

innerHTML：强大的HTML操作

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

// 获取HTML内容
const html = document.body.innerHTML;

// 设置HTML内容
document.body.innerHTML = '<h1>新内容</h1>';

注意事项：

插入的<script>不会执行
使用+=会完全重写内容，导致资源重新加载

outerHTML：替换整个元素

outerHTML包含元素本身及其内容：

div.outerHTML = '<p>替换内容</p>';

重要区别：outerHTML赋值不会修改原元素变量，而是替换DOM中的元素。

textContent：安全文本操作

textContent提供纯文本访问，自动去除所有HTML标签：

// 获取纯文本
const text = div.textContent;

// 安全设置文本
div.textContent = userInput;  // HTML标签会被转义

这是处理用户输入的安全方式，可防止XSS攻击。

其他实用属性

hidden属性

控制元素可见性的简单方式：

element.hidden = true;  // 等同于display:none

特定元素属性

不同HTML元素有特有的属性：

input.value;    // 输入框的值
anchor.href;    // 链接地址
img.src;        // 图片源

这些属性通常对应HTML特性(attribute)，但并非总是1:1对应。

总结

DOM节点属性提供了丰富的网页操作能力：

类型识别：nodeType、instanceof、tagName/nodeName
内容操作：
- innerHTML - 强大的HTML读写
- outerHTML - 替换整个元素
- textContent - 安全的纯文本操作
可见性控制：hidden属性
元素特定属性：value、href等