![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.](https://image.slidesharecdn.com/1563375687556domcollectionswp-190717150651/85/WEB-PROGRAMMING-ANALYSIS-3-320.jpg)
![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";
}](https://image.slidesharecdn.com/1563375687556domcollectionswp-190717150651/85/WEB-PROGRAMMING-ANALYSIS-5-320.jpg)
WEB PROGRAMMING ANALYSIS
- 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