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

how to use querySelector to select dynamic added elements

本文关键字：添加 元素 动态 选择 何使用 querySelector      更新时间：2023-09-26

我有一个这样的dom：

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

CCD_ 1元素被动态地添加到html中，因此我不能向其添加id。我使用css选择器通过使用：来选择<li>元素

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

但是如何选择<li>中的<a>元素呢？我可以在另一个querySelector中执行querySelector吗？或者有更好的方法？谢谢

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

选择器语法包括子组合子，它是一个空间

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

我可以在另一个querySelector中执行querySelector吗？

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

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

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

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

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

我可以在另一个querySelector中执行querySelector吗？

是

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

或者有更好的方法？

是

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

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

将工作

相关文章：