Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dom structures


Published on

Dom structure

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dom structures

  1. 1. 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
  3. 3. Nithil.pp nithil padinare peediyekal 9995223505 DOM STRUCTURE
  4. 4. 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.
  5. 5. 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.
  6. 6. • 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.
  7. 7. Fig : image illustrates a part of the node tree and the relationship between the nodes.
  8. 8. 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.
  9. 9. 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)
  10. 10. 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.
  11. 11. 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>
  12. 12. 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
  13. 13. Document Object Model <TABLE> <ROWS> <TR> <TD>hi</TD> <TD>there</TD> </TR> <TR> <TD>hello</TD> <TD>world</TD> </TR> </ROWS> </TABLE>
  14. 14. Eg :JavaScript program to add two numbers.( Numbers are input using textbox ) <html> <head> <script language="javascript"> function calculateNumbers() { var FirstNumber = document.getElementById("txtFirst").value; FirstNumber = Number(FirstNumber); var SecondNumber = document.getElementById("txtSecond").value; SecondNumber = Number(SecondNumber); var Total = (FirstNumber+SecondNumber); document.frmCalculate.txtTotal.value = Total; } </script> </head> <body> <form name="frmCalculate"> <input type="text" size="2" id="txtFirst" maxlength="2">+</input> <input type="text" size="2" id="txtSecond" maxlength="2">=</input> <input type="text" size="2" name="txtTotal" ></input><br> <input type="button" value="Add" name="buttonCalculate" onClick="calculateNumbers()"></input> <input type="reset" value="Reset" name="buttonReset"></input> </form> </body> </html>
  15. 15. Thank you…
  16. 16. If this presentation helped you, please visit our page and like it. Thanks in advance. | |
  17. 17. 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: