DOM 浏览器学习笔记
简介
DOM，即文档对象模型（Document Object Model），是一种用于处理 HTML、XML 等文档的标准接口。浏览器将 HTML 文档解释为一棵 DOM 树，开发者可以通过 JavaScript 来操作这个树结构，实现对 HTML 元素的增删改查等操作。
获取元素
我们可以通过以下方法获取一个 HTML 元素：
通过 ID 获取元素
jsCopy Codeconst element = document.getElementById("element-id");
通过标签名获取元素
jsCopy Codeconst elements = document.getElementsByTagName("tag-name");
通过类名获取元素
jsCopy Codeconst elements = document.getElementsByClassName("class-name");
通过选择器获取元素
jsCopy Codeconst element = document.querySelector(".selector");
const elements = document.querySelectorAll(".selector");
操作元素
我们可以通过下面的方法来操作元素：
获取或设置元素的属性值
jsCopy Code// 获取属性值
const value = element.getAttribute("attribute-name");
// 设置属性值
element.setAttribute("attribute-name", "value");
获取或设置元素的文本内容
jsCopy Code// 获取文本内容
const text = element.textContent;
// 设置文本内容
element.textContent = "new text content";
获取或设置元素的 HTML 内容
jsCopy Code// 获取 HTML 内容
const html = element.innerHTML;
// 设置 HTML 内容
element.innerHTML = "<p>new html content</p>";
添加/删除/替换元素
jsCopy Code// 添加元素
const newElement = document.createElement("tag-name");
parentElement.appendChild(newElement);
// 删除元素
parentElement.removeChild(childElement);
// 替换元素
parentElement.replaceChild(newElement, oldElement);
实例
以下是一个简单的实例，演示如何通过 DOM 操作 HTML 元素：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 浏览器学习笔记</title>
</head>
<body>
<h1 id="main-heading">DOM 浏览器学习笔记</h1>
<p class="content">这是一篇关于 DOM 的学习笔记。</p>
<ul id="list">
<li class="item">第一条</li>
<li class="item">第二条</li>
<li class="item">第三条</li>
</ul>
<script>
// 获取元素
const heading = document.getElementById("main-heading");
const content = document.querySelector(".content");
const items = document.querySelectorAll(".item");
// 修改元素内容和属性
heading.textContent = "DOM 浏览器学习笔记（更新）";
content.setAttribute("class", "new-content");
items.forEach(function(item) {
item.textContent = "新" + item.textContent;
});
// 添加新元素
const newItem = document.createElement("li");
newItem.setAttribute("class", "item");
newItem.textContent = "第四条";
document.getElementById("list").appendChild(newItem);
// 删除元素
const oldItem = document.querySelector(".item");
oldItem.parentNode.removeChild(oldItem);
</script>
</body>
</html>
通过以上操作，我们改变了页面的标题和内容，修改了列表中每个元素的文本，添加了一条新的列表项，并删除了原先的一条列表项。