Javascript类选择

Question

为什么这个Javascript选择器

document.getElementsByClassName('first-class class-child second-child')

看起来与这个jQuery选择器相同

$('.first-class .class-chlid .second-child');

然而它的工作方式却不一样吗？

Answer 1

getElementsByClassName将选择一个包含所有空格分隔类的元素。而是使用querySelectorAll方法，它有助于根据CSS选择器选择元素。

document.querySelectorAll('.first-class .class-chlid .second-child');

Answer 2

听起来你正在寻找document.querySelector()和/或document.querySelectorAll()：

var matches = document.querySelectorAll(".first-class .class-chlid .second-child");

请注意，在返回的值没有用于应用更改/效果/等的流畅API的意义上，这与相同。所有匹配的元素。你在这里得到的只是一系列匹配的元素。您可以使用您想要的数组。

Answer 3

getElementsByClassName function返回具有所有给定类名的所有子元素的类数组对象。

如果你想＆＃34;走路＆＃34; dom-tree（与jQuery一样）你应该使用querySelectorAll function

document.querySelectorAll('.first-class .class-child .second-child')

Answer 4

从问题中不清楚你是否正在寻找等效的javascript或等效的jquery（即使已经接受了答案来做出这种区分，如果有其他人到达这个问题，他们可能会寻找相反的方式）：

相反的情况也适用，因为您可以更改jquery以匹配getElementsByClassName（而不是在javascript中更改为querySelectorAll）

此代码：

document.getElementsByClassName('first-class class-child second-child')

  

返回具有所有给定类名（MDN）

的所有子元素的类数组对象

jquery中的等价物是：

 $('.first-class.class-child.second-child');

查找具有所有给定类名的所有元素。

如果您想查找包含任何这些类名的元素，请使用逗号：

 $('.first-class,.class-child,.second-child');