Write to UsJavascript DOM and Nodes (Part 3)
As you can see, clicking the button not only changes one node but four of them. The script below tells you how you can do something like that,
<script type="text/javascript">
function Change_Title_2()
{
document.getElementById('multiple_titles').getElementsByTagName('h3')[0]._
firstChild.nodeValue = "XML Programming Made Easy";
document.getElementById('multiple_titles').getElementsByTagName('p')[0]._
firstChild.nodeValue = "The Purpose of this course is making XML understandable to anyone familiar with Javascript";
document.getElementById('multiple_titles').getElementsByTagName('h3')[2]._
firstChild.nodeValue = "Nodes, Javascript and XML";
document.getElementById('multiple_titles').getElementsByTagName('p')[1]._
firstChild.nodeValue = "XML is easy to learn, provided you are familar with HTML.";
}
</script>
<p><button onClick="Change_Title_2()">Change Content</button></p><br />
There are many ways of manipulating nodes. The Level 2 W3C DOM has several Node Object Properties you can use to manipulate nodes. The table below shows the ones that are compatible with most browsers.
Property |
Value |
Description |
nodeName |
String |
Already used in this tutorial, this property returns the name of the node. EM if the node is <EM>, B if the node iss <B>, and #text, if your script got access to the text inside the node. |
nodeValue |
String |
Also used in this tutorial, this property will return the value of the node in the form of a string. If you want to change the value inside a node, this one is very useful. |
nodeType |
Integer |
Notice that the value nodeType returns is an integer and not a string. nodeType is similar to nodeName, but instead of returning #text, it will return an integer of 3. Instead of giving you the name of a node, it'll give you a 1. |
childNodes |
Array |
By now, you should understand this one. It is used to get access to the nodes inside a parent node. childNodes[0], for example, will access the first node inside <p>. |
firstChild |
Object |
Similar to childNodes[0], but it will only access the first value inside a node. |
lastChild |
Object |
This one will get access to the last node inside a node. |
previousSibling |
Object |
Self-explanatory. |
nextSibling |
Object |
Useful if you want to get access to one node right after another. |
The purpose of this tutorial was helping Javascript programmers understand the concept of Nodes. Needless to say that learning everything there is about Nodes and the W3C DOM will require more than one tutorial. However you now have a good idea of how to deal with nodes, which are very useful when it comes to dealing with XML documents and becoming proficient in DHTML programming.