javascript - 选择子节点 (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>