如何使用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"); 

将工作