HTML DOM Collections


JavaScript DOM Collections are special objects that represent a group or collection of DOM elements. They are returned by certain methods when selecting or querying elements in the DOM.

DOM Collections are live collections of DOM elements. They are similar to arrays but provide additional methods and properties specifically designed for manipulating groups of elements.

Understanding how to work with DOM Collections is crucial for effectively manipulating multiple elements at once.

How to Access DOM Collections

There are several methods that return DOM Collections:

  • getElementsByClassName(): Returns a collection of elements with a specific class name.
  • getElementsByTagName(): Returns a collection of elements with a specific tag name.
  • querySelectorAll(): Returns a static NodeList of elements that match the specified CSS selector.

What are DOM Collection Properties and Methods

length

Property that returns the number of elements in the collection.

Example

Preview

item()

Method that returns the element at the specified index.

Example

Preview

namedItem()

Method that returns the named element from an HTMLCollection.

Example

Preview

DOM Collections provide a convenient way to work with groups of DOM elements. By understanding how to access and manipulate these collections, you can efficiently perform actions on multiple elements at once, making your JavaScript code more powerful and flexible. Experiment with different DOM Collection methods and explore their possibilities to enhance your web development projects.