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和实现网页交互功能非常重要。

TAGS: 选择器应用元素选择 js原生选择器 DOM选择器

万千站长工具

技术文摘

js原生选择器种类有哪些

1. 通过ID选择元素

2. 通过标签名选择元素

3. 通过类名选择元素

4. 通过CSS选择器选择元素

欢迎使用万千站长工具！