Выбор дочернего узла (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>