Scribd
Upload
5 views

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface that represents web pages as a hierarchical tree structure of nodes, allowing developers to manipulate HTML elements. It includes methods for selecting elements, handling events, and processing forms, enabling dynamic interactions on web pages. The document outlines various aspects of the DOM, including collections of related objects, event handling, and form processing techniques.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface that represents web pages as a hierarchical tree structure of nodes, allowing developers to manipulate HTML elements. It includes methods for selecting elements, handling events, and processing forms, enabling dynamic interactions on web pages. The document outlines various aspects of the DOM, including collections of related objects, event handling, and form processing techniques.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Document Object Model

(DOM): Objects and


Collections
What is DOM (Document Object Model)?
The Document Object Model is a programming interface that comprises web pages (nodes) that
is HTML tags such as < html >, < meta >, < title >, < body >, < footer > , < div >, semantic and
non-semantic tags and other nodes objects.
The Document Object Model, which is a W3 standard, represents web pages as a tree-like
structure of nodes, known as documents.
The Document Object Model allows web developers to manipulate, style, and structure node
objects (HTML documents).
The DOM Structure <header>
The DOM exists in a hierarchical tree-like structure, <nav>
where each web element that makes up the <ul>
document can be thought of as a node, that is, the
element tags, the attribute assigned to the element, <li>HOME</li>
the comment, the text content, and the document as <li>SERVICES</li>
well is also a node. <li>ABOUT</li>
<!DOCTYPE html> </ul>
<html> </nav>
<head> </header>
<section>
<meta charset="utf-8">
<h1>The Document Object Model</h1>
<title>This is an HTML document</title>
<p>
<link rel="stylesheet"type="text/css" The DOM gives web developers the flexibility to be
href="style.css"> able to manipulate, style and structure element nodes
</head> (HTML elements). </p>
</section>
<body>
</main>
<main>
</body>
<!-- This is the website Navigation -->
bbjh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript can Change HTML</h2>
<p id="p1">Hello World!</p>
<script>
var t2=window.prompt("enter the text");
document.getElementById("p1").innerHTML = t2;
//document.getElementById("p1").innerHTML = "New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
JavaScript querySelector method is used to select <div id="myDIV">
elements from the DOM (from the webpage). It returns
<h2 class="example">A heading with class="example"
the 1st match element.
in div</h2>
querySelector uses CSS selector like p, h1, .class1, <p class="example">A paragraph with class="example"
#id1, etc to select the element from the DOM. in div.</p>
If the targeted element exists in the DOM, it will return </div>
the 1st match from the DOM, if not it will return null.
<p>Click the button to change the text of the first
Syntax:
element with class="example" in div.</p>
document.querySelector(selector); <button onclick="myFunction()">Try it</button>
Ex:<html> <script>
<head>
function myFunction() {
<style> var x = document.getElementById("myDIV");
#myDIV { x.querySelector(".example").innerHTML = "Hello
border: 1px solid black; World!";
} }
</style> </script>
</head> </body> </html>
<body>
DOM Collections p { margin: 5% }
Document Object Model is the notion of collections, pa { color: #aa0000 }
which are groups of related objects on a page.
.links { font-size: 14px;
DOM collections are accessed as properties of DOM
objects such as the document object or a DOM node. text-align: justify;
The document object has properties containing the margin-left: 10%;
images collection, links collection, forms collection margin-right: 10% }
and anchors collection.
.link a { text-decoration: none }
These collections contain all the elements of the
corresponding type on the page .link a:hover { text-decoration: underline }
<html> </style>
<head> <script type = "text/javascript">
<title>Using Links Collection</title> <!--
<style type = "text/css"> function processlinks()
body { font-family: arial, helvetica, {
sans-serif } var linkslist = document.links; // get the
document's links
h1 { font-family: tahoma, geneva,
sans-serif; text-align: center } var contents = "Links in this page:\n<br
for ( var i = 0; i < linkslist.length; i++ ) <a href = "http://www.deitel.com/ResourceCenters.html">list of
{ Resource Centers</a> on a wide range of topics. Many
Resource
var currentLink = linkslist[ i ];
centers related to topics covered in this book,
contents += "<span class = 'link'>" + <a href = "http://www.deitel.com/iw3htp4">Internet and
World Wide
currentLink.innerHTML.link( currentLink.href ) + Web How to Program, 4th Edition</a>. We have Resouce
Centers on
"</span> | ";
<a href = "http://www.deitel.com/Web2.0">Web 2.0</a>,
} // end for <a href = "http://www.deitel.com/Firefox">Firefox</a>
and
document.getElementById( "links" ).innerHTML = <a href = "http://www.deitel.com/IE7">Internet Explorer
contents; 7</a>,
} // end function processlinks <a href =
"http://www.deitel.com/XHTML">XHTML</a>, and
// -->
<a href =
</script> "http://www.deitel.com/JavaScript">JavaScript</a>.
</head> Watch the list of Deitel Resource Centers for related new
Resource Centers.</p>
<body onload = "processlinks()">
<div id = "links" class = "links"></div>
<h1>Deitel Resource Centers </h1> </body>
<p><a href = "http://www.deitel.com/">Deitel's </html>
JavaScript Event Handling: Ex:<html>
JavaScript events, which allow scripts to respond <head>Javascript Events</head>
to user interactions and modify the page </br>
accordingly.
<body onload="window.alert('Page successfully
Events allow scripts to respond to a user who is loaded');">
moving the mouse, entering form data, pressing
keys and much more. <script>

Events and event handling help make web <!--


applications more dynamic and interactive document.write("The page is loaded successfully");
load Event //-->
The onLoad event executes when a page or a </script>
frame or an image is loaded. <img id="img" src="camel.jpg"
It initializes some variables when a page is loaded onload="loadImage()" width="100" height="132">
or set some properties when an image is loaded. </body>
Syntax when a page loads: </html>
<body onload = "JavaScript code need to be
executed">
OnClick Event Handler Mouseover
This event handler invokes a JavaScript code when When the mouse cursor moves into an element, a
a click action happens on an HTML element. mouseover event occurs for that element
E.g., when we click a button, a link is pushed, a <html>
checkbox checks or an image map is selected, it <meta charset="utf-8"/>
can trigger the onClick event handler.
<script>
<html>
function over(){
<meta charset="utf-8"/>
var ele = document.getElementById('btn');
<script> function popop(){
ele.style.background='red';
confirm("Are you sure?");
ele.style.color='white';
}</script>
}
<body> Demonstrating onclick based on DOM
object</br> </script>
<input type="button" id="btn" value="Submit <body> Demonstrating onmouseover based on
Button" DOM object</br>
onclick="popop()" /> <input type="button" id="btn" value="Submit
Button" onmouseover="over()" />
</body>
</body>
</html>
mouseout Form Processing with focus and blur
When the cursor leaves the element, a mouseout event occurs. The focus and blur events can be useful when
<html> dealing with form elements that allow user
<script> input.
function over(){ The focus event fires when an element gains the
var ele = document.getElementById('btn'); focus (i.e., when the user clicks a form field or
ele.style.background='red';
uses the Tab key to move between form
elements),
ele.style.color='white'; }
blur fires when an element loses the focus,
function out(){
which occurs when another control gains the
var ele = document.getElementById('btn'); focus.
ele.style.background='Green';
ele.style.color='black'; }
</script>
<body> Demonstrating onmouseout based on DOM
object</br>
<input type="button" id="btn" value="Submit Button"
onmouseover="over()"
onmouseout="out()" />
</body></html>
<!DOCTYPE html> More Form Processing with submit
<html>
<body>
and reset
<p>When you enter the input field, a function is triggered which submit: This event is triggered when
sets the background color to yellow. When you leave the input
field, a function is triggered which sets the background color to a form is submitted, either by clicking
red.</p> a submit button or pressing the Enter
Enter your name: <input type="text"
onfocus="focusFunction()" onblur="blurFunction()">
id="myInput" key within a form field.
<script> You can use this event to perform
function focusFunction() { form validation, submit form data to a
// Focus = Changes the background color of input to yellow server, or handle other form-related
document.getElementById("myInput").style.background=
"yellow"; tasks.
} reset: This event is triggered when a
function blurFunction() {
form is reset, either by clicking a reset
// No focus = Changes the background color of input to red
document.getElementById("myInput").style.background= "red";
button or programmatically resetting
} the form using JavaScript.
</script> You can use this event to perform
</body>
cleanup tasks or reset the form's state.
<html> Enter your last name:
<head> <input type="text" name="lastName" id="lastName"/><br/>
<title>Submit and Reset Confirmation</title> Enter your address:
<script type="text/javascript"> <input type="text" name="address" id="address"/><br/>
function allowReset() { Enter your city:
return window.confirm("Go ahead and clear the form?"); <input type="text" name="city" id="city" /><br/>
} <input type="radio" name="gender" id="gender1"
function allowSend() { checked="checked" />
return window.confirm("Go ahead and mail this info?"); Male <br/>
} <input type="radio" name="gender" id="gender2" />Female<br/>
</script> <input type="checkbox" name="cse" id="cse" />I am cse<br/>
</head> <input type="reset" />
<body> <input type="submit" />
<form method="POST" enctype="text/plain" </form>
action="mailto:[email protected]" onreset="return allowReset()" </body>
onsubmit="return allowSend()">
</html>
Enter your first name:
<input type="text" name="firstName"
id="firstName"/><br/>

You might also like