[Help!] Javascript: Using getElementById

[Arld]

I'm not exactly the best or most experienced user with JavaScript, so I'll go ahead and ask.

Basically, I want to inject some personal JavaScript for custom and client-side editing of the theme. This is necessary because of Jelsoft's horrible choice to use most styling inline instead of with IDs and classes.

So, I want to add my own class to certain nested elements, so I can then edit the CSS properly. However, it's not just a child of one element, but very deeply nested within a lot of other elements that don't have an ID either.

Ergo, usage of the getElementById is rather limited, because as far as I know, using:

document.getElementById('ID').children[x]

Is not exactly usable for more than a few children.

#

I'm looking for the following sequence of elements, whereas the last one is the one that's needs a new class:

div#posts > div > div.page > div > div > table.vbseo_like_postbit > tbody > tr > td

So I tried the following:

window.onload = function() {
	document.getElementById('posts > div > div.page > div > div > tbody > tr > td').className = 'arldEdit';
};

To no avail. Any clue?

[Mr. Mikey]

Can't you use .childNodes.item(x).nodeValue ? if I remember correctly.

Either that or try the lowest class on the chain - so for this one will be vbseo_like_postbit

Also really? There are no ID's available? Le sigh.

[Arld]

Solved by now. Thanks though.

Turns out [with the help of Sheep & Cat] that I've been using the wrong approach. document.querySelectorAll() basically was what I needed. I then had to loop through its results, considering what is being returned is a NodeList (basically an array).

PHP Code:

var idx;
var listSignatureBit = document.querySelectorAll('.vbseo_like_postbit td[valign="bottom"]');

for(idx = 0; idx < listSignatureBit.length; ++idx) {
    listSignatureBit[idx].classList.add('ArldEdit');  
} 


[Tango Protocol]

Ever consider using jQuery?

$('.vbseo_like_postbit td[valign="bottom"]').each(function(key, value) {
          $(value).addClass('arldEdit');
});