如何使用querySelector选择动态添加的元素

Question

我有一个像这样的人：

<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)")

但是如何选择<a>中的<li>元素？我可以在anther querySelector里面做一个querySelector吗？还是有更好的方法可以做到这一点？感谢。

Answer 1

  

但是如何选择<a>中的<li>元素？

选择器语法包括the descendant combinator，这是一个空格

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

  

我可以在anther querySelector中执行querySelector吗？

querySelector方法出现在所有HTML元素上。你可以链接它们：

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

......在这种情况下你可能不应该这样做。

如果您选择了多个元素（使用querySelectorAll），那么这将不太可行，因为您必须遍历第一组结果，然后查询每个元素的后代。

使用本机选择器语法通常更容易，更清晰。

Answer 2

  

我可以在anther 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"); 

会工作