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

getElementsByClassName function возвращает массивный объект всех дочерних элементов, которые имеют все указанные имена классов.

Если вы хотите, чтобы «ходить» в дом-дерево (так же, как это делает JQuery), вы должны использовать querySelectorAll function

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

Answer 4

это не ясно из вопроса, если вы ищете эквивалент Javascript или эквивалентный jquery (даже если ответ уже принят, чтобы сделать это различие, если кто-либо еще придет к этому вопросу, они могут искать обратное):

Противоположность также применима в том, что вы можете изменить jquery для соответствия getElementsByClassName (а не перейти на querySelectorAll в javascript)

Этот код:

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

возвращает массив объект, похожий на все дочерние элементы, которые имеют все заданные имена классов (MDN)

Эквивалент в JQuery является:

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

который находит все элементы, которые имеют все названий классов.

Если вы хотите, чтобы найти элементы с любой из этих имен классов, используйте запятую:

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