示例 HTML 文档
首先，我们有一个简单的 HTML 文件 index.html，内容如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作示例</title>
</head><body><div id="main"><p id="paragraph">这是一个段落。</p><ul id="list"><li>列表项 1</li><li>列表项 2</li></ul></div><script src="script.js"></script>
</body></html>
增（创建并添加元素）
在 script.js 文件中，我们可以使用以下代码创建新元素并添加到文档中：
// 创建一个新的段落元素
const newParagraph = document.createElement('p');
// 设置新段落的文本内容
newParagraph.textContent = '这是新创建的段落。';// 获取主容器元素
const mainDiv = document.getElementById('main');
// 将新段落添加到主容器中
mainDiv.appendChild(newParagraph);// 创建一个新的列表项并添加到列表中
const newListItem = document.createElement('li');
newListItem.textContent = '新列表项';
const list = document.getElementById('list');
list.appendChild(newListItem);
查（查找元素）
// 通过 ID 查找元素
const paragraph = document.getElementById('paragraph');
console.log(paragraph.textContent);// 通过标签名查找元素
const listItems = document.getElementsByTagName('li');
for (let i = 0; i < listItems.length; i++) {console.log(listItems[i].textContent);
}// 通过类名查找元素
// 假设 HTML 中有元素添加了类名 "example-class"
// const elementsWithClass = document.getElementsByClassName('example-class');// 通过选择器查找元素
const firstListItem = document.querySelector('ul li');
console.log(firstListItem.textContent);
删（移除元素）
// 获取要移除的元素
const paragraphToRemove = document.getElementById('paragraph');
// 获取其父元素
const parentDiv = paragraphToRemove.parentNode;
// 从父元素中移除该元素
parentDiv.removeChild(paragraphToRemove);// 也可以直接使用 remove() 方法（现代浏览器支持）
const listItemToRemove = document.querySelector('ul li');
listItemToRemove.remove();
改（修改元素内容和属性）
// 修改元素的文本内容
const paragraphToModify = document.getElementById('paragraph');
paragraphToModify.textContent = '这是修改后的段落内容。';// 修改元素的 HTML 内容
paragraphToModify.innerHTML = '<strong>这是使用 innerHTML 修改的内容。</strong>';// 修改元素的属性
const img = document.createElement('img');
img.src = 'example.jpg';
img.alt = '示例图片';
document.body.appendChild(img);// 修改元素的类名
paragraphToModify.classList.add('new-class');
paragraphToModify.classList.remove('old-class');
![[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程](https://i-blog.csdnimg.cn/direct/e27f966317884800befe62c3622dd29f.png)
