[thelist] DOM - .childNode and How to Target?

Christian Heilmann codepo8 at gmail.com
Mon Apr 2 08:28:11 CDT 2007


> I have a table that holds some text that I need to change using DOM
> scripting.  The trouble is, I am not sure what is considered a child and
> what is not.  Here is the example:
>
> http://tinyurl.com/2zow44
> I do not have access to the html, hence the DOM attempt.
> Any help would is greatly appreciated.
> Also, any tutorial pages that help with this sort of thing would be great
> as well.  There's a lot of examples out there, but not many that make
> sense to a DOM-challenged guy like myself.  Something that shows what is
> or can be targeted and how to target them.

Well, there are several ways to do that, all of them are as error
prone as the next.
As you have a class on the TD you could loop through all the TDs and
get the first one that has a class of LoginCaption (they should really
be labels).

As the HTML stands (and provided it doesn't change) you can also
change the text inside this cell with:

var p = document.getElementById('target-b').getElementsByTagName('td')[2];
p.firstChild.nodeValue = 'Email';

Traversing the node tree by childNodes can be very time consuming and
also confusing, as MSIE does not count linebreaks as nodes but Firefox
does.

More info: http://onlinetools.org/articles/unobtrusivejavascript/chapter2.html

I've also done a screencast of the basics of the DOM:
http://icant.co.uk/articles/domessentials/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/



More information about the thelist mailing list