JavaScript---获取、修改DOM元素
发布人：shili8
发布时间：2025-02-18 09:28
阅读次数：0
**JavaScript 中 DOM 元素的获取和修改**
在 JavaScript 中，DOM（Document Object Model）是 HTML 文档结构的抽象表示。通过 DOM，我们可以访问和操作 HTML 页面中的各个元素。获取和修改 DOM 元素是 JavaScript 编程中非常重要的一部分。
### 获取 DOM 元素有多种方法可以获取 DOM 元素：
####1.通过 ID 获取元素使用 `document.getElementById()` 方法，可以根据元素的 ID 来获取一个元素。
javascript// 获取 id 为 "myElement" 的元素var myElement = document.getElementById("myElement");
####2.通过类名获取元素使用 `document.getElementsByClassName()` 方法，可以根据元素的类名来获取一组元素。
javascript// 获取 class 为 "myClass" 的所有元素var myElements = document.getElementsByClassName("myClass");
####3.通过标签名获取元素使用 `document.getElementsByTagName()` 方法，可以根据元素的标签名来获取一组元素。
javascript// 获取所有 p 元素var paragraphs = document.getElementsByTagName("p");
####4.通过 CSS选择器获取元素使用 `document.querySelectorAll()` 方法，可以根据 CSS选择器来获取一组元素。
javascript// 获取所有 id 为 "myElement" 的元素var myElements = document.querySelectorAll("#myElement");
### 修改 DOM 元素有多种方法可以修改 DOM 元素：
####1. 设置属性使用 `element.setAttribute()` 方法，可以设置一个元素的属性。
javascript// 设置 id 为 "myElement" 的元素的 title 属性document.getElementById("myElement").setAttribute("title", "Hello World!");
####2. 获取属性使用 `element.getAttribute()` 方法，可以获取一个元素的属性。
javascript// 获取 id 为 "myElement" 的元素的 title 属性var title = document.getElementById("myElement").getAttribute("title");
####3. 设置样式使用 `element.style.cssText` 或 `element.style.setProperty()` 方法，可以设置一个元素的样式。
javascript// 设置 id 为 "myElement" 的元素的背景颜色为红色document.getElementById("myElement").style.backgroundColor = "red";
####4. 添加或移除类使用 `element.classList.add()` 或 `element.classList.remove()` 方法，可以添加或移除一个元素的类。
javascript// 添加 id 为 "myElement" 的元素的 myClass 类document.getElementById("myElement").classList.add("myClass");
####5. 添加或移除子元素使用 `element.appendChild()` 或 `element.removeChild()` 方法，可以添加或移除一个元素的子元素。
javascript// 添加 id 为 "myParent" 的元素的子元素var child = document.createElement("p");
document.getElementById("myParent").appendChild(child);
####6. 修改文本内容使用 `element.textContent` 或 `element.innerText` 方法，可以修改一个元素的文本内容。
javascript// 修改 id 为 "myElement" 的元素的文本内容为 Hello World!
document.getElementById("myElement").textContent = "Hello World!";
### 示例代码以下是示例代码：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myElement {
background-color: red;
}
</style>
</head>
<body>
<div id="myParent">
<p id="myElement">Hello World!</p>
</div>
<script>
// 获取 id 为 "myElement" 的元素 var myElement = document.getElementById("myElement");
// 设置 id 为 "myElement" 的元素的 title 属性 myElement.setAttribute("title", "Hello World!");
// 获取 id 为 "myElement" 的元素的 title 属性 var title = myElement.getAttribute("title");
console.log(title); // Hello World!
// 设置 id 为 "myElement" 的元素的背景颜色为蓝色 myElement.style.backgroundColor = "blue";
// 添加 id 为 "myParent" 的元素的子元素 var child = document.createElement("p");
document.getElementById("myParent").appendChild(child);
// 修改 id 为 "myElement" 的元素的文本内容为 Hello World!
myElement.textContent = "Hello World!";
</script>
</body>
</html>
以上是示例代码，演示了如何获取和修改 DOM 元素。
粤公网安备 44011102002787号