Why Teams call analytics are critical to your entire business
Dom structures
1.
2. 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 .
Ltd
6. 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.
• The DOM is not HTML nor is it JavaScript.
• It is something like the glue that binds them together.
7. DOM Objects
• 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.
8. • DOM components form a tree of nodes called Node
Tree
• nodes in the node tree have a hierarchical relationship to
each other.
i.e, Parent node, child node and siblings
Fig : HTML DOM tree
example.
9. Fig : image illustrates a part of the node tree and the relationship between the nodes.
10. Programming Interface
• All HTML elements are defined as objects.
• the programming interface is the object methods and object
properties.
• A method is an action you can do.
• A property is a value that you can get or set.
11. getElementById(id) get the node (element) with a
specified id
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
(element)
childNodes the child nodes of a node (element)
attributes the attributes nodes of a node
(element)
12. Accessing Nodes by id
• Access to elements by their id
– document.getElementById(<id>)
• returns the element with id <id>
– id attribute can be defined in each start tag.
13. Other Access Methods
• Access by elements' tag
– there are typically several elements with the same tag
– document.getElementsByTagName(<tag>)
– e.g.
• var li = document.getElementsByTagName(“li")[0];
//to get first li of ul.
• Access by elements' name attribute
– several elements can have the same name
– document.getElementsByName(<name>)
• returns the collection of elements with name <name>
14. 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[1];
– firstChild, lastChild properties
– nextSibling, previousSibling properties
– parentNode property
18. 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
19. Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com