The presentation provides an introduction to the Document Object Model (DOM) and how it allows JavaScript to access and modify HTML documents. It discusses how the DOM presents an HTML document as a tree structure, and how JavaScript can then restructure the document by adding, removing, or changing elements. It also gives examples of how DOM properties and methods allow accessing and manipulating specific nodes, such as changing the background color of the document body.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 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
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Anchor object
Document object
Event object
Form and Form Input object
Frame, Frameset, and IFrame objects
Image object etc
Dom hiearchy,managing events
onload and onunload
Using the Onclick Event Handler
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 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
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Anchor object
Document object
Event object
Form and Form Input object
Frame, Frameset, and IFrame objects
Image object etc
Dom hiearchy,managing events
onload and onunload
Using the Onclick Event Handler
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
PHP string function helps us to manipulate string in various ways. There are various types of string function available. Here we discuss some important functions and its use with examples.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
PHP string function helps us to manipulate string in various ways. There are various types of string function available. Here we discuss some important functions and its use with examples.
Html css java script basics All about you needDipen Parmar
Hello Friends my name is Dipen parmar
and
today you got all you need in HTML ,CSS, andJavaScript
in just one document....
so please give like
and subscribe my youtube channel
https://www.youtube.com/channel/UChvhhqqFl23yYwq54ykoOQQ
DOM(Document Object Model) in javascriptRashmi Mishra
Title: Mastering JavaScript: From Basics to Advanced
Description:
Enhance your JavaScript skills with our comprehensive presentation designed for both beginners and advanced learners. This detailed guide covers essential topics, including:
JavaScript Fundamentals: Variables, data types, functions, and loops
DOM Manipulation: Accessing and modifying HTML elements
Advanced Concepts: Closures, promises, async/await
Practical Examples: Real-world applications and coding exercises
Key Features:
Clear, concise explanations of key JavaScript concepts
High-quality visuals to aid understanding
Practical code examples and exercises
Links to additional resources and full study materials
Why You’ll Love This Presentation:
Perfect for self-learners and students
Great reference for developers at all levels
Continuously updated content to stay current with industry trends
Get the Full Study Materials:
Visit our website [YourWebsite.com] for the complete JavaScript study guide, detailed cheat sheets, and exclusive tutorials.
Join our newsletter for updates and special offers on our educational products.
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. and dummies guide to html5 and complete html guide pdf
2. Contents….
2
Introduction
How DOM works?
Document tree
HTML DOM access nodes
DOM Properties
DOM Methods
References
8/5/2015
3. Introduction
The HTML DOM defines a standard way for accessing
and manipulating HTML documents.
It presents an HTML document as a tree-structure with
elements, attributes, and text.
With JavaScript you can restructure an entire HTML
document. You can add, remove, change, or reorder items
on a page.
8/5/2015
3
4. This access, along with methods and properties to add,
move, change, or remove HTML elements, is given
through DOM.
The DOM can be used by JavaScript to read and change
HTML, XHTML, and XML documents.
8/5/2015
4
5. 5
How the DOM works?
<head><script>
function toggle()
{ document.img.button1.src=“button_on.gif”; }
</script></head>
<body>
<a href=“test.html” onmouseover=“toggle()”> <img name=“button1” src=“button_off.gif”></a>
</body>
action
reaction
Action Event JavaScript DOM Reactio
nsrc=“button_off.gif” onmouseov
er
toggle() document.img.butto
n1
Src=“button_on.gi
f”
1) User moves mouse over object
2) Event senses that something happened to the object
3) JavaScript tells the object what to do (Even handler)
4) Locates object on the web page
5) Object’s image source is changed
8/5/2015
6. Document Tree (Node Tree)
<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header </h1>
<a href=“http://.... > My link </a>
</body>
</html>
8/5/2015
6
8. HTML DOM Example
<html>
<head>
<script type="text/javascript">
function ChangeColor() {
document.body.bgColor="yellow" }
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
8/5/2015
8
9. HTML DOM Access Nodes
The getElementById() method returns the element with
the specified ID:
document.getElementById("someID");
The getElementsByTagName() method returns all
elements (as a nodeList) with the specified tag name.
document.getElementsByTagName("p");
8/5/2015
9
10. DOM Objects
DOM Anchor DOM Area
DOM Base DOM Body
DOM Button DOM Event
DOM Form DOM Frame
DOM Frameset DOM IFrame
DOM Image DOM Input Button
DOM Input Checkbox DOM Input File
DOM Input Hidden DOM Input Password
DOM Input Radio DOM Input Reset
DOM Input Submit DOM Input Text
DOM Link DOM Meta
DOM Object DOM Option
DOM Select DOM Style
DOM Table DOM TableCell
DOM TableRow DOM Textarea
8/5/2015
10
