Welcome to our comprehensive guide on JavaScript (JS) DOM Collections! This tutorial is designed to help beginners and intermediates understand and master the art of manipulating HTML documents using JavaScript.
In simple terms, DOM Collections are groups of elements that can be accessed and manipulated using JavaScript. They provide a convenient way to interact with HTML documents and dynamically change their content, structure, and behavior.
Before diving into DOM Collections, let's briefly understand the Document Object Model (DOM). The DOM is a programming interface for HTML and XML documents that allows you to access, manipulate, and navigate through the content of a document.
document ObjectThe document object represents the entire HTML document. It's the starting point for accessing any other element in the document.
console.log(document);getElementById MethodThis method allows you to access a specific element in the document using its id attribute.
<div id="myDiv">Hello World!</div>const myDiv = document.getElementById('myDiv');
console.log(myDiv);getElementsByTagName MethodThis method returns a collection of all elements with a specific tag name.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>const myList = document.getElementsByTagName('li');
console.log(myList);getElementsByClassName MethodThis method returns a collection of all elements with a specific class name.
<div class="myClass">Content</div>const myClass = document.getElementsByClassName('myClass');
console.log(myClass);You can change the content of an element by accessing its textContent or innerHTML property.
<div id="myDiv">Original Content</div>const myDiv = document.getElementById('myDiv');
myDiv.textContent = 'New Content';
myDiv.innerHTML = '<strong>New Content</strong>';You can add new elements to the document using the createElement method and appending them using the appendChild method.
const newDiv = document.createElement('div');
newDiv.textContent = 'New Division';
const myDiv = document.getElementById('myDiv');
myDiv.appendChild(newDiv);What does the `document` object represent in JavaScript?
Which method returns a collection of all elements with a specific class name?