选择子节点 (DOM)

Question

如何<a>使用纯 Javascript 选择第二个标签？

<div class="navigation">
    <a href="/page/2/">Prev</a>
    <a href="/page/4/">Next</a>
</div>

Answer 1

使用 DOM 选择器getElementsByClassName()。

返回值：包含类名的元素数组。

将 替换[?]为选择器返回值中的目标索引getElementsByClassName。例如，如果<div>包含标签的标签<a>是具有类名的文档的第一个元素navigation，那么它将位于0返回数组的索引处（因为它是从 0 开始的），因此您应该使用[0]相应的元素。

使用.children属性返回其父节点（在本例中为标签）的子节点（在本例中为标签 ）的HTMLCollection。<a><div>

//JS

document.getElementsByClassName('navigation')[1].children[1];

//HTML

<div class="navigation">
    <a href="/page/1/">Prev</a>
    <a href="/page/2/">Next</a> 
</div>
<div class="navigation">
    <a href="/page/3/">Prev</a>
    <a href="/page/4/">Next</a> (selected element)
</div>
<div class="navigation">
    <a href="/page/5/">Prev</a>
    <a href="/page/6/">Next</a> 
</div>
<div class="navigation">
    <a href="/page/7/">Prev</a>
    <a href="/page/8/">Next</a> 
</div>