18
| Date post: | 20-May-2015 |
| Category: |
Technology |
| Upload: | baabtracom-first-coding-school-in-india |
| View: | 308 times |
| Download: | 0 times |
Dom Structure
Arun .R. [email protected]/
arunrmenontwitter.com/iamarunmenonin.linkedin.com/in/
mearunmenon+919846629020
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
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
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.
HTML DOM TREE STRUCTURE
HIERARCHY OF OBJECTS
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.
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
METHODS USED TO FIND AN ELEMENT
• document.getElementById()
• document.getElementByTagName()
• document.getElementByClassName()
METHODS USED FOR CHANGING AN ELEMENT
• Element.innerHTML=
• Element.attribute=
• Element.setAttribute(attribute.value)
• Element.style.property=
METHODS FORADDING AND DELETING ELEMENTS
• document.createElement()• document.removeChild()• document.removeChild()• document.appendChild()• document.replaceChild()• document.write(text)
METHOD FOR ADDING EVENT HANDLERS
document.getElementById(id).onclick=function(){code}
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.
THANK YOU...
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.
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
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]
