DOM Structure & Methods
•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 & Methods
Similar to DOM Structure & Methods (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 & Methods
- 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