Scripting For The 6.0 Browsers
Revised January 27, 2002 | Printer-friendly version
Last Lesson | Next Lesson | Top
Part 4: Follow Your Nodes
Are we all together so far? Well, there's lots more. The DOM provides a slew of methods and properties that every node has. Most of them have to do with manipulating child or parent nodes. Let's look.
(UPDATE 11.17.00: The final release of Netscape 6 contains a bug that may cause the browser to crash when removeChild or replaceChild is used, so proceed with caution. Look for a patch to be implemented in the next upgrade.)
Node Methods
appendChild(child) You've seen this in action already. This allows you to attach a new node to an existing one.
replaceChild(new,old) lets you remove a node and replace it with another node. new references the new node, old is a reference of the node you want to replace.
newRow = document.createElement("TR")
tableBody = document.getElementById("myTableBody")
oldRow = document.getElementsByTagName("TR").item(0)
tableBody.replaceChild(newRow,oldRow)
removeChild(child) will remove the child node from the document. child is a reference to the node you want removed. The following example removes a row from a table element.
tableBody = document.getElementById("myTableBody")
childOne = document.getElementsByTagName("TR").item(0)
tableBody.removeChild(childOne)
Note that removing an element also removes its children.
insertBefore(new,ref) allows you to insert a new node just before another. new is a reference to the new node you want to insert. ref is a reference to the node you want new inserted before.
newRow = document.createElement("TR")
tableBody = document.getElementById("myTableBody")
allRows = tableBody.getElementsByTagName("TR")
lastRow = allRows.item(allRows.length-1)
tableBody.insertBefore(newRow,lastRow)
hasChildNodes() will return a Boolean true if a node has children.
Note that appendChild(), replaceChild(), removeChild() and insertBefore() only accept element references, not element IDs, as their arguments. For example, if we wanted to remove a tag with the ID value "myTag" the following syntax would be incorrect:
removeChild("myTag")
A correct way would be:
removeChild(document.getElementById("myTag"))
Node Properties
In addition to these methods, nodes also have the following properties:
nodeName simply returns the name of the HTML tag as a string. This is not the same as the NAME attribute of the tag, but a string representing the tag type. For example, the nodeName of a table cell tag will return the string "TD". This is useful for testing if a tag is of a particular type:
x = document.getElementById("myElement")
if (x.nodeName == "IMG") alert("myElement is an image tag")
nodeType returns an integer representing the type of node an element is (NOT the type of tag) The ones you'll probably use most are element (1) , attribute (2), and text (3). This is useful for testing if a node is of a particular type:
x = document.getElementById("myElement")
if (x.nodeType == 1) {alert("myElement is an element node")}
else if (x.nodeType == 2) {alert("myElement is an attribute node")}
else if (x.nodeType == 3) {alert("myElement is a text node")}
nodeValue reflects the value of a given node. This is usually used to retrieve and change a node's content or value. To retrieve the value of the fifth node in our element:
a = document.getElementById("myElement")
b = a.childNodes.item(4).nodeValue
For attribute nodes, nodeValue returns the value of the attribute. For text nodes, nodeValue returns the text as a string.
parentNode is a reference to the parent node of the node in question. It's useful for when you're not sure where or what the parent node of another node is:
x = document.getElementById("myElement")
xParent = x.parentNode
childNodes is a collection of all the child nodes of a particular node. You can use this to find the number of children a node has, or access any of its children via the ordinal index.
For example, to find out the number of child nodes an element has, you could do this:
a = document.getElementById("myElement")
b = a.childNodes.length
To access the third child node of the element:
a = document.getElementById("myElement")
b = a.childNodes.item(2)
firstChild and lastChild point directly to the first and last nodes in the childNodes collection. It's just a convenient way of accessing the first and last child nodes.
a = document.getElementById("myElement")
firstNodeOfa = a.firstChild
lastNodeOfa = a.lastChild