JavaScript: CSS Selection Składnia - javascript, html, css

jaka jest najlepsza składnia do naśladowania, gdy chce się wybrać elementy w składni podobnej do CSS.

Weźmy pod uwagę na przykład poniższe, jeśli chciałem tekst wewnątrz .selector być czerwonym:

<div class="selector">
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
</div>

W css zrobię to:

.selector p {
color:red;
}

Jeśli chciałbym użyć tego samego drzewa wyboru CSS z JavaScriptem, zrobiłbym to:

var selector = document.querySelectorAll(".selector p");
for (i = 0; i < selector.length; ++i) {
selector[i].style.color = "red"
}

Wydaje się to być najlepszym sposobem na przestrzeganie składni opartej na CSS podczas pracy z JavaScript i przy użyciu drzewa wyboru.

Czy istnieje lepszy sposób robienia rzeczy lub jest to uważane za najlepszą praktykę?

EDYCJA - nie proszę jQuery. Dopóki nie wyjaśnisz, w jaki sposób działa składnia backendu jQuery w osiąganiu tego samego.

Odpowiedzi:

Jest to najlepsza praktyka, jeśli nie musisz obsługiwać starszych przeglądarek, takich jak Internet Explorer w wersji 6, 7 lub 8.

Większość ludzi używa biblioteki takiej jak jQuery aby umożliwić im używanie selektorów CSS we wszystkich przeglądarkach. W nowoczesnych przeglądarkach po prostu używa document.querySelectorAll() pod okładkami, ale w starszych przeglądarkach używa równoważnej (ale znacznie wolniejszej) metody, aby zrobić to samo.

Nie jest to ściśle odpowiedź na twoje pytanie, ale jeśli używasz jQuery możesz wybrać elementy używając selektorów css, więc dla przykładu napiszesz:

$(".selector p").css({color: "red"});