Share
Explore

BOM JavaScript in the HTML Browser Lesson 1

​
Peter Sigurdson
Manipulating the HTML browser object model using JavaScript that you can use to create your own exercises.

How to assign a class name to an HTML NODE

You can assign a class name to an HTML node by using the className property or classList property.
Here is an example of how you can assign a class name "myClass" to a div element with the id of "myId":

let element = document.getElementById("myId");element.className = "myClass";

Here is an example of how to access an HTML DOM node by class name using JavaScript:

// Get the first element with the class "example"var element = document.getElementsByClassName("example")[0];
// Do something with the elementelement.innerHTML = "Hello, World!";
You can also use the querySelector method to select the first element matching a CSS class name:
Copy code// Get the first element with the class "example"var element = document.querySelector(".example");
// Do something with the elementelement.innerHTML = "Hello, World!";
And if you want to select all elements with the same class name, you can use querySelectorAll method instead:
Copy code// Get all elements with the class "example"var elements = document.querySelectorAll(".example");
// Do something with the elementsfor (var i = 0; i < elements.length; i++) { elements[i].innerHTML = "Hello, World!";}
Please note that, these code samples are assuming that the class 'example' is already exist in the HTML document and also DOM is loaded completely.

You can use the classList property to add or remove classes from an element.
let element = document.getElementById("myId");element.classList.add("myClass");
Copy codelet element = document.getElementById("myId");element.classList.remove("myClass");
You can also toggle the class using classList.toggle("className")
Copy codelet element = document.getElementById("myId");element.classList.toggle("myClass");
You can also assign multiple classes by concatenating them with a space.
Copy codelet element = document.getElementById("myId");element.className = "myClass1 myClass2 myClass3";
or using classList.add() method multiple times
Copy codelet element = document.getElementById("myId");element.classList.add("myClass1", "myClass2", "myClass3");

Here's an HTML file with the JavaScript code embedded, demonstrating the effects of the provided code snippets:
htmlCopy code<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript DOM Manipulation</title></head><body> <h1>JavaScript DOM Manipulation Example</h1> <div class="example">This is an example div with class "example"</div> <div class="example">This is another example div with class "example"</div> <div id="myId">This is a div with id "myId"</div>
 <script> // Get the first element with the class "example" var element = document.getElementsByClassName("example")[0];
 // Do something with the element element.innerHTML = "Hello, World!";
 // Get the first element with the class "example" using querySelector var element2 = document.querySelector(".example");
 // Do something with the element element2.innerHTML = "Hello, World! (querySelector)";
 // Get all elements with the class "example" using querySelectorAll var elements = document.querySelectorAll(".example");
 // Do something with the elements for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = "Hello, World! (querySelectorAll)"; }
 let element3 = document.getElementById("myId"); element3.classList.add("myClass"); element3.classList.remove("myClass"); element3.classList.toggle("myClass");
 // Assign multiple classes by concatenating them with a space let element4 = document.getElementById("myId"); element4.className = "myClass1 myClass2 myClass3";
 // Or use classList.add() method multiple times let element5 = document.getElementById("myId"); element5.classList.add("myClass1", "myClass2", "myClass3"); </script></body></html>
This HTML file includes the JavaScript code that demonstrates how to access and manipulate DOM elements with class names and ids. The code modifies the innerHTML of the elements with the class "example" and adds/removes/toggles classes on the element with the id "myId".


It should be noted that if you use className property to change classes it will replace all the existing classes with the new classes, while if you use classList.add() or classList.remove() it will only add or remove the class you specify.
Accessing and modifying the DOM:
<h1 div id="myId"> Hello Class </h1>// Access an element by its IDlet element = document.getElementById("myId");
// Modify the innerHTML of an elementelement.innerHTML = "New Content";
<h1 div id="myId"> Hello Class </h1>// Access an element by its class namelet elements = document.getElementsByClassName("myClass");
// Access an element by its tag namelet elements = document.getElementsByTagName("p");
Traversing the DOM:
Copy code// Access the parent node of an elementlet parent = element.parentNode;
// Access the children of an elementlet children = element.children;
// Access the first child of an elementlet firstChild = element.firstChild;
// Access the last child of an elementlet lastChild = element.lastChild;
Creating and inserting new elements:
Copy code// Create a new elementlet newElement = document.createElement("div");
// Set the innerHTML of the new elementnewElement.innerHTML = "New Content";
// Append the new element to an existing elementelement.appendChild(newElement);
// Insert the new element before an existing child elementelement.insertBefore(newElement, firstChild);
Removing elements:
Copy code// Remove an element from the DOMelement.remove();
// Remove a child elementelement.removeChild(firstChild);
Manipulating styles:
Copy code// Get the current value of a style propertylet color = element.style.color;
// Set a new value for a style propertyelement.style.color = "red";
Manipulating attributes:
Copy code// Get the value of an attributelet href = element.getAttribute("href");
// Set a new value for an attributeelement.setAttribute("href", "https://www.example.com");
Manipulating classes:
Copy code// Check if an element has a classlet hasClass = element.classList.contains("myClass");
// Add a class to an elementelement.classList.add("myClass");
// Remove a class from an elementelement.classList.remove("myClass");
Listening for events:
Copy code// Listen for a click event on an elementelement.addEventListener("click", function() {
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.