JavaScript：CSS選擇語法

想要在類似於CSS的語法中選擇元素時，遵循的最佳語法是什麼。JavaScript：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; 
}

如果想用同一種CSS選擇樹的JavaScript，我會這樣做：

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

這似乎是當使用JavaScript並使用選擇樹時，遵循基於CSS的語法。

有沒有更好的做事方式或被認爲是最佳做法？

編輯 - 沒有jQuery請。除非你解釋jQuery的後端語法如何在實現相同的事情上起作用。

定義你的意思是什麼更好？可讀性？速度？記憶？ – laaposto

通常，最好爲樣式元素添加一個類，而不是直接操作樣式屬性。 –

如果您要修改元素的樣式，請考慮首先將它們從DOM中移除（可能已經足夠設置'display：none'，但我不是100％確定的），然後將它們添加回在更改完成時。 –

這是最好的做法，如果你不需要支持傳統的瀏覽器，如Internet Explorer版本6，7或8

大多數人做的卻是使用一個庫像jQuery允許他們使用CSS選擇器在所有瀏覽器中。在現代瀏覽器中，它僅使用document.querySelectorAll()，但在較舊的瀏覽器上，它使用等效（但速度較慢）的方法來執行相同的操作。

2014-04-10 12:46:34 GregL

IE8支持querySelector/querySelectorAll方法。 – raina77ow

好點。有關詳細信息，請參閱此[兼容性表]（http://caniuse.com/#feat=queryselector）。 – GregL

說「大多數人」是有點誤導。大多數使用jQuery的人可能因爲你描述的原因（遺留支持）而沒有使用它。 – user3143218

這並不嚴格回答你的問題，但如果你使用jQuery，你可以選擇使用css選擇器的元素。因此，對於你的例子，你會寫：

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

2014-04-10 12:48:18

回答