DOM 元素学习笔记
DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。通过 DOM，开发者可以在网页上添加、修改、删除和交互 HTML 元素。
获取元素
我们可以通过以下方法获取元素：
1. getElementById()
该方法接受一个参数，即要获取的元素 ID。它将返回一个表示指定 ID 的 HTML 元素的对象。
javascriptCopy Codelet myElement = document.getElementById("my-id");
2. getElementsByClassName()
该方法接受一个参数，即要获取的元素类名。它将返回一个 HTML 元素列表，其中包含所有具有指定类名的元素。
javascriptCopy Codelet myElements = document.getElementsByClassName("my-class");
3. getElementsByTagName()
该方法接受一个参数，即要获取的元素标签名。它将返回一个 HTML 元素列表，其中包含所有具有指定标签名的元素。
javascriptCopy Codelet myElements = document.getElementsByTagName("div");
4. querySelector()
该方法接受一个参数，即要获取的 CSS 选择器。它将返回一个表示指定选择器的第一个 HTML 元素的对象。
javascriptCopy Codelet myElement = document.querySelector(".my-class");
5. querySelectorAll()
该方法接受一个参数，即要获取的 CSS 选择器。它将返回一个 HTML 元素列表，其中包含所有具有指定选择器的元素。
javascriptCopy Codelet myElements = document.querySelectorAll("div.my-class");
修改元素
我们可以通过以下方式修改元素：
1. innerHTML 属性
该属性允许我们获取或设置元素的内容以 HTML 字符串的形式。
javascriptCopy Codelet myElement = document.getElementById("my-id");
myElement.innerHTML = "<span>Hello, World!</span>";
2. textContent 属性
该属性允许我们获取或设置元素的文本内容，不包括 HTML 标记。
javascriptCopy Codelet myElement = document.getElementById("my-id");
myElement.textContent = "Hello, World!";
3. style 属性
该属性允许我们获取或设置元素的样式。
javascriptCopy Codelet myElement = document.getElementById("my-id");
myElement.style.color = "red";
实例演示
1. 改变页面背景颜色
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Background Color</title>
<style>
#my-button {
padding: 10px;
background-color: red;
color: white;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="my-button">Change Color</button>
<script>
let button = document.getElementById("my-button");
button.addEventListener("click", function() {
let body = document.querySelector("body");
body.style.backgroundColor = "blue";
});
</script>
</body>
</html>
点击按钮后，将会把页面背景颜色变为蓝色。
2. 动态创建元素
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Elements</title>
</head>
<body>
<ul id="my-list"></ul>
<script>
let list = document.getElementById("my-list");
for (let i = 1; i <= 5; i++) {
let item = document.createElement("li");
item.textContent = "Item " + i;
list.appendChild(item);
}
</script>
</body>
</html>
运行该代码后，将会在页面创建一个无序列表，并动态添加了 5 个列表项。