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

以前,使用DOM来访问纯JavaScript中的元素并不那么微妙,这是两个新的方法,querySelector & querySelectorAll,现在在所有现代浏览器中都支持,这个任务现在更容易。

问候选人

querySelector 返回与所提供的 CSS 查询相匹配的第一个元素。

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

或者在元素上使用它来获取元素中的元素:

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

查询 选择

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

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

在这里,你可以做同样的事情,并缩小你的选择,让我们选择第一个p元素中的间隔元素:

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

您可以在主要浏览器中找到有关查询选择器功能的支持的更多数据,请参阅 caniuse.com。