getElementById() wildcard

Question

I got a div, and there i got some childnodes in undefined levels.

Now I have to change the ID of every element into one div. How to realize?

I thought, because they have upgoing IDs, so if the parent is id='path_test_maindiv' then the next downer would be 'path_test_maindiv_child', and therefore I thought, I'd solve that by wildcards, for example:

document.getElementById('path_test_*')

Is this possible? Or are there any other ways?

Why do you have to change the IDs? Maybe your initial approach is wrong and you should use classes? Just a thought... if you post your HTML and describe why you want to it, we might be able to help more. — Felix Kling, Nov 25 '10 at 08:55

score 31 · Answer 1 · edited Jun 13 '18 at 18:37

31

In one of the comments you say:

(...) IE is anyway banned on my page, because he doesn't get it with CSS. It's an admin tool for developer, so only a few people, and they will anyway use FF

I think you should follow a different approach from the beginning, but for what it's worth, in the newer browsers (ok, FF3.5), you can use document.querySelectorAll() with which you can get similar results like jQuery:

var elements = document.querySelectorAll('[id^=foo]');
// selects elements which IDs start with foo

Update: querySelectorAll() is only not supported in IE < 8 and FF 3.0.

edited Jun 13 '18 at 18:37

danicotra

1,333
2
15
34

answered Nov 25 '10 at 09:06

Felix Kling

795,719
175
1,089
1,143

Yeah but whatever it has to be compatible to FF, and this at least in complete 3rd-generation – Florian Müller Nov 25 '10 at 10:23
2

@Florian: It is only *not* supported in FF 3.0, it is supported from 3.5 on.... are there really people that still use 3.0? ;) (anyway just wanted to give you another possibility). – Felix Kling Nov 25 '10 at 11:52
+1 - I thought about this. For closed environments it's the best solution. – joksnet Nov 25 '10 at 16:52
You mean "only not supported in IE < 8". (In other words, 7 is not supported but your comment implies it is). – Tobias J Dec 11 '14 at 06:49
**Note:** To get **only the first element** (which is similar to .getElementById), there is also **`document.querySelector(expression)`** available. To get elements which IDs contain a substring, use the expression **`'[id*=foo]'`**. Meanwhile, the old browsers (IE<8, FF 3.0) don't matter any more so you can use the modern methods (question was asked 2010 - 6 years ago from now). – Matt Sep 27 '16 at 11:36

score 30 · Accepted Answer · answered Nov 25 '10 at 08:52

30

Not in native JavaScript. You have various options:

1) Put a class and use getElementsByClassName but it doesn't work in every browser.

2) Make your own function. Something like:

function getElementsStartsWithId( id ) {
  var children = document.body.getElementsByTagName('*');
  var elements = [], child;
  for (var i = 0, length = children.length; i < length; i++) {
    child = children[i];
    if (child.id.substr(0, id.length) == id)
      elements.push(child);
  }
  return elements;
}

3) Use a library or a CSS selector. Like jQuery ;)

answered Nov 25 '10 at 08:52

joksnet

2,305
15
18

Looks nice, because IE is anyway banned on my page, because he doesn't get it with CSS. It's an admin tool for developer, so only a few people, and they will anyway use FF ;) – Florian Müller Nov 25 '10 at 08:59
2

@Florian - you better change `document.body.getElementsByTagName('*')` to be `document.getElementById('path_test_maindiv').getElementsByTagName('*')` instead to improve efficiency. No need to get **all** elements when you only need those in specific DIV element. :) – Shadow The GPT Wizard Nov 25 '10 at 11:27
Yes! That was a generic example. Not tested BTW. – joksnet Nov 25 '10 at 16:48
3

