[go: up one dir, main page]
Scribd
Upload
60 views29 pages

L3 DOMTree

The document discusses the DOM (Document Object Model) tree structure. It states that in the HTML DOM, everything is a node - the document itself is a document node, all HTML elements are element nodes, attributes are attribute nodes, text inside elements are text nodes, and comments are comment nodes. It describes the relationships between parent, child, and sibling nodes. It also provides examples of how to access and manipulate DOM nodes using JavaScript.

Uploaded by

Leon Yap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
60 views29 pages

L3 DOMTree

The document discusses the DOM (Document Object Model) tree structure. It states that in the HTML DOM, everything is a node - the document itself is a document node, all HTML elements are element nodes, attributes are attribute nodes, text inside elements are text nodes, and comments are comment nodes. It describes the relationships between parent, child, and sibling nodes. It also provides examples of how to access and manipulate DOM nodes using JavaScript.

Uploaded by

Leon Yap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

1 The DOM tree

Introduction
2

 In the HTML DOM (Document Object Model),


everything is a node:
 The document itself is a document node
 All HTML elements are element nodes
 All HTML attributes are attribute nodes
 Text inside HTML elements are text nodes
 Comments are comment nodes
 DOM is HTML viewed as a node tree.
NODE PARENTS, CHILDREN, AND SIBLINGS

 In a node tree, the top node


is called the root
 Every node has exactly one
parent, except the root
(which has no parent)
 A node can have any
number of children
 Siblings are nodes with the
same parent
Introduction
5

 The HTML DOM is a standard object model


and programming interface for HTML.
 It defines:
 The HTML elements as objects
 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements

 In other words: The HTML DOM is a standard for


how to get, change, add, or delete HTML
elements.
Introduction
6

 The HTML DOM can be accessed with JavaScript


(and with other programming languages).
 DOM gives you access to all the elements on a web
page.
 Using Javascript, you can create, modify and remove
elements in the page dynamically.
The DOM tree
7

CS380
Types of DOM nodes
8

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

 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
Types of DOM nodes
9

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

 In the DOM, all HTML elements are defined


as objects.
 The programming interface is the properties and
methods of each object.
 A property is a value that you can get or set (like
changing the content of an HTML element).
 A method is an action you can do (like add or
deleting an HTML element).

CS380
Javascript for HTML DOM
11

 With the object model, JavaScript gets all the power it needs
to create dynamic HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

 Refer to https://www.w3schools.com/js/js_htmldom.asp
Example
12

 The following example changes the content (the


innerHTML) of the <p> element with id="demo":

 <html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

 getElementById is a method, while innerHTML is a property


DOM - Method
13

 The most common way to access an HTML


element is to use the id of the element.
 In the example above the getElementById method
used id="demo" to find the element.
DOM – Property
15

 The easiest way to get the content of an element is


by using the innerHTML property.
 The innerHTML property is useful for getting or
replacing the content of HTML elements.
 The innerHTML property can be used to get or
change any HTML element, including <html> and
<body>.

CS380
Traversing the DOM tree
16

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

<p id="foo">This is a paragraph of text with a


<a href="/path/to/another/page.html">link</a>.</p>
HTML
Elements vs text nodes
18

<div>
<p>
This is a paragraph of text with a
<a href="page.html">link</a>.
</p>
</div> HTML
 Q: How many children does the div above have?
 A: 3
 an element node representing the <p>
 two text nodes representing "\n\t" (before/after the
paragraph)
 Q: How many children does the paragraph have?
The a tag?
Prototype's DOM tree traversal
19
methods
method(s) description
ancestors, up elements above this one
childElements, descendants, elements below this one (not
down text nodes)
siblings, next, nextSiblings,
elements with same parent
previous, previousSiblings,
as this one (not text nodes)
adjacent
DOM tree traversal methods
20
Selecting groups of DOM objects
21

 methods in document and other DOM objects for


accessing descendants:

name description
returns array of descendents
getElementsByTagName with the given tag, such as
"div"
returns array of descendants
with the given name attribute
getElementsByName
(mostly useful for accessing
form controls)
Getting all elements of a certain
22
type
var allParas = document.getElementsByTagName("p");
for (var i = 0; i < allParas.length; i++) {
allParas[i].style.backgroundColor = "yellow";
} JS

<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body> HTML
Combining with getElementById
23

var addrParas = $("address").getElementsByTagName("p");


for (var i = 0; i < addrParas.length; i++) {
addrParas[i].style.backgroundColor = "yellow";
} JS

<p>This won't be returned!</p>


<div id="address">
<p>1234 Street</p>
<p>Atlanta, GA</p>
</div> HTML

$ = document.select; it returns an array instead of a


single DOM object
Creating new nodes
24

name description
creates and returns a new empty
document.createElement("tag") DOM node representing an element
of that type
creates and returns a text node
document.createTextNode("text")
containing given text

// create a new <h2> node


var newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";
JS
 merely creating a node does not add it to the page
 you must add the new node as a child of an existing
element on the page...
Modifying the DOM tree
25

name description
places given node at end of this
appendChild(node)
node's child list
places the given new node in this
insertBefore(new, old)
node's child list just before old child
removes given node from this node's
removeChild(node)
child list
replaceChild(new, old) replaces given child with new node

var p = document.createElement("p");
p.innerHTML = "A paragraph!";
$("main").appendChild(p);
JS
Removing a node from the page
26

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
Problems with reading/changing
27
styles
window.onload = function() {
$("clickme").onclick = biggerFont;
};
function biggerFont() {
var size = parseInt($("clickme").style.fontSize);
size += 4;
$("clickMe").style.fontSize = size + "pt";
} JS

 style property lets you set any CSS style for an


element
 problem: you cannot (usually) read existing styles
with it
Accessing styles in Prototype
28

function biggerFont() {
// turn text yellow and make it bigger
var size = parseInt($("clickme").getStyle("font-
size"));
$("clickme").style.fontSize = (size + 4) + "pt";
} JS

 getStyle function added to DOM object allows


accessing existing styles
 addClassName, removeClassName, hasClassName
manipulate CSS classes
Setting CSS classes in Prototype
29

function highlightField() {
// turn text yellow and make it bigger
if (!$("text").hasClassName("invalid")) {
$("text").addClassName("highlight");
}
}
JS

 addClassName, removeClassName, hasClassName


manipulate CSS classes
 similar to existing className DOM property, but
don't have to manually split by spaces

You might also like