Scribd
Upload
13 views

Resig 06 A

The document discusses the Document Object Model (DOM) and events in JavaScript. The DOM provides a way to represent and interact with elements in an XML or HTML document, and is essential for JavaScript development. Events allow JavaScript code to run in response to user interactions and synchronize user interfaces with data. Together, the DOM and events enable modern interactive web applications. The document provides examples of using the DOM to select and modify elements, and adding event handlers to provide visual effects on mouseover.

Uploaded by

cejijit238
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Resig 06 A

The document discusses the Document Object Model (DOM) and events in JavaScript. The DOM provides a way to represent and interact with elements in an XML or HTML document, and is essential for JavaScript development. Events allow JavaScript code to run in response to user interactions and synchronize user interfaces with data. Together, the DOM and events enable modern interactive web applications. The document provides examples of using the DOM to select and modify elements, and adding event handlers to provide visual effects on mouseover.

Uploaded by

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

7273ch01final.

qxd 11/16/06 8:23 AM Page 8

8 CHAPTER 1 ■ MODERN JAVASCRIPT PROGRAMMING

The Document Object Model


The DOM is a popular way of representing XML documents. It is not necessarily the fastest,
lightest, or easiest to use, but it is the most ubiquitous, with an implementation existing in
most web development programming languages (such as Java, Perl, PHP, Ruby, Python, and
JavaScript). The DOM was constructed to provide an intuitive way for developers to navigate
an XML hierarchy.
Since valid HTML is simply a subset of XML, having an efficient way to parse and
browse DOM documents is absolutely essential for making JavaScript development easier.
Ultimately, the majority of interaction that occurs in JavaScript is between JavaScript and
the different HTML elements contained within a web page; and the DOM is an excellent tool
for making this process simpler. Some examples of using the DOM to navigate and find dif-
ferent elements within a page and then manipulate them can be found in Listing 1-4.

Listing 1-4. Using the Document Object Model to Locate and Manipulate Different
DOM Elements

<html>
<head>
<title>Introduction to the DOM</title>
<script>
// We can't manipulate the DOM until the document
// is fully loaded
window.onload = function(){

// Find all the <li> elements in the document


var li = document.getElementsByTagName("li");

// and add a ared border around all of them


for ( var j = 0; j < li.length; j++ ) {
li[j].style.border = "1px solid #000";
}

// Locate the element with an ID of 'everywhere'


var every = document.getElementById( "everywhere" );

// and remove it from the document


every.parentNode.removeChild( every );

};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the
DOM is awesome, here are some:</p>
7273ch01final.qxd 11/16/06 8:23 AM Page 9

CHAPTER 1 ■ MODERN JAVASCRIPT PROGRAMMING 9

<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>

The DOM is the first step to developing unobtrusive JavaScript code. By being able to
quickly and simply navigate an HTML document, all resulting JavaScript/HTML interactions
become that much simpler.

Events
Events are the glue that holds together all user interaction within an application. In a nicely
designed JavaScript application, you’re going to have your data source and its visual repre-
sentation (inside of the HTML DOM). In order to synchronize these two aspects, you’re
going to have to look for user interactions and attempt to update the user interface accord-
ingly. The combination of using the DOM and JavaScript events is the fundamental union
that makes all modern web applications what they are.
All modern browsers provide a number of events that are fired whenever certain inter-
actions occur, such as the user moving the mouse, striking the keyboard, or exiting the page.
Using these events, you can register code that will be executed whenever the event occurs.
An example of this interaction is shown in Listing 1-5, where the background color of the
<li>s change whenever the user moves his mouse over them.

Listing 1-5. Using the DOM and Events to Provide Some Visual Effects

<html>
<head>
<title>Introduction to the DOM</title>
<script>
// We can't manipulate the DOM until the document
// is fully loaded
window.onload = function(){

// Find all the <li> elements, to attach the event handlers to them
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {

// Attach a mouseover event handler to the <li> element,


// which changes the <li>s background to blue.
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};

You might also like