Dom structure
Download as PPTX, PDF0 likes277 views
This document discusses the DOM (Document Object Model) and provides an overview of its structure and usage. It defines the DOM as an interface for interacting with and manipulating the structure and content of a webpage dynamically. It then provides details on DOM history, DOM nodes and the tree structure, properties and methods. It gives examples of using DOM methods like getElementById to access and modify elements. It concludes by providing contact information for the Baabtra mentoring program.
Dom structure
- 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
- 3. WELCOME
- 5. Contents • What is DOM? • DOM history • DOM nodes • Example.
- 6. 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.
- 9. DOM history • DOM Level 1-1998 • DOM Level 2-2000 • DOM Level 3-2004 • DOM Level 3(under process).
- 10. 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
- 11. 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!"
- 12. 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>
- 13. 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.
- 14. HTML DOM Methods Methods Of node Interface: • getElementByID(id) • getElementsByTagName(name)
- 15. HTML DOM Methods Methods Of Document Interface: • createElement(tagName) : • createTextNode(text) : • createAttribute(attributeName) :
- 16. Javascript program to validate a registration form CODE
- 17. 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 @ baabtra.com 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.
- 18. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra 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 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com