Dom structure


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dom structure

  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
  2. 2. WELCOME
  3. 3. Midhun sudhakar 9995586182 DOM structure
  4. 4. Contents • What is DOM? • DOM history • DOM nodes • Example.
  5. 5. What is DOM? • Interface used for interacting with structure and content of a page. • Defines the way a doc accessed and manipulated dynamically. • From W3C.
  6. 6. Tree-Structure
  7. 7. DOM history • DOM Level 1-1998 • DOM Level 2-2000 • DOM Level 3-2004 • DOM Level 3(under process).
  8. 8. HTML DOM Node Tree (Document Tree) All the nodes in a node tree have relationships to each other. The tree structure is called a node-tree. Node:- Parents, Children, and Siblings
  9. 9. DOM <html> <head> <title>DOM</title> </head> <body> <h1>I am in DOM world</h1> <p id=“intro”>Hello DOM!</p> </body> </html> • The <html> node, the root node • <body> Is Child of<head> • <p>is the parent "Hello world!"
  10. 10. DOM Properties and Methods • A property is a value that you can get or set • A method is an action you can do ex: <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
  11. 11. Node Property Properties Of node : • nodeName:Returns name of element. • nodeValue:Returns value of element. •nodeType:Returns type of node whether element or document etc.
  12. 12. HTML DOM Methods Methods Of node Interface: • getElementByID(id) • getElementsByTagName(name)
  13. 13. HTML DOM Methods Methods Of Document Interface: • createElement(tagName) : • createTextNode(text) : • createAttribute(attributeName) :
  14. 14. Javascript program to validate a registration form CODE
  15. 15. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  16. 16. Follow us @ Like us @ Subscribe to us @ Become a follower @ Connect to us @ 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 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: