jQuery методы содержимого () в чистом виде JS

Question

Итак, я пытался выполнить следующий фрагмент кода без импорта библиотеки jQuery:

$(".parent-class").contents().find(".child-class").css("color", "red");

Я знаю, что .contents () получает дочерние элементы каждого элемента в наборе соответствующих элементов, включая узлы текста и комментариев , из документов jQuery, но я не думаю, что понимаю, что означает это описание. Я пытался получить детей от .parent-class с помощью:

let theChildren = document.querySelector('.parent-class').children;

, но это не то же самое, что .contents().find(".child-class").

РЕДАКТИРОВАТЬ : В соответствии с просьбой в комментариях я задал новый вопрос , так как этот вопрос, по-видимому, недостаточно конкретизирован c.

Answer 1

contents() в основном используется в jQuery, когда вам нужно выбрать текстовые узлы. В первом примере кода он вам совсем не нужен, так как вы используете find() для выбора элементов с классом. Эти строки jQuery будут служить той же цели:

$(".parent-class").find(".child-class").css("color", "red");
$(".parent-class .child-class").css("color", "red");

В простом JS это будет:

document.querySelectorAll('.parent-class .child-class').forEach(el => el.style.color = 'red');

Примечание querySelectorAll() там. Это вернет нодлист, который вам нужно перебрать, чтобы обновить стиль так же, как это делает код jQuery.

Не существует явного JS эквивалента contents(), потому что вы переходите вручную, чтобы найти узлы, на которые вы хотите нацелиться, или используйте querySelector(), getElementByX() et c для нацеливания на элементы.

Answer 2

Получает первый дочерний класс в первом родительском классе:

let theChildren = document.querySelector('.parent-class .child-class');

Получает весь дочерний класс в каждом родительском классе:

let theChildren = document.querySelectorAll('.parent-class .child-class');