javascript针对DOM的应用分析（二）

2023年6月10日上午11:30 • JavaScript

JavaScript针对DOM的应用分析

在使用JavaScript时，操作DOM是很重要的一部分。在本攻略中，我们将详细讨论JavaScript如何应用于DOM。

DOM基础知识

DOM（Document Object Model，文档对象模型）是指用于 HTML 和 XML 文档的编程接口。DOM 将整个页面抽象为一个树形结构，页面中的每个组成部分都是树形结构中的节点。

要访问页面中的节点，可以使用JavaScript提供的方法。

获取元素

可以使用以下方法来获取元素：

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

其中，getElementById() 是获取具有特定 ID 的元素，而 getElementsByClassName() 可以获取所有具有特定类名的元素，getElementsByTagName() 可以获取所有具有特定标签名的元素。querySelector()可以获取第一个符合条件的元素，而 querySelectorAll() 可以获取所有符合条件的元素。

修改元素

可以使用以下方法来修改元素：

innerHTML
innerText
setAttribute()
style

其中，innerHTML 和 innerText 可以获取或设置元素的内容，setAttribute() 可以设置元素的属性，style 可以设置元素的 CSS 样式。

JavaScript与DOM实例

示例1：使用`querySelector()`和`innerHTML`修改元素内容

在以下示例中，我们将使用querySelector()获取具有特定 ID 的元素，并使用innerHTML将其内容更改为新的 HTML 内容。

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeading">原文</h1>

<button onclick="changeText()">修改文本</button>

<script>
function changeText() {
  document.querySelector("#myHeading").innerHTML = "新文本";
}
</script>

</body>
</html>

在以上代码中，我们使用了querySelector()获取具有 ID “myHeading”的元素，并使用innerHTML将其内容更改为“新文本”。

示例2：使用`style`修改元素CSS样式

在以下示例中，我们将使用querySelector()获取具有特定 ID 的元素，并使用style将其背景颜色更改为红色。

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeading">欢迎来到我的页面！</h1>

<button onclick="changeStyle()">更改样式</button>

<script>
function changeStyle() {
  document.querySelector("#myHeading").style.backgroundColor = "red";
}
</script>

</body>
</html>

在以上代码中，我们使用了querySelector()获取具有 ID “myHeading”的元素，并使用style将其背景颜色更改为“红色”。