DOM Collections

1. Nadar Saraswathi College of Arts & Science,
Theni.
DOM Collections
By,
S.Subha Thilagam

2. HTMLCollection Object
• The getElementsByTagName() method returns
an HTMLCollection object.
• An HTMLCollection object is an array-like list
(collection) of HTML elements.
• The following code selects all <p> elements in
a document:
Example:
var x =document.getElementsByTagName("p");

3. Contind..
• The elements in the collection can be accessed
by an index number.
• To access the second <p> element you can
write:
• y = x[1];
Note: The index starts at 0.

4. HTMLCollection Length
• The length property defines the number of
elements in an HTMLCollection:
Example:
var myCollection =
document.getElementsByTagName("p");
document.getElementById("demo").innerHT
ML = myCollection.length;

5. Example
• Change the background color of all <p>
elements:
var myCollection =
document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++)
{
myCollection[i].style.backgroundColor = "re
d";
}

6. JavaScript Events
• HTML events are "things" that happen to
HTML elements.
• When JavaScript is used in HTML pages,
JavaScript can "react" on these events.

7. HTML Events
• An HTML event can be something the browser
does, or something a user does.
• Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• Often, when events happen, you may want to
do something.

8. Example:
<button onclick="document.getElementById('de
mo').innerHTML = Date()">The time
is?</button>
• In the example above, the JavaScript code
changes the content of the element with
id="demo".

9. Common HTML Events
Event Description
• Onchange An HTML element has been
changed
• Onclick The user clicks an HTML
element
• Onmouseover The user moves the mouse over an
HTML element
• Onmouseout The user moves the mouse away
from an HTML element
• Onkeydown The user pushes a keyboard key
• Onload The browser has finished loading the page

10. What can JavaScript Do?
• Things that should be done every time a page
loads
• Things that should be done when the page is
closed
• Action that should be performed when a user
clicks a button
• Content that should be verified when a user
inputs data