如何使用querySelector選擇動態添加的元素

Question

我有這樣一個DOM：

<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嗎？或者有更好的方法來做到這一點？謝謝。

Answer 1

但是，如何在<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），那麼這將不太可行，因爲您必須遍歷第一組結果，然後查詢每個元素的後代。

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

Answer 2

我可以做花葯querySelector內querySelector？

是

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

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

是

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

Answer 3

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

將工作