document.querySelector('selector') 和 document.querySelectorAll('selector')的区别

document.querySelector('selector')和document.querySelectorAll('selector')的区别在于返回值的类型和数量。

- document.querySelector('selector')返回的是一个对象，即匹配到的第一个元素。如果没有匹配到任何元素，则返回null。

- document.querySelectorAll('selector')返回的是一个集合，即匹配的所有元素组成的NodeList。如果没有匹配到何元素，则返回一个空的NodeList。

示代码如下：

// 使用document.querySelector('selector')获取一个匹配的元素
var element = document.querySelector('.example');
console.log(element); // 输出：第一个匹配的元素

// 使用document.querySelectorAll('selector')获取所有匹配的元素
var elements = document.querySelectorAll('.example');
console.log(elements); // 输出：所有匹配的元素组成的NodeList

相关问题

document.queryselector

`document.querySelector` 是 JavaScript 中的一个函数，它可以在文档中查找第一个匹配指定选择器或者元素的元素。它返回找到的元素，如果没有找到则返回 null。

语法:

document.querySelector(selector);

示例:

// 获取第一个包含 class "example" 的元素
const element = document.querySelector(".example");

注意, document.querySelector 函数和 document.querySelectorAll 函数的区别是, 前者返回第一个找到的元素,而后者返回所有符合条件的元素.

document.querySelector()的用法

document.querySelector() 是 JavaScript 中的一个方法，用于通过 CSS 选择器来选取页面中的元素。

它的用法如下：

document.querySelector(selector)

其中，selector 是一个字符串，表示要选择的元素的 CSS 选择器。这个方法会返回符合选择器条件的第一个元素，如果没有匹配的元素，则返回 null。

例如，如果要选择页面中 id 为 "myElement" 的元素，可以使用以下代码：

const element = document.querySelector("#myElement");

这样，变量 element 就指向了选取到的元素。你可以通过 element 变量来操作这个元素，例如修改它的样式、添加事件监听器等。

需要注意的是，querySelector() 方法只会返回匹配到的第一个元素。如果你需要选取所有匹配到的元素，可以使用 document.querySelectorAll() 方法。