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");

请注意，这与jQuery不完全相同，因为返回的值没有一个用于将更改/效果/其他应用于所有匹配元素的流畅API。您在这里得到的只是一个匹配元素的数组。你可以用这个数组做你想做的事。

Answer 3

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

如果您想“遍历”dom-tree (与jQuery一样)，则应该使用 function。

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