document.querySelector用法

document queryselector

document.querySelector(selector)是一个DOM方法，它接受一个CSS选择符参数，返回文档中第一个匹配该选择符的元素。如果没有匹配的元素，则返回null。

使用方法：

1. 选择单个元素

const element = document.querySelector('.my-class'); // 选择class为'my-class'的第一个元素

2. 选择多个元素

除了返回第一个匹配的元素，document.querySelector()也支持传递多个选择器并返回匹配的第一个元素。

const element = document.querySelector('.my-class, #my-id, h1'); // 选择class为'my-class'或ID为'my-id'或'h1'元素的第一个匹配元素

3. 选择后代元素

const element = document.querySelector('.my-class span'); // 选择class为'my-class'下第一个<span>元素

4. 选择属性

const element = document.querySelector('input[type="text"]'); // 选择type属性值为"text"的第一个<input>元素

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