getElementById() wildcard

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?

Solution 1:

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 ;)

Solution 2:

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.

Solution 3:

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

In jQuery you would use

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