javascript - 如何选择列表 (li) 内的所有链接 (a)

Question

我需要将 jq 代码转换为 ->js<-。 对我来说这没有意义(因为 jq 是 js)，代码更长，很耗时(我'我不是程序员)并给出完全相同的效果...更不用说浏览器兼容性了。但是...

我想选择列表 (li) 内的所有链接 (a) 元素，对其进行迭代、更改值等。

在 jq 中一行简单的 $('li').find('a');即使 li 和 a like 之间还有更多内容，它也能工作:

<li>
<div>
<a href=''>inside div</a>
</div>
</li>

普通 js 中的 jq 代码相当于什么？我确实尝试了 querySelector querySelectorAll、过滤器等，但无济于事(对我来说，它仅当 a 是 li 的直接子代时才有效)。

顺便说一句，我在寻找答案时确实找到了一个很棒的页面 - http://youmightnotneedjquery.com/#contains_selector但我仍然遇到问题......所以任何建议表示赞赏。

Answer 1

您正在寻找document.querySelectorAll() 。这允许以与 CSS 类似的方式获取所有元素。因此，例如，如果您想获取所有 <a> <li>里面，您的查询自然会是 li a ，然后使用document.querySelectorAll("li a") .

该函数返回一个元素的 NodeList，您需要迭代它才能获取每个元素。它就像一个数组——你使用 a[i]访问索引为 i 的元素并使用a.length访问 NodeList 的大小。为了视觉清晰度，这是一张图片:

以下是您的解决方案的代码:

var a = document.querySelectorAll("li a");
for(var i = 0; i < a.length; i++){
    a[i].innerHTML   = "If you want to change text of an element";
    a[i].style.color = "red";
}

编辑:如果您希望将来将更多 jQuery 代码转换为 Javascript，请查看 jQuery 非缩小源代码并查找您想要的代码，这也可能有效。