JavaScript中的选择器和如何使用它们来选择DOM元素

JavaScript中的选择器是用于选择DOM（文档对象模型）元素的语法模式，它们允许开发者根据不同的标准选取页面上的元素。在JavaScript中，通常使用`document.querySelector`和`document.querySelectorAll`方法来使用选择器。这些方法分别返回第一个匹配的元素和一个包含所有匹配元素的NodeList对象。

1. `document.querySelector(selector)`：这个方法接收一个CSS选择器作为参数，并返回文档中匹配该选择器的第一个元素。如果没有元素匹配，则返回`null`。

示例：

   var element = document.querySelector('#myId'); // 返回ID为'myId'的第一个元素
   var firstDiv = document.querySelector('div'); // 返回第一个div元素

2. `document.querySelectorAll(selector)`：这个方法同样接收一个CSS选择器作为参数，但它返回的是所有匹配该选择器的元素组成的NodeList对象（类似数组的对象），即使只有一个匹配元素也会返回包含它的NodeList。

示例：

   var elements = document.querySelectorAll('.myClass'); // 返回所有类名为'myClass'的元素组成的NodeList
   var allParagraphs = document.querySelectorAll('p'); // 返回所有段落元素组成的NodeList

选择器支持CSS选择器的所有标准模式，包括类选择器（如`.myClass`）、ID选择器（如`#myId`）、标签选择器（如`div`）、属性选择器（如`[type="text"]`）、子元素选择器（如`ul > li`）、相邻兄弟选择器（如`h1 + p`）等。