Introduction to the DOM

Document Object
Model(DOM)
Tharaa Abu Ashour
tharaa_1993@yahoo.com

Outline:
How Browser Works?
What is the DOM?
What is the Node?
The DOM structure Model.
Example of DOM
How Can Access the Nodes?
Adding Text Node to the Page
Advantages and Disadvantages.

How Browser Works?
Source code (plain text) will be parsed into DOM tree.
With DOM tree will parse the content on the screen accordingly (css,
javascript...)
DOM tree is a data represented in tree structure.
Source
Code
DOM
Parser
DOM
Tree
Render
Engine
Web
Page

What is the DOM?
Document Object Model is a platform and language neutral
interface that allow program and script to dynamically
access and update the content, structure and style of
document.
The DOM is an application programming interface (API) for
HTML and XML documents.
DOM is being developed by W3C, lets the programmer to
access, modify HTML pages and XML docments.

What is the Node?
•DOM is a tree of nodes of various types.
•Nodes
Text Node Attribute Node
Element Node

The DOM Structure Model
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph </p>
<h2>Heading 2</h2>
<p>Heading 1</p>
</body>
</html>
HTML
bodyhead
title
Hello World
H1 P H2 P
Heading 1 Heading 2Paragraph Paragraph
DOM Tree Visualizer: https://gojs.net/latest/samples/DOMTree.html
#document

Child, Sibling, Parent
body
H1 P H2 P
#text #text #text #text
Last child
Firstchild
Firstchild
Firstchild
Firstchild
previousSibling
NextSibling
previousSibling
NextSibling
previousSibling
NextSibling
parentNode
parentNode
parentNode
parentNode

Child, Sibling, Parent
body
H1 P H2 P
#text #text #text #text
So, How can access the text in
Header2?!
Firstchild
nextSibling nextSibling
Firstchild

How can access the nodes?
By their name or Id (it will allow you to work with one element, and it's the
easiest way)
GetElementByName(NodeName)
GetEllemtById(IdName)
By Tag Name (GetElementsByTagName), it will return array of nodes
By their relation to parent, child, sibling
(nextSibling,previousSibling,parentNode,lastchild, firstchild, childNode) , childNode[0] ==
first child

Adding text Node to the Page
Create New Node
-var newNode = document.createElement("p");
Create Text Node
-var textNode = document.createTextNode("hello world");
Link Text Node with New Node
-NewNode.appendChild(textNod);
Link Node to the DOM tree -Document.getElementById("id").appendChild(newNode)

Advantages and Disadvantages of DOM
Advantages:
Robust API for the DOM tree
Easy to modify the data structure and extract data.
Can be written with any language
Disadvantages:
Store the entire document in the memory.
Based on DOM can written with any language, method naming convention don't
follow standard java programming convension

Introduction to the DOM

In this document