选择子节点 (DOM)

Question

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

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

Answer 1

使用 DOM 选择器 getElementsByClassName()。

Return 值： 包含 class 名称的元素数组。

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

使用其父节点（在本例中为 <div> 标签）的子节点（在本例中为 <a> 标签）的 .children property to return an HTMLCollection。

//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>

选择子节点 (DOM)

Selecting a child node (DOM)

javascript

dom

child-nodes