如何选择列表内的所有链接（a）（li）

Question

我有jq代码我需要转换为 - ＆gt; js＆lt; - 。对我来说它没有意义（因为jq是js），代码更长，它＆＃39耗费时间（我不是程序员）并给出完全相同的效果......更不用说浏览器兼容性了。但...

我想选择列表中的所有链接（a）元素（li）迭代它们，更改值等等。

在jq中有一个简单的行$（＆＃39; li＆＃39;）。find（＆＃39; a＆＃39;）;即使li和之类的东西更多，它也能正常工作：

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

普通js中jq代码的等价物是什么？我确实尝试了querySelector querySelectorAll，filter等无效（对我而言，只有当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非缩小源代码并查找所需代码，这也可能有效。

Answer 2

$("li a").each(function() {
    $(this).text("new text");
});

Each for object?

var links = document.getElementById("yourid").getElementsByTagName("a");

for(var i = 0; i < links.length; i++){
    do something
}