Scribd
Upload
65 views33 pages

wt2021 Handout w05 DOM

The document discusses the Document Object Model (DOM), which defines HTML and XML documents as objects that can be manipulated programmatically. It describes the DOM as a tree structure containing nodes that represent elements, attributes, and text. The DOM represents the document as objects that can be accessed and manipulated with JavaScript to dynamically update content. Browsers construct a DOM representation of a document when loading it, allowing scripts to modify structure, style, and content by directly accessing and changing the DOM tree.

Uploaded by

Mobewtime Styles
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views33 pages

wt2021 Handout w05 DOM

The document discusses the Document Object Model (DOM), which defines HTML and XML documents as objects that can be manipulated programmatically. It describes the DOM as a tree structure containing nodes that represent elements, attributes, and text. The DOM represents the document as objects that can be accessed and manipulated with JavaScript to dynamically update content. Browsers construct a DOM representation of a document when loading it, allowing scripts to modify structure, style, and content by directly accessing and changing the DOM tree.

Uploaded by

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

Document Object Model

Web Technology : 2021


Asst. Prof. Manop Phankokkruad, Ph.D.
Faculty of Information Technology
King Mongkut’s Institute of Technology Ladkrabang
Outline

1. What is the Document Object Model ?


MP.WEBTECH.IT.KMITL

2. HTML DOM
3. DOM Programming Interface
What is the DOM?

Document Object Model (DOM) is a cross-platform 1


MP.WEBTECH.IT.KMITL

and language-neutral interface that treats a document


as a tree structure wherein each node is an object
representing a part of the document. The DOM
represents a document with a logical tree. The DOM is
a W3C standard. The W3C DOM standard is separated
into 3 different parts:
▪ Core DOM - standard model for all document types.
▪ XML DOM - standard model for XML
▪ HTML DOM - standard model for HTML
DOM hierarchy

DOM defines the logical structure of documents and


MP.WEBTECH.IT.KMITL

the way a document is accessed and manipulated.


Window

frame event history document location navigator screen

anchor form image link style tag

button checkbox input radio reset submit textarea


What is the DOM?

DOM gives we access to all the elements on a web


MP.WEBTECH.IT.KMITL

page. Using JavaScript, we can create, modify and


remove elements in the page dynamically. With the
DOM,
▪ Elements can be treated as objects
▪ Many attributes of elements can be treated as
properties of those objects.
▪ Then, objects can be scripted (through their id
attributes) with JavaScript to achieve dynamic
effects.
What is the DOM?

The web browser builds a model of the web page (the


MP.WEBTECH.IT.KMITL

document) that includes all the objects in the page


(tags, text, etc).
▪ All of the properties, methods, and events available
to the web developer for manipulating and creating
web pages are organized into objects.
▪ Those objects are accessible via scripting
languages in modern web browsers.
DOM Levels
MP.WEBTECH.IT.KMITL

Level 1 Level 2 Level 3


1. Document 1. DOM2 Core 1. DOM3 Core
2. Node 2. Views 2. Load and Save
3. Attribute 3. Events 3. Validation
4. Element 4. Style 4. Events
5. Text 5. Traversal and 5. XPath
interfaces. Range
6. DOM2 HTML.
HTML DOM

The HTML DOM is a standard object model and 2


MP.WEBTECH.IT.KMITL

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
❑ Every element on an HTML page is accessible in
JavaScript through the DOM.
❑ The DOM is the tree of nodes corresponding to
HTML elements on a page.
Browser and DOM

When a browser displays a document, it must


MP.WEBTECH.IT.KMITL

combine the document's content with its style


information. It processes the document in two stages.

Load Parse Create


HTML HTML DOM tree
Attach style to
DOM nodes

Load CSS Parse CSS

1. The browser converts HTML and CSS into the DOM.


2. The browser displays the contents of the DOM.
Browser and DOM

This is what the browser reads


MP.WEBTECH.IT.KMITL

HTML
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.</p>
</body>
</html>

This is what the browser displays


on screen.
Browser and DOM
Document
MP.WEBTECH.IT.KMITL

<html>

<head> <body>

<title>

<h1> <p>
"Sample DOM Document"

"An HTML Document"

"This is a" <i> "document"

"simple"
This is a drawing of the model that the
browser is working with for the page.
Types of DOM nodes

In the HTML DOM, everything is a node. The DOM


MP.WEBTECH.IT.KMITL

represents documents as a hierarchy of Node objects.


The main DOM node types are:
1. Document node
▪ the start of the tree
2. Element Node
▪ contains an HTML tag
▪ can have element, text, and attribute child
nodes.
3. Attribute node
▪ Represents attribute of Element node.
Types of DOM nodes

4. Text Node
MP.WEBTECH.IT.KMITL

▪ contains text / textual content of an element.


▪ cannot have child nodes or attributes.
▪ contained within Element Nodes.
5. Comment
▪ an HTML comment
6. DocumentType
▪ the Doctype declaration
DOM Tree Structure

Document
MP.WEBTECH.IT.KMITL

Root Element:
<html>

Element: Element:
<head> <body>

Element: Element: Element:


<title> <a> <h1>

