选择子节点(DOM)

Question

如何使用纯Javascript选择第二个<a>标记?

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

Answer 1

使用DOM选择器getElementsByClassName()。

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

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

使用。children属性返回父节点(在本例中为<div>标签)的子节点(在本例中为<a>标签)的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>