It's worth noting that this answer, whilst effective, is quite outdated as of 2014. See Felix King's answer below: http://stackoverflow.com/a/4275292/1542891 for a well-supported answer that doesn't require spinning your own selector function. – StackExchange What The Heck Oct 13 '14 at 09:35
Thanks! This worked for me in IE 11 and FF (I didn't return the elements array but changed the value for each element to a value set in a specific dropdown). "querySelectorAll" as proposed below didn't work in IE 11 for me. – Whatts Sep 01 '15 at 13:15

Jamiec · Answer 3 · 2015-01-19T12:16:21.810

12

jQuery allows you to find elements where a particular attribute starts with a specific value

In jQuery you would use

$('[id^="path_test_"]')

edited Jan 19 '15 at 12:16

answered Nov 25 '10 at 08:46

Jamiec

133,658
13
134
193

2

Actually, I'm not using jQuery, but I think about, mabye I'll start with soon... thx ;) – Florian Müller Nov 25 '10 at 08:55

Ivan Kolyhalov · Answer 4 · 2019-08-30T20:48:33.277

11

Try this in 2019 as a wildcard.

document.querySelectorAll("[id*=path_test_]")

edited Aug 30 '19 at 20:48

answered Aug 28 '19 at 17:58

Ivan Kolyhalov

902
11
16

2

When adding an answer to an eight year old question with existing answer it is helpful to point out what new aspect your answer addresses and how it is different from the existing answers and if your answer would have been valid eight years ago, or if it relies on something that happened during those eight years like a new feature being added to JavaScript. – Jason Aller Aug 29 '19 at 02:46
@JasonAller thanks for that remark. I promise to keep it in mind. I edited my answer. – Ivan Kolyhalov Aug 30 '19 at 20:48

score 0 · Answer 5 · answered Nov 25 '10 at 08:49

0

I don't think so wildcards are allowed in getelementById. Instead you can have all the child nodes of your respective DIV using:

var childNodeArray = document.getElementById('DIVID').childNodes;

This'll give you an array of all elements inside your DIV. Now using for loop you can traverse through all the child elements and simultaneously you can check the type of element or ID or NAME, if matched then change it as you want.

answered Nov 25 '10 at 08:49

Asif Mulla

1,652
2
22
32

Will this include elements that are a level lower than a child, for example
? – Florian Müller Nov 25 '10 at 08:53
1

@Florian: No, you could however loop over the children of the children.... might be bad in terms of runtime though ;) – Felix Kling Nov 25 '10 at 08:57

score 0 · Answer 6 · answered Nov 25 '10 at 08:52

0

You should not change ID of element to ID of other existing element. It's very wrong, so you better re-think your core logic before going on.

What are you trying to do exactly?

Anyway, to get all elements with ID starting with something, use jQuery as suggested before, if you can't it's also possible using pure JavaScript, let us know.

answered Nov 25 '10 at 08:52

Shadow The GPT Wizard

66,030
26
140
208

I'll better use pure javascript, because I'm not using jQuery for now, but mabye later. I have to change the IDs because it's in a form, and if I got the values in a later php file, I re-build an XML file with that, and I use the IDs to re-build the structure. But now, one Key must be editable, so if it change, I have to change every following ID too. – Florian Müller Nov 25 '10 at 08:56
@Florian: So you want to clone the form and have two forms? Still I don't understand why you need IDs... can't you put the value of the ID in the name? – Felix Kling Nov 25 '10 at 08:59
Oh ... wait. With forms, only the name attribute gets submitted, and only of input tags, is this right? So if, I could too manually change the name values of them, because this field have a number in their ID (because it was an array).... U don't have to understand, I'm sometimes thinking too loud... – Florian Müller Nov 25 '10 at 09:00
@Florian: Yep, the name is the one submitted as key in the POST or GET data. Not only of `input` elements, but of all form elements (which could be also `select` or `textarea`)... – Felix Kling Nov 25 '10 at 09:08
Yeah, ok. But only of form-elements, not of design elements like
hm?
– Florian Müller Nov 25 '10 at 10:21
Downvoted: This is a comment, not an answer. Also, there are other use cases for OP's question. – Yngvar Kristiansen Nov 08 '16 at 11:34

getElementById() wildcard

6 Answers6

Linked

Related