技术文摘
js原生选择器种类有哪些
2025-01-10 15:32:33 小编
js原生选择器种类有哪些
在JavaScript中，原生选择器是操作DOM（文档对象模型）的重要工具，它们允许我们根据不同的条件选择网页中的元素。下面就来详细介绍一下常见的js原生选择器种类。
1. 通过ID选择元素
使用getElementById()方法可以通过元素的id属性获取到对应的元素。id在HTML文档中应该是唯一的，所以这个方法只会返回一个元素。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="myDiv">这是一个div元素</div>
<script>
const myDiv = document.getElementById('myDiv');
console.log(myDiv);
</script>
</body>
</html>
2. 通过标签名选择元素
getElementsByTagName()方法可以选择指定标签名的所有元素，它返回的是一个类数组对象，包含了所有匹配的元素。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);
</script>
</body>
</html>
3. 通过类名选择元素
getElementsByClassName()方法可以选择具有指定类名的所有元素，同样返回一个类数组对象。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="myClass">元素1</div>
<div class="myClass">元素2</div>
<script>
const elements = document.getElementsByClassName('myClass');
console.log(elements);
</script>
</body>
</html>
4. 通过CSS选择器选择元素
querySelector()方法返回匹配指定CSS选择器的第一个元素，querySelectorAll()方法返回匹配指定CSS选择器的所有元素，返回的是一个节点列表。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
const firstBox = document.querySelector('.box');
const allBoxes = document.querySelectorAll('.box');
console.log(firstBox);
console.log(allBoxes);
</script>
</body>
</html>
这些就是JavaScript中常见的原生选择器，熟练掌握它们对于操作DOM和实现网页交互功能非常重要。