Dom structure
-
Upload
baabtracom-first-coding-school-in-india -
Category
Technology
-
view
307 -
download
0
Transcript of Dom structure
![Page 1: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/1.jpg)
![Page 2: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/2.jpg)
Dom Structure
Arun .R. [email protected]/
arunrmenontwitter.com/iamarunmenonin.linkedin.com/in/
mearunmenon+919846629020
![Page 3: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/3.jpg)
Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
![Page 4: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/4.jpg)
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
![Page 5: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/5.jpg)
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.
![Page 6: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/6.jpg)
HTML DOM TREE STRUCTURE
![Page 7: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/7.jpg)
HIERARCHY OF OBJECTS
![Page 8: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/8.jpg)
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.
![Page 9: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/9.jpg)
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 idinnerHTML: property to get the content of an element
![Page 10: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/10.jpg)
METHODS USED TO FIND AN ELEMENT
• document.getElementById()
• document.getElementByTagName()
• document.getElementByClassName()
![Page 11: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/11.jpg)
METHODS USED FOR CHANGING AN ELEMENT
• Element.innerHTML=
• Element.attribute=
• Element.setAttribute(attribute.value)
• Element.style.property=
![Page 12: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/12.jpg)
METHODS FORADDING AND DELETING ELEMENTS
• document.createElement()• document.removeChild()• document.removeChild()• document.appendChild()• document.replaceChild()• document.write(text)
![Page 13: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/13.jpg)
METHOD FOR ADDING EVENT HANDLERS
document.getElementById(id).onclick=function(){code}
![Page 14: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/14.jpg)
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.
![Page 15: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/15.jpg)
THANK YOU...
![Page 16: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/16.jpg)
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.
![Page 17: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/17.jpg)
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
![Page 18: Dom structure](https://reader036.fdocuments.in/reader036/viewer/2022062319/555c3f51d8b42a0b038b4d29/html5/thumbnails/18.jpg)
Contact Us
Emarald Mall (Big Bazar Building)Mavoor Road, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
Cafit Square,Hilite Business Park,Near Pantheerankavu,Kozhikode
Start up VillageEranakulam,Kerala, India.
Email: [email protected]