JS DOM Node Lists 🎯

beginner
14 min

JS DOM Node Lists 🎯

Welcome to our comprehensive guide on JavaScript (JS) DOM Node Lists! In this lesson, we'll dive deep into understanding what Node Lists are, why they're essential for manipulating web pages, and how to work with them using various methods.

By the end of this lesson, you'll be equipped with the knowledge to manipulate elements on your web pages like a pro! 🚀

Table of Contents 📝

  1. Introduction to Node Lists
    • What are Node Lists?
    • Why Node Lists?
  2. Accessing Node Lists
    • getElementsByTagName()
    • getElementsByClassName()
    • querySelectorAll()
  3. Manipulating Node Lists
    • Changing Node Content
    • Modifying Node Attributes
    • Removing Nodes
  4. Practical Examples
    • Example 1: Changing Content of Multiple Elements
    • Example 2: Dynamic Table Sorting
  5. Quiz Time 📝

1. Introduction to Node Lists 📝

Node Lists in JavaScript are collections of elements that share a common factor, such as being of the same type or having the same class name. They are a powerful tool for manipulating web pages dynamically.

Why Node Lists? 💡

Node Lists are important because they allow you to easily access and manipulate multiple elements in a web page at once. Without them, you would have to manipulate each element individually, which can be time-consuming and error-prone.

2. Accessing Node Lists 📝

To work with Node Lists, you can use three main methods: getElementsByTagName(), getElementsByClassName(), and querySelectorAll().

2.1. getElementsByTagName() 📝

This method returns a Node List of all elements with a specified tag name.

javascript
// Get all paragraphs (<p>) on the page const paragraphs = document.getElementsByTagName("p");

2.2. getElementsByClassName() 📝

This method returns a Node List of all elements with a specified class name.

javascript
// Get all elements with class "highlight" const highlightedElements = document.getElementsByClassName("highlight");

2.3. querySelectorAll() 📝

This method returns a Node List of elements that match a specified CSS selector. It's more flexible than the previous two methods.

javascript
// Get all links (<a>) within the first paragraph const firstParagraphLinks = document.querySelectorAll("p a");

3. Manipulating Node Lists 📝

Once you have a Node List, you can manipulate its elements using various methods. Here are some examples:

3.1. Changing Node Content 📝

javascript
// Change the content of all paragraphs for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].textContent = "New content!"; }

3.2. Modifying Node Attributes 📝

javascript
// Change the class of all elements with class "highlight" for (let i = 0; i < highlightedElements.length; i++) { highlightedElements[i].classList.add("new-class"); }

3.3. Removing Nodes 📝

javascript
// Remove all links within the first paragraph for (let i = 0; i < firstParagraphLinks.length; i++) { firstParagraphLinks[i].remove(); }

4. Practical Examples 🎯

Now that you've learned the basics, let's dive into some practical examples!

Example 1: Changing Content of Multiple Elements 🎯

This example demonstrates how to change the content of multiple elements based on user input.

Example 2: Dynamic Table Sorting 🎯

This example shows how to sort a table dynamically based on column clicks.

5. Quiz Time 📝

Time for a quick quiz to reinforce what you've learned!

Quick Quiz
Question 1 of 1

What method returns a Node List of all elements with a specified class name?