QuerySelector 属性 - JavaScript

在 JavaScript 中，querySelector 属性提供了一种简便的方式来获取一个文档中符合条件的元素节点。这个属性属于 Document 和 Element 接口，它返回一个匹配特定CSS选择器的第一个元素。

使用方法

querySelector 方法需要传入一个 CSS 选择器作为参数。它将返回选择器匹配的第一个元素。例如，我们可以获取id为“example”的元素：

const element = document.querySelector('#example');

我们可以使用类选择器来获取类名为“test”的元素：

const element = document.querySelector('.test');

我们还可以使用标签名获取指定类型的元素：

const element = document.querySelector('div');

多个选择器匹配

在获取元素的选择器中，我们可以使用“,”来将多个选择器组合在一起。这个方法将返回第一个匹配的选择器的元素。例如，我们可以同时匹配 id 为“example”或者类名为“test”的元素：

const element = document.querySelector('#example, .test');

结果为空

当没有匹配到任何元素时，querySelector 将返回 null。因此，我们在使用获取的元素时需要进行条件判断，以避免空指针异常：

const element = document.querySelector('.example');

if (element) {
    // 执行代码
}

总结

querySelector 是 JavaScript 中一个方便的属性，它允许我们轻松地获取我们所需的特定元素。通过多种选择器的组合，我们可以更加灵活地获取元素。我们还需要记得在使用查询结果时进行错误处理，以免出现意外的结果。