使用querySelector和querySelectorAll访问JavaScript中的元素

过去，使用 DOM 访问纯 JavaScript 中的元素并不是那么简单。 这对两个新方法， 查询选择器 & 查询选择器全部 ，现在所有现代浏览器都支持，这个任务现在更容易了。

查询选择器

querySelector 返回与提供的 CSS 查询匹配的第一个元素。 在完整文档上使用它：

let myElem = document.querySelector('#myElem');

或者在一个元素上使用它来获取元素内的一个元素：

let elem = document.querySelector('p');
let myElem = elem.querySelector('#myElem');

查询选择器全部

querySelector 返回与提供的选择器匹配的所有元素：

let elems = document.querySelectorAll('p');

在这里你可以做同样的事情并缩小你的选择范围。 让我们选择第一个 p 元素中的 span 元素：

let firstP = document.querySelector('p');
let spanElems = firstP.querySelectorAll('span');

您可以从 caniuse.com 找到更多关于跨主要浏览器支持查询选择器功能的数据。