什么是 DOM？

DOM（文档对象模型）是HTML文档的编程接口。它表示页面结构，允许程序和脚本动态访问和更新文档的内容、结构和样式。

大白话解释：

把HTML文档想象成一棵树🌲，DOM就是这棵树的编程表示。每个HTML元素（标签）是树上的一个节点，我们可以通过JavaScript访问和操作这些节点。

DOM树结构示例：

DOM树结构

获取DOM元素

要修改内容，首先需要获取对应的HTML元素。

常用方法：

  • document.getElementById("id名") – 通过元素ID获取
  • document.querySelector("CSS选择器") – 通过CSS选择器获取第一个匹配元素
  • document.querySelectorAll("CSS选择器") – 获取所有匹配元素
  • document.getElementsByClassName("类名") – 通过类名获取元素集合
  • document.getElementsByTagName("标签名") – 通过标签名获取元素集合

示例代码：

// 获取ID为header的元素
const header = document.getElementById('header');

// 获取第一个button元素
const btn = document.querySelector('button');

// 获取所有类名为item的元素
const items = document.querySelectorAll('.item');

修改元素内容

1. textContent

获取或设置元素的文本内容（不包含HTML标签）

示例：

// 获取元素
const element = document.getElementById('demo');

// 设置文本内容
element.textContent = '这是新文本内容';

// 获取文本内容
console.log(element.textContent);

2. innerHTML

获取或设置元素内部的HTML内容（包含HTML标签）

示例：

element.innerHTML = '<strong>重要</strong> 内容';

区别：

textContent – 只处理纯文本，更安全

innerHTML – 可以插入HTML标签，但要注意安全风险

修改元素属性

HTML元素具有各种属性（如src, href, class等），可以通过DOM修改。

常用方法：

  • element.getAttribute('属性名') – 获取属性值
  • element.setAttribute('属性名', '值') – 设置属性值
  • element.removeAttribute('属性名') – 移除属性
  • 直接访问属性：element.id, element.className

示例：修改图片src

const img = document.querySelector('img');
img.src = 'new-image.jpg';
// 或
img.setAttribute('src', 'new-image.jpg');

示例：修改链接href

const link = document.getElementById('myLink');
link.href = 'https://new-website.com';

修改CSS样式

可以通过JavaScript动态修改元素的样式。

方法：

使用element.style属性

示例：

const box = document.getElementById('box');

// 修改单个样式
box.style.backgroundColor = 'blue';
box.style.color = 'white';

// 修改多个样式
Object.assign(box.style, {
    padding: '20px',
    borderRadius: '10px',
    fontSize: '18px'
});

注意：

CSS属性名在JavaScript中使用驼峰式写法：

  • background-color → backgroundColor
  • font-size → fontSize
  • border-radius → borderRadius

创建新元素

可以使用DOM动态创建新的HTML元素。

步骤：

  1. 创建元素：document.createElement('标签名')
  2. 设置内容和属性
  3. 添加到DOM树中

示例：创建新列表项

// 1. 创建新元素
const newItem = document.createElement('li');

// 2. 设置内容
newItem.textContent = '新项目';

// 3. 添加到列表
const list = document.getElementById('myList');
list.appendChild(newItem);

删除元素

从DOM中移除元素。

方法：

  • parent.removeChild(child) – 通过父元素移除子元素
  • element.remove() – 直接移除元素自身

示例：

// 方法1
const parent = document.getElementById('list');
const child = document.getElementById('item2');
parent.removeChild(child);

// 方法2
const element = document.getElementById('removeMe');
element.remove();

替换元素

用新元素替换现有元素。

方法：

parent.replaceChild(newChild, oldChild)

示例：

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '我是新元素';

// 获取要被替换的元素
const oldElement = document.getElementById('old');

// 替换元素
oldElement.parentNode.replaceChild(newElement, oldElement);