How to getElementById for A Group of Elements with Similar ID's?

Question

I am working on a task where I have to manipulate some data in input fields that have similar named and ID'd elements.

let's just say things like ID_1 ID_2 or SCH_name SCH_start SCH_end. If I wanted to for example hide all those input fields based on their ID prefix is there something like a "contains" that would do that?

[Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) with making use of attribute selectors — Peter Seliger, Jun 24 '20 at 13:08
`var inputs=document.getElementsByTagName("input");` `for(var input of inputs) if(input.id.includes("SCH") && (input.id.indexOf("SCH")==0)) input.style.display="none";`. This checks that "SCH" is in the id AND that it's at the beginning of it. I'm sure there are easier ways to check that. To undo the hiding: `input.style.display="";` — iAmOren, Jun 24 '20 at 13:35

score 2 · Answer 1 · answered Jun 24 '20 at 13:07

Note: Maybe you should add classes to your element.

You can use querySelectorAll

for(let elem of document.querySelectorAll("[id^=d]")){
  console.log(elem.id)
}

<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="w1">1</div>
<div id="w2">2</div>
<div id="w3">3</div>

score 1 · Answer 2 · answered Jun 24 '20 at 13:09

1

What you want is probably an Attribute selector (MDN)

[attr^=value]

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

So yours would be:

[id^="ID_"] {
}

answered Jun 24 '20 at 13:09

Ross Mackay

940
4
10

How to getElementById for A Group of Elements with Similar ID's?

2 Answers2