Dom structure
•Download as PPTX, PDF•
0 likes•995 views
This document discusses the DOM (Document Object Model) which defines a standard for accessing documents. It provides a platform that allows programs and scripts to dynamically access and update the content, structure, and style of a document. The DOM views HTML documents as a tree structure, allowing JavaScript code to work the same across all browsers. The HTML DOM can be accessed with JavaScript using properties to get/set element values and methods to add/delete elements or change attributes. Examples are provided for common DOM methods.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Dom structure
Similar to Dom structure (20)
More from baabtra.com - No. 1 supplier of quality freshers
More from baabtra.com - No. 1 supplier of quality freshers (20)
Recently uploaded
Recently uploaded (20)
Dom structure
- 2. Dom Structure Arun .R. Menon arunrmenon555@gmail.com www.facebook.com/arunrmenon twitter.com/iamarunmenon in.linkedin.com/in/mearunmenon +919846629020
- 3. 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
- 4. DOM-DOCCUMENT OBJECT MODEL A W3C (World Wide Web Consortium) standard. Defines a standard for accessing documents. Platform that allows programs and scripts to dynamically access and update the content, structure, and style of a document. The W3C DOM standard :3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents
- 5. DOM views HTML documents as a tree structure. All browsers are following DOM and because of this the JavaScript code will work on all the browsers in the same way.
- 6. HTML DOM TREE STRUCTURE
- 8. DOM PROGRAMMING INTERFACE The HTML DOM can be accessed with JavaScript All HTML elements are defined as objects. Programming interface: properties and methods of object. property : value that you can get or set. changing the content of an HTML element method : an action you can do add or deleting an HTML element.
- 9. EXAMPLE <html> <body> <p >WELCOME TO BAABTRA</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html> getElementById: method access element using its id innerHTML: property to get the content of an element
- 10. METHODS USED TO FIND AN ELEMENT • document.getElementById() • document.getElementByTagName() • document.getElementByClassName()
- 11. METHODS USED FOR CHANGING AN ELEMENT • Element.innerHTML= • Element.attribute= • Element.setAttribute(attribute.value) • Element.style.property=
- 12. METHODS FORADDING AND DELETING ELEMENTS • document.createElement() • document.removeChild() • document.removeChild() • document.appendChild() • document.replaceChild() • document.write(text)
- 13. METHOD FOR ADDING EVENT HANDLERS document.getElementById(id).onclick=function(){code}
- 14. Code Output Program to validate customer registration form. If any field left blank corresponding label must be turned red and form should not get submitted.
- 15. THANK YOU...
- 16. 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.
- 17. 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
- 18. 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