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:a@b.com" onreset="return allowReset()" </body>
onsubmit="return allowSend()">
</html>
Enter your first name:
<input type="text" name="firstName"
id="firstName"/><br/>
