Jump to content

DOM innerHTML vs childNodes[].nodeValue

retro-starr

By retro-starr
in HTML/XHTML

Recommended Posts

retro-starr Newbie

retro-starr

Posted
Posted

To me, in the example below you can change "x[1].innerHTML" to "x.childNodes[1].nodeValue" and it should work, but it doesn't! Worse, once you make the change the whole sentence goes away. Might it be something error with getElementsByTagName()? As I've made a script myself that used getElementById() and it worked, then changed it to the former and it failed.the w3schools example:http://w3schools.com/htmldom/tryit.asp?filename=try_nodelistI wanted to see if I could set the title property using a function:

<html><head><script type="text/javascript">function conversions(){ var x = document.getElementById("asap").childNodes[0].nodeValue; document.getElementById("asap").title = x;}</script></head><body>Can I get this <acronym id="asap" onmouseover="conversions()" title="">ASAP</acronym>?</body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

"x.childNodes[1].nodeValue" might be a problem, because of the index, but the code you posted works fine for me in Firefox, Explorer, Opera, and Chrome.You must be careful about childNodes, however. The following would create a problem if you tried to set or read the value of childNodes[0]<acronym id="asap" onmouseover="conversions()" title=""></acronym>because this acronym element does not currently HAVE any childNodes. You could go to the trouble of creating a textnode, appending it, and then setting its value - or you could simply set the .innerHTML property.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I realize now that you were more interested in changing the tryit example (correct link here. The technique you tried will not work, because you have misunderstood the nature of indexing, or perhaps the exact nature of document.getElementsByTagName. (It doesn't really matter.) Given this:

x=document.getElementsByTagName("p");document.write("Text of second paragraph: " + x[1].innerHTML);

you can get the same text content with the following:

x[1].childNodes[0].nodeValue

In the tryit example, x is a collection of elements returned by document.getElementsByTagName. A collection does not have childNodes, so x.childNodes[1] does not refer to anything. A collection is like an array, almost, so to get an item, you need to index it like an array: x[0] for the first <p>, x[1] for the second, and so on. So far, that gets you a reference to a complete <p> element. x[1].childNodes[0].nodeValue returns the content of x[1]'s first childnode.

Link to comment
Share on other sites
retro-starr Newbie

retro-starr

Posted
  • Author
Posted

Awesome! Once I saw your example, I instantly knew what you were explaining lol. Thanks Pops ;].I made some changes to the script I posted last time, but the title still isn't being set:

<html><head><script type="text/javascript">function conversions(){ var x = document.getElementsByTagName("acronym"); x.title = x[0].childNodes[0].nodeValue;}</script></head><body>Can I get this <acronym onmouseover="conversions()" title="">ASAP</acronym>?</body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Almost got it. Try it this way:

x[0].title = x[0].childNodes[0].nodeValue;

Keep in mind that this stuff only works if you can be 100% certain that x[0] exists and that x[0].childNodes[0] exists. For now, this is a good learning experience. In practice, you'll want to add some tests, like

if (x[0] && x[0].childNodes) {   x[0].title = x[0].childNodes[0].nodeValue;}

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted
Pop's eh? The young guns are picking this place up quicker and quicker these days, :)
That, or we are getting older quicker and quicker :) .
Link to comment
Share on other sites
retro-starr Newbie

retro-starr

Posted
  • Author
Posted

Dang! I remembered it on the right, but like in math "what you do to one side, you must do to the other" lol. How do I work setAttribute() into the script? I know x.title works, but there has to be a reason for setAttribute()! The next stop is to convert conversion() into a switch-case statement; I want to a cookbook that when you hover over the measurements, it gives you alternative measurements.All the people I know that program are "older" and a lot of the younger kids just youbook and myface lol.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

setAttribute I believe was added to the set of DOM methods to be consistent with XML DOM methods. In most cases, a simple assignment such as you've been making works just fine. setAttribute is fine also.A nice thing about using getAttribute is that it doesn't throw an error if the attribute doesn't exist.getAttribute can also be used to access non-standard attributes that you can "unofficially" add to an HTML tag. I'm not sure I recommend the practice, though.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
That, or we are getting older quicker and equicker :) .
nice
I had hoped it was a reference to the "Dad" part of my handle. :)
oh yeah, that too :)
Link to comment
Share on other sites
retro-starr Newbie

retro-starr

Posted
  • Author
Posted

This is how I figured the setAttribute() would look, but they don't works:

x[0].setAttribute('title="x[0].childNodes[0].nodeValue"');x[0].setAttribute('title') = x[0].childNodes[0].nodeValue;x[0].childNodes[0].nodeValue = x[0].setAttribute('title');

Would it be best practices to use setAttribute() instead of the way we did it?The "Pops" was just because it said "Dad" lol.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

You may want to look at setAttribute()'s description to see how it really shold work... you need to give the name as the first argument and the value as the second argument.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Quotes are only for literal strings. You want the nodeValue itself, not a string that says "...nodeValue". Remove the quotes around the value argument.The XML DOM defines functions and properties which are available for all XML based languages, among which is XHTML. HTML is "artificially" made to be compatible as well (or you could say XHTML was artificially made to be compatible with HTML which included porting of the XML stuff... doesn't really matter how you look at it).

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

"left'em"? I meant

x[0].setAttributes("title", x[0].childNodes[0].nodeValue);

The reason they haven't done this yet is mostly because DOM when used in HTML and in XML will require different examples.

Link to comment
Share on other sites
retro-starr Newbie

retro-starr

Posted
  • Author
Posted
"left'em"? I meant
x[0].setAttributes("title", x[0].childNodes[0].nodeValue);

The reason they haven't done this yet is mostly because DOM when used in HTML and in XML will require different examples.

Lol I ment that I took them'em off! I got the wording the wrong way around =). Could this be an example of different examples?HA! I figured it out...I did "setAttributes()" instead of "setAttribute()". Funny thing is that this only happened after I started to play around with it. Thank you everybody!
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

That's the attitude, though. Gotta like to "play around" with this stuff, or you'll never get anywhere.We get people who drop off a question on Monday, and pick up an answer on Tuesday. It's not quite right, or they don't implement it right, so they ask a new question on Wednesday.I'm thinking, "How did you spend your time the other 23 hours and 45 minutes?"Play around. Love it. Love the challenge when it's broken, and the "Gotcha!" when it's fixed.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...