JS中document获取元素的常用方法(附案例)
作者：Mxin5
这篇文章主要介绍了JS中document获取元素的常用方法,并提供了具体的示例代码,这些方法涵盖了从单个元素到多个元素的获取方式,需要的朋友可以参考下
前言
在JavaScript中，document对象提供了多种方法来获取页面中的元素。以下是一些常用的获取元素的方法，以及具体的示例代码：
1. 通过ID获取元素
document.getElementById() 方法用于通过元素的 id 属性获取单个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<div id="myDiv">Hello World</div>
<script>
// 通过ID获取元素
var element = document.getElementById("myDiv");
console.log(element.innerHTML); // 输出：Hello World
</script>
</body>
</html>2. 通过类名获取元素
document.getElementsByClassName() 方法用于通过元素的 class 属性获取一个元素集合（HTMLCollection）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<script>
// 通过类名获取元素集合
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML); // 输出：Item 1 和 Item 2
}
</script>
</body>
</html>3. 通过标签名获取元素
document.getElementsByTagName() 方法用于通过元素的标签名获取一个元素集合（HTMLCollection）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<script>
// 通过标签名获取元素集合
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML); // 输出：Div 1 和 Div 2
}
</script>
</body>
</html>4. 通过CSS选择器获取单个元素
document.querySelector() 方法用于通过CSS选择器获取第一个匹配的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<script>
// 通过CSS选择器获取第一个匹配的元素
var element = document.querySelector(".myClass");
console.log(element.innerHTML); // 输出：Item 1
</script>
</body>
</html>5. 通过CSS选择器获取所有匹配的元素
document.querySelectorAll() 方法用于通过CSS选择器获取所有匹配的元素，返回一个 NodeList。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<script>
// 通过CSS选择器获取所有匹配的元素
var elements = document.querySelectorAll(".myClass");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML); // 输出：Item 1 和 Item 2
}
</script>
</body>
</html>6. 通过名称属性获取元素
document.getElementsByName() 方法用于通过元素的 name 属性获取一个元素集合（NodeList）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Example</title>
</head>
<body>
<input type="text" name="myInput" value="Input 1">
<input type="text" name="myInput" value="Input 2">
<script>
// 通过名称属性获取元素集合
var elements = document.getElementsByName("myInput");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].value); // 输出：Input 1 和 Input 2
}
</script>
</body>
</html>上述这些方法可以根据不同的需求选择使用，帮助我们在JavaScript中灵活地操作DOM元素。
总结
到此这篇关于JS中document获取元素的常用方法的文章就介绍到这了,更多相关JS中document获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！