JavaScript教程：深入理解DOM节点核心属性-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00991/article/details/148940671

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

前言

在Web开发中，理解DOM（文档对象模型）是至关重要的。DOM将HTML文档表示为节点树，每个节点都有其特定的属性和方法。本文将深入探讨DOM节点的核心属性，帮助开发者更好地操作和控制网页元素。

DOM节点类层次结构

DOM节点不是单一类型，而是根据HTML元素类型分为不同的类，这些类形成了一个继承层次结构：

EventTarget - 所有DOM节点的基类，提供事件处理能力
Node - 所有DOM节点的共同祖先，提供基础节点功能
Element - 所有元素的基类，提供元素通用方法
HTMLElement - HTML元素的基类
特定元素类（如HTMLInputElement、HTMLDivElement等）

// 检查body元素的继承链
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

关键节点属性详解

1. nodeType属性

nodeType是最基础的节点类型标识符，返回一个代表节点类型的数字：

1：元素节点
3：文本节点
9：文档节点（document）

const div = document.createElement('div');
console.log(div.nodeType);  // 1（元素节点）

const text = document.createTextNode('Hello');
console.log(text.nodeType); // 3（文本节点）

console.log(document.nodeType); // 9（文档节点）

2. nodeName与tagName

这两个属性都用于获取元素标签名，但有重要区别：

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

const div = document.querySelector('div');
console.log(div.tagName);  // "DIV"（HTML模式下总是大写）
console.log(div.nodeName); // "DIV"

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

3. innerHTML与outerHTML

这两个属性用于读写HTML内容：

innerHTML：获取或设置元素内部HTML
outerHTML：获取或设置元素自身及其内部HTML

重要区别：

const div = document.querySelector('div');
div.innerHTML = '<p>新内容</p>';  // 修改div内部
div.outerHTML = '<p>替换div</p>'; // 用p元素替换整个div

// 注意：outerHTML赋值后，原div变量仍引用被移除的元素

4. textContent与innerText

textContent获取元素内所有文本内容（包括隐藏元素），而innerText只获取可见文本：

<div id="example">
  可见文本
  <span style="display:none">隐藏文本</span>
</div>

<script>
  console.log(example.textContent);  // "可见文本 隐藏文本"
  console.log(example.innerText);   // "可见文本"
</script>

5. nodeValue与data

这两个属性用于非元素节点（文本、注释等）的内容访问：

const text = document.createTextNode('Hello');
console.log(text.nodeValue); // "Hello"
console.log(text.data);     // "Hello"

text.data = 'Hi'; // 修改文本内容

6. hidden属性

控制元素显示/隐藏的简便方式，等同于style.display="none"：

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

元素特定属性

不同HTML元素有自己特有的DOM属性：

const input = document.querySelector('input');
console.log(input.value); // 输入框的值
console.log(input.type);  // 输入框类型

const link = document.querySelector('a');
console.log(link.href);   // 链接地址