Skip to content

Latest commit

 

History

History

08-DOM-Manipulation

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
clas-list.html
clas-list.html
 
 

README.md

querySelectorAll:

querySelectorAll is a method in JavaScript that selects multiple HTML elements within the DOM based on CSS-like selectors. It returns a collection (a non-live NodeList) of elements that match the specified selector. You can use it to select elements by class, ID, or tag name.

  1. Selecting by Class:
<html>
  <head>
    <title>querySelectorAll Example</title>
  </head>
  <body>
    <p class="highlighted">This is a highlighted paragraph.</p>
    <p class="highlighted">This is another highlighted paragraph.</p>
    <p>This is a regular paragraph.</p>
  </body>
</html>
// The elementsByClass collection stores the selected elements, which form a NodeList.
const elementsByClass = document.querySelectorAll(".highlighted");
// Log the selected elements to the console
console.log(elementsByClass);
output:

NodeList [ <p.highlighted>, <p.highlighted> ]
  1. Selecting by ID:
<!DOCTYPE html>
<html>
  <head>
    <title>querySelectorAll Example</title>
  </head>
  <body>
    <p id="my-paragraph">This is a paragraph with an ID.</p>
    <p>This is another paragraph.</p>
  </body>
</html>
// Select the element with the ID "my-paragraph" using querySelectorAll
const elementByID = document.querySelectorAll("#my-paragraph");
// Log the selected element to the console
console.log(elementByID);
output:

NodeList [ <p#my-paragraph> ]
  1. Selecting by Tag Name::
<!DOCTYPE html>
<html>
  <head>
    <title>querySelectorAll Example</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="highlighted">This is a highlighted paragraph.</p>
  </body>
</html>
// Select all <p> elements using querySelectorAll
const elementsByTag = document.querySelectorAll("p");

// Log the selected elements to the console
console.log(elementsByTag);

ClassList:

The classList property is a useful feature that allows you to manipulate classes on HTML elements easily. Let's dive into an overview of the classList property and its methods.

  • Accessing classList:

You can access the classList property of an element using JavaScript like this:

const element = document.getElementById("myElement");
const classes = element.classList;
  • Common Methods of classList:
  1. add - This method adds one or more classes to the element.
element.classList.add("newClass");
  1. remove - Removes one or more classes from the element.
element.classList.remove("oldClass");
  1. toggle - Toggles a class. If the class exists, it is removed; otherwise, it is added. If the second parameter is true, the class is added; if false, the class is removed.
element.classList.toggle("active");
  1. contains - Checks if a class is present on the element. Returns true if the class exists; otherwise, it is false.
if (element.classList.contains("special")) {
  // Do something special
}
  1. replace - Replaces a class with another class.
element.classList.replace("oldClass", "newClass");
  1. item - Returns the class name at the specified index.
const firstClass = element.classList.item(0);
  1. toString - Returns a string representing the element's classes.
const classString = element.classList.toString();