33

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?

1
  • 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. Nov 25, 2010 at 8:55

6 Answers 6

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.

5
  • Yeah but whatever it has to be compatible to FF, and this at least in complete 3rd-generation Nov 25, 2010 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). Nov 25, 2010 at 11:52
  • +1 - I thought about this. For closed environments it's the best solution.
    – joksnet
    Nov 25, 2010 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, 2014 at 6: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, 2016 at 11:36
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 ;)

5
  • 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 ;) Nov 25, 2010 at 8: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. :) Nov 25, 2010 at 11:27
  • Yes! That was a generic example. Not tested BTW.
    – joksnet
    Nov 25, 2010 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: stackoverflow.com/a/4275292/1542891 for a well-supported answer that doesn't require spinning your own selector function. Oct 13, 2014 at 9: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 1, 2015 at 13:15
12

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

In jQuery you would use

$('[id^="path_test_"]')
1
  • 2
    Actually, I'm not using jQuery, but I think about, mabye I'll start with soon... thx ;) Nov 25, 2010 at 8:55
11

Try this in 2019 as a wildcard.

document.querySelectorAll("[id*=path_test_]")
2
  • 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. Aug 29, 2019 at 2:46
  • @JasonAller thanks for that remark. I promise to keep it in mind. I edited my answer. Aug 30, 2019 at 20:48
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.

2
  • Will this include elements that are a level lower than a child, for example <div id="parent"><div id="child_level1"><div id="child_level2"></div></div></div> ? Nov 25, 2010 at 8:53
  • 1
    @Florian: No, you could however loop over the children of the children.... might be bad in terms of runtime though ;) Nov 25, 2010 at 8:57
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.

6
  • 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. Nov 25, 2010 at 8: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? Nov 25, 2010 at 8: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... Nov 25, 2010 at 9: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)... Nov 25, 2010 at 9:08
  • Yeah, ok. But only of form-elements, not of design elements like <div name="blah"> hm? Nov 25, 2010 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.