Dom

425 views

Published on

Dom

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
425
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dom

  1. 1. RaziKallayi RaziKallayi@gmail.com www.facebook.com/RaziKallayi twitter.com/RaziKallayi in.linkedin.com/in/RaziKallayi 9746730324 DOM STRUCTURE
  2. 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. 3. Document Object Model (DOM) • A W3C (World Wide Web Consortium) standard. • Defines a standard for accessing documents. • Platform and interface 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
  4. 4. What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: •The HTML elements as objects •The properties of all HTML elements •The methods to access all HTML elements •The events for all HTML elements The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
  5. 5. • DOM views HTML documents as a tree structure of elements and text embedded within other elements. • All browsers are following DOM and because of this the JavaScript code will work on all the browsers in the same way.
  6. 6. HTML DOM TREE STRUCTURE
  7. 7. HIERARCHY OF OBJECTS
  8. 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 each 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. 9. EXAMPLE <html> <body> <h1> WELCOME TO BAABTRA </h1> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Come, Let us code!"; </script> </body> </html> getElementById: method  access element using its id innerHTML: property  to get the content of an element
  10. 10. The HTML DOM Document • The document object represents your web page. • The document object is the owner of all other objects of web page. • To access objects in an HTML page, we always start with accessing the document object.
  11. 11. LOCATE AN HTML ELEMENT Method Description document.getElementById() Find an element by element id document.getElementsByTagName() Find elements by tag name document.getElementsByClassName() Find elements by class name
  12. 12. CHANGE AN ELEMENT Method Description element.innerHTML= Change the inner HTML of an element element.attribute= Change the attribute of an HTML element element.setAttribute(attribute,v alue) Change the attribute of an HTML element element.style.property= Change the style of an HTML element
  13. 13. ADD AND DELETE ELEMENTS Method Description document.createElement() Create an HTML element document.removeChild() Remove an HTML element document.appendChild() Add an HTML element document.replaceChild() Replace an HTML element document.write(text) Write into the HTML output stream
  14. 14. ADD EVENT HANDLERS Method Description document.getElementById(id).o nclick=function(){code} Adding event handler code to an onclick event
  15. 15. 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.
  16. 16. thank you
  17. 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. 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 Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
  19. 19. 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 Contact Us

×