Flash cards
Review the key moves
What is the main idea behind JavaScript HTML DOM Collections?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ myCollection = document.getElementsByTagName("p");Put the learning moves in the order that makes the concept easiest to apply.
The 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
const myCollection = document.getElementsByTagName("p");Note
The index starts at 0.
HTML HTMLCollection Length
The length property defines the number of elements in an HTMLCollection :
myCollection.lengthThe length property is useful when you want to loop through the elements in a collection:
Example
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}An HTMLCollection is NOT an array!
An HTMLCollection may look like an array, but it is not.
You can loop through the list and refer to the elements with a number (just like an array).
However, you cannot use array methods like valueOf(), pop(), push(), or join() on an HTMLCollection.