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. 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
5. 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.
6. • 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.
9. 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.
10. 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
11. 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.
12. 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
13. 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
14. 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
15. ADD EVENT HANDLERS
Method Description
document.getElementById(id).o
nclick=function(){code}
Adding event handler code to an
onclick event
16. 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.
18. 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.
19. 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
20. 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
