INTRODUCTION TO DOM AND DOM TREE

Types of DOM nodes
 element nodes (HTML tag)
 can have children and/or attributes
 text nodes (text in a block element)
 attribute nodes (attribute/value pair)
 text/attributes are children in an element node
 cannot have children or attributes
 not usually shown when drawing the DOM tree
3

This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
 HTML

Types of DOM nodes
4

<a href="/path/page.html">link in it</a>.
 HTML

Traversing the DOM tree
name(s) description
firstChild, lastChild
start/end of this node's list of
children
childNodes
array of all this node's
children
nextSibling, previousSibling
neighboring nodes with the
same parent
parentNode
the element that contains this
node
5

DOM tree traversal example
6
This is a paragraph of text with a
<a href="/path/to/another/page.html">link</a>.
HTML

Elements vs text nodes
 Q: How many children does the div above
have?
 A: 3
 an element node representing the 
 two text nodes representing "nt" (before/after the
paragraph)
 Q: How many children does the paragraph
7
<div>

<a href="page.html">link</a>.

</div> HTML

8
Adding Some Text To A Page
There are five steps:
1. Create a new Element
2. Create new Text
3. Append the new Text to the new Element
4. Find an existing Element
5. Append the new Element to the existing
Element

9
1. Create New Element Node
Let us, say create a new tag (element) so
that we can attach some text to it
For convenience, we can put the new object into
a variable
var newNode;
newNode = document.createElement(“p”)

10
2. Create a Text Node
Next, create a text node
Again, for convenience, we can put the new text
node into a variable
var newText;
newText = document.createTextNode(“Some text.”)

11
3. Attach the New Text Node to the
New Element
To put the text into the page, we have to attach
the text node to the new HTML element:
newNode.appendChild(newText);

12
4.Find an Existing Element
The new element with our text node attached to
it is still floating around in a Javascript world.
We need to find an existing element so that we
can attach it
For convenience, we shall put this existing
element into a variable
var docElement;
docElement = document.getElementById(“thisLocation”);

13
5. Append the New Element to the
Existing Element
To insert our text into the page, we now have to
append the new element to the existing
element
docElement.appendChild(newNode);

14
Putting the 5 Steps Together
<head>
<script language="javascript" type="text/javascript">
var myText;
myText = "This is new text to be added to the page dynamically.";
function addText(location) {
var newNode;
var newText;
var docElement;
newNode = document.createElement("p");
newText = document.createTextNode(myText);
newNode.appendChild(newText);
docElement = document.getElementById(location);
docElement.appendChild(newNode);
}</script>
</head>
<body>
<a href="#" onclick="addText('thisLocation');">Click to add new text to the page</a>
New text will appear below here
Some further text in the page
</body>

15
Attribute Nodes
 We can get at the attributes of an element
through attribute nodes
 Attribute nodes, like text nodes are always
contained in element nodes
 We shall look at methods:
 getAttribute()
 setAttribute()

16
Getting Attribute Nodes
 Hands On
 Create a file JavascriptDOM.html
 Add this code to alert the attribute of an element:
function dispAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
messg = attribs[i].getAttribute("className");
alert(messg);
}
}
 Add this to the bottom of the body:
Click here to see class attributes
 Try this in Firefox
 Point to consider: why is this attribute called ‘className’?

17
Setting Attribute Nodes
 Hands On
 Create the file JavascriptDOM.html
 Add this code to change the attribute of an element:
function chngAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
attribs[i].setAttribute("className","jazz");
}
}
 Add this to the bottom of the body:
Click here to change class
attributes

18
User inserts and removes text
 Hands On
 Crate file JavascriptDOM.html
 Place code in this page so that:
 When the user mouseovers on an image, the
relevant text appears
 When the user mouseouts on an image, the text
disappears

Removing a node from the
page19
function slideClick() {
var bullets = document.getElementsByTagName("li");
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].innerHTML.indexOf("children")
>= 0) {
bullets[i].remove();
}
}
} JS
 each DOM object has a removeChild method
to remove its children from the page
 Prototype adds a remove method for a node to
remove itself

INTRODUCTION TO DOM AND DOM TREE

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie INTRODUCTION TO DOM AND DOM TREE

Ähnlich wie INTRODUCTION TO DOM AND DOM TREE (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

INTRODUCTION TO DOM AND DOM TREE