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 element

element.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 element

element.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 elements

for (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 code

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

element.classList.remove("myClass");

You can also toggle the class using classList.toggle("className")

Copy code

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

element.classList.toggle("myClass");

You can also assign multiple classes by concatenating them with a space.

Copy code

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

element.className = "myClass1 myClass2 myClass3";

or using classList.add() method multiple times

Copy code

let 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:

html

Copy code

<!DOCTYPE html>

<head>

<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>

// 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 ID

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

// Modify the innerHTML of an element

element.innerHTML = "New Content";

<h1 div id="myId"> Hello Class </h1>

// Access an element by its class name

let elements = document.getElementsByClassName("myClass");

// Access an element by its tag name

let elements = document.getElementsByTagName("p");

Traversing the DOM:

Copy code

// Access the parent node of an element

let parent = element.parentNode;

// Access the children of an element

let children = element.children;

// Access the first child of an element

let firstChild = element.firstChild;

// Access the last child of an element

let lastChild = element.lastChild;

Creating and inserting new elements:

Copy code

// Create a new element

let newElement = document.createElement("div");

// Set the innerHTML of the new element

newElement.innerHTML = "New Content";

// Append the new element to an existing element

element.appendChild(newElement);

// Insert the new element before an existing child element

element.insertBefore(newElement, firstChild);

Removing elements:

Copy code

// Remove an element from the DOM

element.remove();

// Remove a child element

element.removeChild(firstChild);

Manipulating styles:

Copy code

// Get the current value of a style property

let color = element.style.color;

// Set a new value for a style property

element.style.color = "red";

Manipulating attributes:

Copy code

// Get the value of an attribute

let href = element.getAttribute("href");

// Set a new value for an attribute

element.setAttribute("href", "https://www.example.com");

Manipulating classes:

Copy code

// Check if an element has a class

let hasClass = element.classList.contains("myClass");

// Add a class to an element

element.classList.add("myClass");

// Remove a class from an element

element.classList.remove("myClass");

Listening for events:

Copy code

// Listen for a click event on an element

element.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.