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/
