简介：

JS中常用的DOM操作方法是getElementById、getElementsByClassName、getElementsByTagName，它们可以通过元素ID、类名、标签名来获取DOM元素节点。然而在实际使用过程中，经常会遇到需要选择DOM元素的情况，这时候就需要使用querySelector和querySelectorAll方法了。querySelector方法允许我们使用CSS选择器选择指定的元素节点，它返回匹配到的第一个元素节点。而querySelectorAll则返回匹配到的所有元素节点。

多级标题：

1. querySelector方法

2. querySelectorAll方法

3. 与其他DOM操作方法的区别

4. 使用实例

querySelector方法

querySelector方法接受一个CSS选择器字符串作为参数，返回匹配到的第一个元素节点。如果没有匹配到任何元素，则返回null。下面是具体的使用方法：

```

var el = document.querySelector('#myId'); // 通过ID选择元素

var el = document.querySelector('.myClass'); // 通过类名选择元素

var el = document.querySelector('div'); // 通过标签名选择元素

var el = document.querySelector('#myId .myClass div'); // 使用复杂的选择器选择元素

```

querySelectorAll方法

querySelectorAll方法接受一个CSS选择器字符串作为参数，返回匹配到的所有元素节点。如果没有匹配到任何元素，则返回一个空NodeList对象。使用方法和querySelector方法类似：

```

var els = document.querySelectorAll('#myId'); // 通过ID选择元素

var els = document.querySelectorAll('.myClass'); // 通过类名选择元素

var els = document.querySelectorAll('div'); // 通过标签名选择元素

var els = document.querySelectorAll('#myId .myClass div'); // 使用复杂的选择器选择元素

```

与其他DOM操作方法的区别

querySelector和querySelectorAll方法与传统的DOM操作方法（getElementById、getElementsByClassName、getElementsByTagName）相比，最大的区别在于它们支持CSS选择器语法的查询。使用CSS选择器语法可以让我们非常方便地选择特定的元素节点，同时可以支持更加复杂的查询操作，例如选择某个类下的某个div元素，或者选择某个元素下的某个文本框等。此外，querySelector和querySelectorAll方法都是基于现代浏览器的，因此在性能上也要比传统的DOM操作方法更加快速。

使用实例

下面是一个使用querySelector和querySelectorAll方法的例子，该例子通过选择器来选择HTML页面中的特定元素，然后修改它们的样式。首先，我们来看一下HTML代码：

```

```

我们要实现的功能是：将myWrapper元素下的所有li元素的字体颜色设置为红色。使用querySelectorAll方法可以很容易地实现这个功能：

```

var els = document.querySelectorAll('#myWrapper li');

for (var i = 0; i < els.length; i++) {

els[i].style.color = 'red';

```

以上代码首先使用querySelectorAll方法选择所有ID为myWrapper下的li元素，然后遍历所有元素，将它们的字体颜色设置为红色。这样，我们就成功地使用querySelectorAll方法实现了一个功能。