DOM让JavaScript可以对文档中的标签、属性、内容等进行访增删改操作

本文链接：https://blog.youkuaiyun.com/2401_88743143/article/details/145619198

示例 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');