了解选择器

Question

任何人都可以解释这个特定的javaScript选择器：

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

具体是^=部分？

Answer 1

这是CSS3's "attribute begins with" selector

因此，这将选择具有以“title”

开头的class属性的所有div

Answer 2

这意味着左侧的属性应该以右侧的值开头。

所以选择器将匹配div class="tile0"，div class="tiles"等。

Answer 3

document.querySelectorAll()接受CSS选择器之类的查询来选择DOM元素。 MDN是了解其工作原理的最佳参考。 querySelector是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