JavaScript HTML DOM元素(节点)

这是测试文本，单击 “编辑” 按钮更改此文本。

JavaScript DOM元素(节点)知识点汇总

编程小白也能懂的DOM操作指南

DOM是什么？

DOM（文档对象模型）是浏览器将HTML文档转换为的一种树状结构表示法。

想象一下，整个HTML文档就像一棵树：

整个文档是树的根（根节点）
每个HTML标签（如<div>、<p>）是树的枝干（元素节点）
标签里的文字内容是树的叶子（文本节点）
标签的属性（如id、class）是枝干上的装饰（属性节点）

重要提示： 学习DOM就是学习如何通过JavaScript操作这棵树，改变网页内容、样式和结构。

DOM节点类型

DOM中有多种节点类型，最常见的有：

1. 元素节点

HTML标签本身，如<div>、<p>、<span>等。这是最常用的节点类型。

2. 文本节点

标签之间的文字内容，比如<p>这里的文字</p>中的”这里的文字”。

3. 属性节点

HTML元素的属性，如id、class、src等。

4. 注释节点

HTML中的注释内容，如<!– 这是注释 –>。

// 元素节点示例：<div id=”main”>内容</div>
// 文本节点： “内容”
// 属性节点： id=”main”

获取DOM元素

操作DOM的第一步是找到你想操作的元素：

1. 通过ID获取

最常用、最直接的方法，获取单个元素

const element = document.getElementById(‘myId’);

2. 通过类名获取

获取具有相同类名的所有元素（返回集合）

const elements = document.getElementsByClassName(‘myClass’);

3. 通过标签名获取

获取相同标签的所有元素（返回集合）

const paragraphs = document.getElementsByTagName(‘p’);

4. 通过CSS选择器获取

最灵活的方式，类似CSS选择元素

// 获取第一个匹配的元素
const el = document.querySelector(‘.container .item’);

// 获取所有匹配的元素
const allItems = document.querySelectorAll(‘.item’);

创建新节点

动态创建新元素：

创建元素节点

const newDiv = document.createElement(‘div’);

创建文本节点

const textNode = document.createTextNode(‘我是新文本’);

创建属性节点

newDiv.setAttribute(‘id’, ‘newDiv’);
// 或直接赋值
newDiv.id = ‘newDiv’;

修改节点

改变元素内容和属性：

修改内容

// 获取元素内容（包含HTML）
const content = element.innerHTML;

// 设置元素内容（会解析HTML）
element.innerHTML = ‘<strong>新内容</strong>’;

// 获取纯文本内容
const text = element.textContent;

// 设置纯文本内容（不会解析HTML）
element.textContent = ‘纯文本内容’;

修改属性

// 设置属性
element.setAttribute(‘class’, ‘active’);

// 获取属性
const id = element.getAttribute(‘id’);

// 移除属性
element.removeAttribute(‘disabled’);

修改样式

// 单个样式
element.style.color = ‘red’;
element.style.fontSize = ’20px’;

// 批量修改
element.style.cssText = ‘color: red; background: blue;’;

// 修改类名
element.className = ‘new-class’;

// 更好的方式（添加/移除/切换）
element.classList.add(‘new-class’);
element.classList.remove(‘old-class’);
element.classList.toggle(‘active’);

添加和删除节点

改变DOM结构：

添加节点

// 添加到父元素末尾
parentElement.appendChild(newElement);

// 插入到特定位置
parentElement.insertBefore(newElement, referenceElement);

删除节点

// 从父元素中移除
parentElement.removeChild(childElement);

// 更简单的方式（现代浏览器）
childElement.remove();

替换节点

parentElement.replaceChild(newElement, oldElement);

克隆节点

// 浅克隆（只克隆元素本身）
const clone = element.cloneNode();

// 深克隆（克隆元素及其所有子元素）
const deepClone = element.cloneNode(true);

节点关系

在DOM树中导航：

父子关系

// 获取父元素
const parent = element.parentNode;

// 获取所有子节点（包含文本节点等）
const children = element.childNodes;

// 获取所有子元素节点
const childElements = element.children;

// 获取第一个/最后一个子元素
const first = element.firstElementChild;
const last = element.lastElementChild;

兄弟关系

// 前一个兄弟元素
const prev = element.previousElementSibling;

// 后一个兄弟元素
const next = element.nextElementSibling;

DOM事件处理

让网页具有交互性：

添加事件监听

element.addEventListener(‘click’, function(event) {
// 点击时执行的代码
console.log(‘元素被点击了!’);
});

常见事件类型

click – 鼠标点击
mouseover – 鼠标移入
mouseout – 鼠标移出
keydown – 键盘按下
load – 页面加载完成
change – 表单元素值改变
submit – 表单提交

事件对象

事件处理函数接收的事件对象包含有用信息：

element.addEventListener(‘click’, function(event) {
  // 阻止默认行为（如链接跳转）
  event.preventDefault();

  // 阻止事件冒泡
  event.stopPropagation();

  // 获取触发事件的元素
  const target = event.target;
});

DOM操作演示区

尝试下面的按钮，查看DOM操作的实际效果：

这里是演示区域，点击上面的按钮会看到效果。

当前时间:

DOM树结构示例

下面展示了本页面的简化DOM树结构：