queryselector_JavaScript选择器：querySelector和querySelectorAll

queryselector

The limitations of element selection methods in traditional JavaScript, such as getElementById, quickly become apparent when compared to the power and flexibility of CSS selectors: getElementById('bandtable')might get the right table, but we could have to add significantly more code to loop through and find the actual elements required by the script, such as the rows inside the table.

与CSS选择器的强大功能和灵活性相比，传统JavaScript中的元素选择方法 (例如getElementById的局限性很快变得很明显： getElementById('bandtable')可能会得到正确的表，但我们可能必须向其中添加更多的代码遍历并查找脚本所需的实际元素，例如表中的行。

增加一些嘶嘶声 (Adding Some Sizzle)

Some of the first JavaScript frameworks directly addressed this deficit in selection power, including

Sizzle

, which was eventually incorporated into JQuery. Sizzle’s selective range is one of the reasons that JQuery became so popular.

一些最初的JavaScript框架直接解决了选择力不足的问题，包括 Sizzle ，最终被合并到JQuery中。 Sizzle的选择性范围是JQuery如此受欢迎的原因之一。

JavaScript获得改头换面 (JavaScript Gets A Makeover)

Many developers have been using JQuery for so long that they’re not aware of changes to core JavaScript. The JavaScript Selector API is officially part of the HTML5 spec, and pretty much replaces any need for Sizzle or frameworks for element selection. One example:

许多开发人员一直在使用JQuery，以至于他们不知道对核​​心JavaScript的更改。 JavaScript Selector API正式是HTML5规范的一部分，几乎替代了对Sizzle或元素选择框架的任何需求。 一个例子：

document.querySelector('#eddie');

Achieves exactly the same results as document.getElementById('eddie'). Not much advantage there, you might think. How about this?

获得与document.getElementById('eddie')完全相同的结果。 您可能会认为那里没有太多优势。 这个怎么样？

document.querySelector('#eddie h1 + p')

That’s right. The querySelector function allows the expression of any valid combination of CSS selectors in order to find what it needs on the page.

那就对了。 querySelector函数允许表达任意有效的CSS选择器组合，以便在页面上找到所需的内容。

querySelector only matches one element: the first one it finds in the DOM. If you’re after multiple nodes, you need to use querySelectorAll:

querySelector只匹配一个元素：它在DOM中找到的第一个元素。 如果您在多个节点之后，则需要使用querySelectorAll ：

var hiFrets = document.querySelectorAll('table#frets tr:nth-child(3)')

This gathers a node list of every third row from any table with an id of frets.

这将从id为frets的任何表中收集每三行的节点列表。

If you’re migrating from JQuery to modern JavaScript, it can be challenging to remember (and type!) document.querySelector() instead of the simple JQuery / Sizzle shortcut $. Thankfully, JavaScript itself can make the transition easy for you. At the very start of your script, simply place the following:

如果要从JQuery迁移到现代JavaScript，记住(并输入！) document.querySelector()而不是简单的JQuery / Sizzle快捷键$可能是一个挑战。 幸运的是，JavaScript本身可以使您轻松过渡。 在脚本的开头，只需放置以下内容：

var $ = document.querySelector.bind(document),
$$ = document.querySelectorAll.bind(document);

From that point, using document.querySelector is just like JQuery:

从这一点出发，使用document.querySelector就像JQuery：

var firstArticle = $("article");
var allCatPics = $$("img.cat");

几点警告 (A Few Caveats)

There are several factors that you should be aware of before making the switch to querySelector / All:

在切换到querySelector / All之前，您应该了解几个因素：

• The selection string used in querySelector must be understood by the browser natively or it will return null. This isn’t an issue unless you’re trying to use some complex CSS3 selection sequence, but it is a factor worth considering.

  浏览器必须 本机可以理解querySelector中使用的选择字符串，否则它将返回null 。 除非您尝试使用一些复杂CSS3选择序列，否则这不是问题，但这是一个值得考虑的因素。

• Unlike getElementsByTag, querySelectorAll returns a static node list gathered from the DOM as it exists at that point in time. This means that any change to the DOM tree that takes place after that point – nodes added or subtracted by JavaScript – will not be reflected in the nodelist without querySelectorAll being run again.

  与getElementsByTag不同， querySelectorAll返回从DOM收集的静态节点列表，该列表在该时间点存在 。 这意味着在此之后对DOM树所做的任何更改(由JavaScript添加或减去的节点)都不会反映在节点列表中，除非再次运行querySelectorAll。

If you’ve been using JQuery primarily for its selection power, and can live with the conditions above, I’d recommend using querySelector as a native method that avoids any need to load in extra frameworks and libraries.

如果您一直在使用JQuery作为主要选择功能，并且querySelector上述条件，那么建议您将querySelector用作本机方法，从而避免在任何其他框架和库中进行加载。

翻译自: https://thenewcode.com/677/JavaScript-Selectors-querySelector-querySelectorAll

queryselector