How to select next sibling of a certain type with JS?

Question

I've got some html

<h4 id="start-here">title</h4>
<p>paragraph</p>
<p>paragraph</p>
...some number of paragraphs... 
<a href="#" class="link">link</a>

And I've got the <h4> with the id selected in JavaScript. How do I get from that selection in JS to the first <a> which is of the class link, or just the next sibling anchor tag?

Answer 1

Using document.querySelector() and a CSS selector, here with the general sibling combinator ~, you can achieve that like this:

A side note, in below samples I target inline style, though it is in general better to toggle a class.

Stack snippet

(function(){

  document.querySelector('#start-here ~ a.link').style.color = 'red';

})();

<h4 id="start-here">title</h4>
<p>paragraph</p>
<a href="#">link</a>
<p>paragraph</p>
<a href="#" class="link">link</a>

---

Updated based on another question/comment, how to get more than one element in return.

With document.querySelectorAll() one can do similar, and target multiple elements like this.

Stack snippet

(function(){

  var elements = document.querySelectorAll('#div2, #div3');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
  }

})();

<h4 id="start-here1">title</h4>
<div id="div1">some text</div>

<h4 id="start-here2">title</h4>
<div id="div2">some text</div>

<h4 id="start-here3">title</h4>
<div id="div3">some text</div>