Text: Attribute: Text: Text:


“My Title" “href” "My link" "My Header"
MP.WEBTECH.IT.KMITL
DOM Tree Structure
Relationship among Nodes
▪ Root node : The topmost node of the tree is the root
MP.WEBTECH.IT.KMITL

node. As it is topmost, so there is no parent of this


root node.
▪ Parent node can have one or more than one child
nodes.
▪ Child node : a node extending from another node.
▪ Leaf : The leaf nodes are the nodes which have no
child node.
▪ Siblings : The nodes which have same parent are
the siblings of each other.
▪ Every node has exactly one parent node (except
root).
DOM Programming Interface

In the HTML DOM, all HTML elements are defined as 3


MP.WEBTECH.IT.KMITL

objects. The HTML DOM can be accessed with


JavaScript and other programming languages.
▪ The programming interface is the properties and
methods of each object.
▪ A property is a value that one can get or set (like
changing the content of an HTML element).
▪ A method is an action one can do (like adding or
deleting an HTML element).
DOM Programming Interface

DOM Element Objects


MP.WEBTECH.IT.KMITL

Properties

Method
Programming Interface

Some commonly used HTML DOM Methods:


MP.WEBTECH.IT.KMITL

▪ getElementById(id) - get the node with a specified


id.
▪ getElementByClassname(classname) - get the
node with a specified classname.
▪ getElementByName(name) - get the node with a
specified name.
▪ getElementByTagName(TagName) - get the node
with a specified Tag name.
▪ appendChild(node) - insert a new child node.
▪ removeChild(node) - remove a child node.
The Node object

Properties:
MP.WEBTECH.IT.KMITL

▪ className - list of CSS classes of element


▪ innerHTML – text content inside element, including
Tags.
▪ parentNode - the parent node of a node
▪ firstChild - first child of node
▪ childNodes - the child nodes of a node
▪ attributes - the attributes nodes of a node
many more, some depending on type of node. These
properties can be accessed and changed using
JavaScript.
Programming Interface

Changing HTML Elements


MP.WEBTECH.IT.KMITL

❑ The easiest way to modify the content of an HTML


element is by using the innerHTML property.
❑ To change the content of an HTML element, use
this syntax:

var header = document.querySelector("h1");


header.innerHTML = "My new heading";
HTML
Programming Interface

Changing HTML Elements


MP.WEBTECH.IT.KMITL

To change change the value of an HTML attribute.

var myLink = document.querySelector("#myLink");


myLink.href = "http://www.newwebsite.com";
HTML
Programming Interface

Changing CSS properties


MP.WEBTECH.IT.KMITL

To change the style of an HTML element, use this


syntax:

var pars = document.querySelectorAll("p.par");


pars[1].style.fontSize = "2em";
JavaScript
Programming Interface

Adding HTML Elements


MP.WEBTECH.IT.KMITL

To add a new element to the HTML DOM, you must


create the element (element node) first, and then
append it to an existing element.
Programming Interface

Adding a new HTML elements


MP.WEBTECH.IT.KMITL

<div id="div1">
HTML
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p>This is new.</p>
</div>
JavaScript
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
Programming Interface

Adding a new HTML elements


MP.WEBTECH.IT.KMITL

To use the insertBefore() method:


Programming Interface

Adding HTML Elements


MP.WEBTECH.IT.KMITL

<div id="div1">
HTML
<p>This is new.</p>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

var para = document.createElement("p"); JavaScript


var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
Programming Interface

Removing an Existing HTML elements


MP.WEBTECH.IT.KMITL

▪ To remove an HTML element, you must know the


parent of the element
▪ Then you can use this syntax to remove the
element you want:
Programming Interface

Removing Existing HTML Elements


MP.WEBTECH.IT.KMITL

HTML
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

JavaScript
var parent = document.getElementById("div1");
var child = document. getElementById ("p1");
parent.removeChild(child);
Programming Interface

Replacing HTML Elements


MP.WEBTECH.IT.KMITL

❑ To replace an element, use the replaceChild()


method:
Programming Interface

Removing Existing HTML Elements


MP.WEBTECH.IT.KMITL

HTML
<div id="div1">
<p id="p1">First paragraph</p>
<p id="p2">Second Paragraph</p>
</div>

JavaScript
var newPar = document.createElement("p");
var node = document.createTextNode("This is new.");
newPar.appendChild(node);
var parent = document. getElementById("div1");
var oldPar = document. getElementById("p1");
parent.replaceChild(newPar, oldPar);
Programming Interface

Getting the parent


MP.WEBTECH.IT.KMITL

Every element has just one parent. To get it, you can
use Node.parentNode or Node.parentElement.
❑ parentNode returns the parent of the specified
node in the DOM tree.
❑ parentElement returns the DOM node’s parent
Element, or null if the node either has no parent, or
its parent isn’t a DOM Element.
More Information

❑ JavaScript Tutorial
MP.WEBTECH.IT.KMITL

https://www.w3schools.com/js/default.asp
❑ XML DOM Tutorial
https://www.w3schools.com/xml/dom_intro.asp

❑ XML DOM Tutorial


https://www.tutorialspoint.com/dom/

You might also like