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

但是我怎样才能选择 <a> <li> 内的元素？我可以在另一个 querySelector 中做一个 querySelector 吗？或者有一些更好的方法来做到这一点？谢谢。

Answer 1

But how can I select the <a> element inside the <li>?

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

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

---

Can I do a querySelector inside anther querySelector?

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

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

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

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

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