A better way to get elements into JS than getElementById?

Question

I have a lot of very similar HTML elements I need to import into my JavaScript file but the normal way would just look so drab and it would be way too cumbersome, anyone know a way to import these elements with a single command, or is it even possible?

I need a vanilla JS solution. By import I mean document.getElementById("example"); and attatching it to a variable.

        <div id="graph-points-x">
            <div id="p0">0</div>
            <div id="x1">1</div>
            <div id="x2">2</div>
            <div id="x3">3</div>
            <div id="x4">4</div>
            <div id="x5">5</div>
            <div id="x6">6</div>
            <div id="x7">7</div>
            <div id="x8">8</div>
            <div id="x9">9</div>
        </div>
        <div id="graph-points-y">
            <div id="y1">1</div>
            <div id="y2">2</div>
            <div id="y3">3</div>
            <div id="y4">4</div>
            <div id="y5">5</div>
            <div id="y6">6</div>
            <div id="y7">7</div>
            <div id="y8">8</div>
            <div id="y9">9</div>
        </div>

What do you mean by "import"? What do you consider to be "the normal way"? — Quentin, Mar 17 '19 at 23:51
Concept of *"import html elements into javascript"* really needs clarification since it makes little sense without more details about exactly what you are trying to accomplish — charlietfl, Mar 17 '19 at 23:51
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll — Quentin, Mar 17 '19 at 23:58
I don't understand whats with people downvoting stuff. I got plenty of good answers, I think that if you don't understand the question you should move on, I edited it and it now makes sense enough for people to answer. — The Nuthouse, Mar 18 '19 at 00:02
*"now it makes sense enough"* ... no it really doesn't without a proper explanation of what it is you are trying to accomplish. See [ask] — charlietfl, Mar 18 '19 at 00:03
I know how to ask and I clearly explained what I want to accomplish. "Importing many HTML elements into a JavaScript file all at once" And I went on to explain what I meant and how I would normally go about doing it where I said "by import I mean`document.getElementById("example")` and attatch it to a variable`. It's like people only read the title — The Nuthouse, Mar 18 '19 at 00:05
Your explanation is very vague which leaves it up to us to guess exactly what you need and accounts for the close votes and down votes. *Garbage in = garbage out*. Strongly suggest reading through the [help] and tune up how to use this site. Also go through the [Stack Overflow question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) — charlietfl, Mar 18 '19 at 00:07
The problem is "by import I meandocument.getElementById("example") and attatch it to a variable" does not relate to anything else in the code you have supplied. It is also not clear if you want to select the "graph-point" divs or their contents. My answer is a "best guess". Your question could certainly do with some tidying up to make it clearer. — Jon P, Mar 18 '19 at 00:09
I understand this is probably the worst question I have ever asked, Im probably going to close it because frankly it's an embarrassment because I literally knew how to solve it all along I was just too wrapped up in the JavaScript to realize its an HTML problem. I do know how to write questions, but this time I didn't exactly what to say. — The Nuthouse, Mar 18 '19 at 00:11

score 1 · Answer 1 · answered Mar 18 '19 at 00:00

In your example use querySelectorAll with an attribute selector:

//Get elements with an id that starts with graph-points-
let graphPoints = document.querySelectorAll('[id^=graph-points-]');
console.log(graphPoints);

<div id="graph-points-x">
  <div id="p0">0</div>
  <div id="x1">1</div>
  <div id="x2">2</div>
  <div id="x3">3</div>
  <div id="x4">4</div>
  <div id="x5">5</div>
  <div id="x6">6</div>
  <div id="x7">7</div>
  <div id="x8">8</div>
  <div id="x9">9</div>
</div>
<div id="graph-points-y">
  <div id="y1">1</div>
  <div id="y2">2</div>
  <div id="y3">3</div>
  <div id="y4">4</div>
  <div id="y5">5</div>
  <div id="y6">6</div>
  <div id="y7">7</div>
  <div id="y8">8</div>
  <div id="y9">9</div>
</div>

score 0 · Answer 2 · answered Mar 18 '19 at 00:02

If you don't need to to target IE7 and lower, document.querySelectorAll('[id^="graph-points"]') is what you want.

I'd still recommend to add a class to the parent containers so you can use a simpler selector, as targeting IDs starting with a specific string is not the most optimal solution.

See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll for more information

A better way to get elements into JS than getElementById?

2 Answers2