JavaScript中querySelector()获取HTML元素的方法QuerySelector()是一种可以从Ja

QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法，无需了解id属性值，class属性值等

简而言之，就是可以使用querySelector()检索任何HTML元素。

document.querySelector(css选择器) 在这种情况下将对整个document执行querySelector()。可以通过为参数指定类似jQuery的CSS选择器来获取任意HTML元素。

程序在获取第一个匹配的HTML元素时就会结束。

如果要获取多个元素就需要来创建一个循环过程，querySelectorAll().

如何使用querySelector()？

获取具有ID和Class属性的HTML元素

示例如下

html
    <h1 class="big">标题</h1>
    <p id="test">内容</p>

js

const a = document.querySelector(".big");
const b = document.querySelector("#test");
console.log(a);
console.log(b);

可以看到querySelector()的每个参数都指定了一个CSS选择器。

由此，同样的querySelector()也可以根据参数的指定方法取得任意的HTML要素。

querySelectorAll()的使用方法

querySelectorAll()可以获取多个HTML元素

html

 <body>
    <ul>
      <li class="list">列表1</li>
      <li class="list">列表2</li>
      <li class="list">列表3</li>
      <li class="list">列表4</li>
    </ul>
  </body>

在该示例中，排列了多个列表元素。

要检索所有此列表元素，可以执行以下操作

js

const c = document.querySelectorAll(".test");
console.log(c);

在此示例中，类属性值“list”被指定为querySelectorAll()的参数。

这将指定所有列表元素，因此可以获得所有列表项

querySelectorAll()获取的元素称为NodeList，存储类似于数组的数据结构。

下面我们使用'forEach'一次处理一个元素，它可以有效地重复处理数组。

js

const c = document.querySelectorAll(".test");
c.forEach(function (value) {
  console.log(value);
});

在此示例中，使用querySelectorAll()获得的结果由forEach语句循环。

通过指定参数“value”，可以像上述结果一样获得每个HTML元素。