Javscript Features - the DOM
Modifying the DOM
The DOM model consists of a hierarchy of nodes, as well as being able to identify a particular node by name or id, Javascript can navigate the hierarchy in terms of parent and child nodes. The following diagram illustrates the relationships for the HTML fragment
<p class=insert id=para1 onclick="modifylast('para1')">
Here is
<i>
some text to
</i>
be clicked on
</p>
Note that there are nodes corresponding to both the HTML elements and the text elements. The following relationships are defined.
| Node 1 | is the parent of nodes 2,3 & 4 |
| Nodes 2,3 & 4 | are children of node 1 |
| Node 2 | is the first child of node 1 |
| Node 4 | is the last child of node 1 |
| Node 3 | is the next sibling of node 2 |
| Node 3 | is the previous sibling of node 4 |
| Node 5 | is not a child of node 1 |
Nodes 2,4 & 5 are text nodes.
There are a number of properties associated with a DOM node
| property | description |
|---|---|
| nodeName | name of the node |
| nodeValue | value of node (only applicable to text nodes) |
| nodeType | type of node - see below |
| parentNode | parent, if one exists |
| childNodes | list (array) of child nodes |
| firstChild | first child |
| lastChild | last child |
| previousSibling | previous sibling |
| nextSibling | next sibling |
| attributes | list of attributes of an element |
| ownerDocument | document containing the element |
and the node types
| number | description |
|---|---|
| 1 | an HTML element |
| 2 | an element attribute |
| 3 | text |
| 8 | an HTML comment |
| 9 | a document |
| 10 | a document type definition |
This can be used to dynamically change the text on a page as the following example illustrates.
Here is some text to be clicked on
The HTML was shown earlier. Here's the script.
<script>
<!--
function modifylast(which)
{
curr = document.getElementById(which);
if(curr.lastChild.nodeValue == " show changing text")
{
curr.lastChild.nodeValue = " be clicked on";
}
else
{
curr.lastChild.nodeValue = " show changing text";
}
}
-->
</script>
Notice that the function modifylast has a parameter (which). The function uses the method getElementById() to get the node in question and assign it to curr. The node in question corresponds to the <p> tag in the HTML. The Javascript expression curr.lastChild.nodeValue is simply the text associated with the last child.
Note. The identification of a particular node by searching for an HTML element with a specific id is a bit clumsy. In practice a Javascript programmer would be more likely to invoke the function with the parameter this which is a special keyword that refers to the current node. In this example the function code would then be changed so that the formal parameter was curr and the line including the getElementByID() method invocation would be omitted.
getElementById() is one of several document methods that provide access to the nodes of the DOM including the ability to insert new nodes. The following are useful.| method | description |
|---|---|
| appendChild() | append a node to node's list of child nodes. |
| createElement | create new HTML element, but doesn't "attach" it to the DOM hierarchy. |
| createTextNode() | create new text node, but doesn't "attach" it to the DOM hierarchy. |
| geElementById() | get a node from the hierarchy |
| insertBefore(child1,child2) | inserts the node child1 as a new child node before node child2 |
| removeChild() | remove child node |
| replaceChild(child1,child2) | replace node child2 by node child1 |
Kaynak www.scit.wlv.ac.uk/~jphb/javascript/dom2.html