.scrollIntoView any element with data- tag, or using classes to section content with data- tags

Right now, I separate my content with a class called "section", not to be confused with the html tag, e.g.:

<div class="section" data-scroll-location="top">
<nav></nav>
</div><!-- .section -->

<div class="section" data-scroll-location="content">
<p></p>
</div><!-- .section -->

<div class="section" data-scroll-location="bottom">
<footer></footer>
</div><!-- .section -->

Using the above method, I can easily grab each elementsByClassName('section'), and gather the data- value; however, I am not sure how to efficiently grab a data- tag without using a class, e.g.:

<header data-scroll-location="top"></header>

<p data-scroll-location="content"></p>

<footer data-scroll-location="bottom"></footer>

I could create a loop to grab every single element, right? But, would it not be a bad thing to do performance wise, or [insert con I am not aware of]?

What method would you use for a site with maybe 3-5 scroll destinations?