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
some text to
be clicked on

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.

function modifylast(which)
curr = document.getElementById(which);
if(curr.lastChild.nodeValue == " show changing text")
curr.lastChild.nodeValue = " be clicked on";
curr.lastChild.nodeValue = " show changing text";

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
Yorumunuzu Ekleyin