Write to UsJavascript DOM and Nodes (Part 2)
Weird, isn't it? It gets better. Run the same script again, but make a small change. Instead of document.getElementById('first paragraph').childNodes[i].nodeValue, use document.getElementById('first paragraph').childNodes[i].nodeName. What you'll get will be the name of all tags inside <p id=" first paragraph". Like this,
A few years ago, his first novel was published under a pen-name. Unfortunately 5000 copies were sold the first year.
Now you can see that EM, which contains the word Unfortunately, is in ChildNode[1].
Since Unfortunately is the only childNode of <em>, there are three ways of getting access to it:
document.getElementById('first paragraph').childNodes[1].childNodes[0].nodeValue
document.getElementById('first paragraph').childNodes[1].firstChild.nodeValue
document.getElementById('first paragraph').childNodes[1].LastChild.nodeValue
Take a look at the script below:
<script language="javascript1.2" type="text/javascript">
function Change_Paragraph()
{
document.getElementById('paragraph_2').childNodes[1].firstChild.nodeValue = "Fortunately";
document.getElementById('paragraph_2').childNodes[3].childNodes[0]._
firstChild.nodeValue_= "5,000,000";
}
</script>
<button onClick="Change_Paragraph()">Submit</button>
The output would be:
A few years ago, his first novel was published under a pen-name. Unfortunately 5000 copies were sold the first year.
It was already mentioned that document.getElementsByTagName('tag-name')[indexOfParagraph] can also be used to access and alter nodes, but we have yet to see how it works. Suppose you have the following HTML line:
<h3>Title<h3>
Title is very ambiguous, isn't it? We need something more specific. Something related to what we'll be writing about.
Title
How did we change the title by just clicking a button? The following script did the magic:
<script type="text/javascript">
function Change_Title()
{
document.getElementById('first_title').getElementsByTagName('h3')[0]._
firstChild.nodeValue) = "The Dangers Behind Car Racing";
}
</script>
<br /><p><button onClick="Change_Title()">Change the Title</button></p><br />
Perfect. But what would happen if there were more than one title in the page, and there were also <p> nodes?
The Benefits of XML Programming
When XML was introduced to the world, no one anticipated how useful it'd be.
The Basics
XML is not that difficult to learn. The language is very similar to HTML.
XML and Javascript
With Javascript and XML, you can make your pages more dynamic.
The previos example has three h3 nodes, and three p nodes, and all of them are inside <div id="multiple_titles">.
Press the button below: