JavaScript获取DOM元素

最新推荐文章于 2024-09-07 13:38:28 发布

Yhame.

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量537

点赞数 9

分类专栏： code 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Yhame/article/details/139651784

版权

code 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript获取DOM元素：基础指南

在Web开发中，操作DOM（文档对象模型）是一个常见且必要的操作。JavaScript提供了多种方法来获取和操作DOM元素。本文将介绍几种常见的DOM获取方法，并通过一个实际示例来演示它们的使用。

常见的DOM获取方法

document.getElementById("id")
- 通过元素的ID获取一个唯一的元素。
- 示例：document.getElementById("uniqueElement")
document.getElementsByName("name")
- 通过元素的name属性获取一个元素数组。
- 示例：document.getElementsByName("inputName")
document.getElementsByClassName("class")
- 通过元素的类名获取一个元素数组。
- 示例：document.getElementsByClassName("classElements")
- 注意：Internet Explorer 8及更早版本不支持此方法。
document.querySelector("selector")
- 使用CSS选择器获取第一个匹配的元素。
- 示例：document.querySelector(".classElements")
document.querySelectorAll("selector")
- 使用CSS选择器获取所有匹配的元素数组。
- 示例：document.querySelectorAll(".classElements")

示例HTML页面

首先，我们创建一个简单的HTML页面，其中包含一些示例元素：

<!DOCTYPE html>
<html>
<head>
    <title>DOM获取示例</title>
</head>
<body>

<div id="uniqueElement">这是一个ID为'uniqueElement'的元素</div>

<input name="inputName" type="text" value="这是一个name属性为'inputName'的输入框">
<input name="inputName" type="text" value="这是另一个name属性为'inputName'的输入框">

<div class="classElements">这是class为'classElements'的第一个元素</div>
<div class="classElements">这是class为'classElements'的第二个元素</div>

<div>这是一个没有特定ID或class的元素</div>

<script src="script.js"></script>
</body>
</html>

JavaScript代码示例

接下来，我们在VSCode中创建一个JavaScript文件，例如script.js，并添加以下代码来获取和操作这些元素：

// 通过ID获取元素
var elementById = document.getElementById("uniqueElement");
console.log(elementById.textContent); // 输出: 这是一个ID为'uniqueElement'的元素

// 通过name获取元素数组
var elementsByName = document.getElementsByName("inputName");
console.log(elementsByName[0].value); // 输出: 这是一个name属性为'inputName'的输入框
console.log(elementsByName[1].value); // 输出: 这是另一个name属性为'inputName'的输入框

// 通过class获取元素数组
var elementsByClass = document.getElementsByClassName("classElements");
console.log(elementsByClass[0].textContent); // 输出: 这是class为'classElements'的第一个元素
console.log(elementsByClass[1].textContent); // 输出: 这是class为'classElements'的第二个元素

// 通过选择器获取第一个匹配的元素
var firstMatch = document.querySelector(".classElements");
console.log(firstMatch.textContent); // 输出: 这是class为'classElements'的第一个元素

// 通过选择器获取所有匹配的元素数组
var allMatches = document.querySelectorAll(".classElements");
allMatches.forEach(function(element) {
  console.log(element.textContent);
});
// 输出:
// 这是class为'classElements'的第一个元素
// 这是class为'classElements'的第二个元素

运行示例

创建HTML文件：将上述HTML代码保存为index.html。
创建JavaScript文件：将JavaScript代码保存为script.js。
运行页面：在浏览器中打开index.html。

在浏览器的控制台中，你会看到输出的内容，验证了我们成功获取并操作了DOM元素。

总结

通过以上示例，我们了解了如何使用document.getElementById、document.getElementsByName、document.getElementsByClassName、document.querySelector和document.querySelectorAll来获取和操作DOM元素。这些方法各有其用处，选择适当的方法可以使你的代码更加简洁和高效。