JavaScript: Sintaxe de seleção de CSS - javascript, html, css

qual é a melhor sintaxe a seguir quando se deseja selecionar elementos em uma sintaxe semelhante a CSS.

Por exemplo, considere o seguinte, se eu quisesse o texto dentro .selector ser vermelho:

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

Em css eu faria isso:

.selector p {
color:red;
}

Se quisesse usar o mesmo tipo de árvore de seleção de CSS com JavaScript, eu faria isso:

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

Essa parece ser a melhor maneira de seguir uma sintaxe baseada em CSS ao trabalhar com JavaScript e usar uma árvore de seleção.

Existe uma maneira melhor de fazer as coisas ou esta é considerada a melhor prática?

EDIT - Não jQuery por favor. A menos que você esteja explicando como a sintaxe de backend do jQuery funciona para alcançar a mesma coisa.

Respostas:

Essa é uma prática recomendada se você não precisar oferecer suporte a navegadores herdados, como o Internet Explorer versão 6, 7 ou 8.

O que a maioria das pessoas faz é usar uma biblioteca como jQuery para permitir que eles usem seletores CSS em todos os navegadores. Nos navegadores modernos, ele apenas usa document.querySelectorAll() sob os panos, mas em navegadores mais antigos, ele usa um método equivalente (mas muito mais lento) para fazer a mesma coisa.

Isso não responde estritamente à sua pergunta, mas se você usar o jQuery, poderá selecionar elementos usando seletores de css. Assim, para o seu exemplo, você escreveria:

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