JavaScript：CSS选择语法

Question

当想要在类似于CSS的语法中选择元素时，要遵循的最佳语法是什么。

例如，如果我希望.selector中的文字为红色，请考虑以下内容：

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

在CSS中我会这样做：

.selector p {
  color:red;
}

如果想在JavaScript中使用相同类型的CSS选择树，我会这样做：

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

在使用JavaScript和使用选择树时，这似乎是遵循基于CSS语法的最佳方式。

有没有更好的做事方式或这被认为是最佳做法？

编辑 - 请不要jQuery。除非你在解释jQuery的后端语法如何在实现同样的事情中起作用。

Answer 1

如果您不需要支持Internet Explorer版本6,7或8等旧版浏览器，这是最佳做法。

大多数人所做的是使用像jQuery这样的库来允许他们在所有浏览器中使用CSS选择器。在现代浏览器中，它只是使用document.querySelectorAll()，但在较旧的浏览器上，它使用等效（但速度要慢得多）的方法来执行相同的操作。

Answer 2

这并不能严格回答您的问题，但如果您使用jQuery，则可以使用css选择器选择元素。所以对于你的例子，你会写：

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