2015-06-01 250 views
0

我有這樣一個DOM:如何使用querySelector選擇動態添加的元素

<ul> 
    <li><a>test</a></li> 
    <li><a>test</a></li> 
    <li><a>test</a></li> 
    <li><a>test</a></li> 
</ul> 

<li>元素被加入到HTML動態,使我無法添加ID給它。 而我使用的CSS選擇器通過使用來選擇<li>元素:

document.querySelector("li:nth-child(1)") 

但我怎麼能選擇<li><a>元素?我可以在anther querySelector中執行一個querySelector嗎?或者有更好的方法來做到這一點?謝謝。

+0

' 「李:第n個孩子(1)」'? –

+0

[檢查這疊後(http://stackoverflow.com/a/10632206/3985848) –

+0

你的意思是你想,讓他們在一個「活」的狀態?或剛剛創建完成後? – Vandervals

回答

3

但是,如何在<li>內選擇<a>元素?

選擇語法包括the descendant combinator,這是一個空間

document.querySelector("li:nth-child(1) a") 

我可以做花葯querySelector內querySelector?

querySelector方法出現在所有HTML元素上。你可以鏈接它們:

document.querySelector("li:nth-child(1)").querySelector('a'); 

......你可能不應該在這種情況下。

如果您選擇了多個元素(使用querySelectorAll),那麼這將不太可行,因爲您必須遍歷第一組結果,然後查詢每個元素的後代。

使用本機選擇語法通常更容易,更清晰。

+0

什麼是你的頭像需要一把槍,當你是一個忍者:-) – EJTH

0

我可以做花葯querySelector內querySelector?

document.querySelector('li:nth-child(1)').querySelector('a'); 

還是有一些更好的方法來做到這一點?

document.querySelector('li:nth-child(1) a'); 
-1
document.querySelector("li:nth-child(1) a"); 

將工作

相關問題