了解选择

Question

谁能解释这个特定的javaScript选择：

document.querySelectorAll("div[class^='tile']"); 

特别是^=一部分？

Answer 1

这是CSS3's "attribute begins with" selector

因此，这种选择是有“标题”开头的类属性的所有div

Answer 2

这意味着，在左边的属性应与右边的值开始。

因此div class="tile0",div class="tiles"等将由选择器匹配。

Answer 3

document.querySelectorAll()接受像CSS选择器这样的查询来选择DOM元素。 MDN是了解它如何工作的最佳参考。 querySelector s是DOM Selector API的一部分，完整规范请参阅here。

此处包含的代码使用属性选择器查询。属性选择器不限于类。您可以使用您想要（和可用）的任何属性进行选择。例如，如果你有这样的HTML：

<label for="myInput">My Lable</label>

那么这个选择会选择你的元素：

document.querySelector('input[for="myInput"]');

属性之间的运营商的值可以如下：

[attr=value]：选择属性完全等于给定值的元素

[attr*=value]：选择具有包含给定值的属性的元素。像mvalue，value，valueone ....

[attr~=value]：同*=但value应与空格隔开。像my value

[attr$=value]：与value

[attr^=value]结束：开始与value

[attr!=value]：不等于value