Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .
Document Object Model (DOM)
• The Document Object Model (DOM) is a programming API for
HTML and XML documents.
• Defines the logical structure of documents and the way a
document is accessed and manipulated.
• An interface to allow programs and scripts to update content,
structure, and style of documents dynamically.
• It is something like the glue that binds them together.
• DOM components are accessible as objects or
collections of objects.
• In HTML DOM
o The entire document is a document node.
o Every HTML element is an element node.
o The Every HTML attribute is an attribute node
o text inside HTML elements are text nodes.
o Comments are comment nodes.
• DOM components form a tree of nodes called Node
• nodes in the node tree have a hierarchical relationship to
i.e, Parent node, child node and siblings
Fig : HTML DOM tree
Fig : image illustrates a part of the node tree and the relationship between the nodes.
• All HTML elements are defined as objects.
• the programming interface is the object methods and object
• A method is an action you can do.
• A property is a value that you can get or set.
getElementById(id) get the node (element) with a
appendChild(node) insert a new child node (element)
removeChild(node) remove a child node (element)
•HTML DOM methods:
•HTML DOM properties:
innerHTML the text value of a node (element)
parentNode the parent node of a node
childNodes the child nodes of a node (element)
attributes the attributes nodes of a node
Accessing Nodes by id
• Access to elements by their id
• returns the element with id <id>
– id attribute can be defined in each start tag.
Other Access Methods
• Access by elements' tag
– there are typically several elements with the same tag
• var li = document.getElementsByTagName(“li");
//to get first li of ul.
• Access by elements' name attribute
– several elements can have the same name
• returns the collection of elements with name <name>
Traversing DOM tree
• Traversal through node properties
– childNodes property
• the value is a collection of nodes
– has a length attribute
– an item can be reached by its index
• e.g. var body = html.childNodes;
– firstChild, lastChild properties
– nextSibling, previousSibling properties
– parentNode property
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Ph: + 91 – 495 40 25 550
Start up Village