Share
Explore

BOM JavaScript in the HTML Browser Lesson 1

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>
<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 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() {
// Code to execute when the element is clicked
});

// Listen for a keydown event on an element
element.addEventListener("keydown", function(event) {
// Code to execute when a key is pressed
});

Getting and setting the value of form elements:
Copy code
// Get the value of an input element
let value = element.value;

// Set the value of an input element
element.value = "New Value";

Manipulating the window object:
Copy code
// Get the current URL
let url = window.location.


how to assign a div id to an html element
To assign a div id to an HTML element, you can use the id attribute. For example:
Copy code
<div id="myId">This is my div element</div>

You can also assign an id attribute to an element using JavaScript by setting the id property of the element. For example:
Copy code
let element = document.createElement("div");
element.innerHTML = "This is my div element";
element.id = "myId";
document.body.appendChild(element);

Note that id attribute should be unique in the document.

how to rewrite the innerhtml of an html element by accessing with div
You can rewrite the innerHTML of an HTML element by accessing it using its id and then setting the innerHTML property.
Here is an example of how you can change the innerHTML of a div element with the id of "myId":
Copy code
let element = document.getElementById("myId");
element.innerHTML = "New Content";

You can also use innerText to change the text inside a div
Copy code
let element = document.getElementById("myId");
element.innerText = "New Content";

You can also use textContent to change the text inside a div
Copy code
let element = document.getElementById("myId");
element.textContent = "New Content";

It should be noted that the difference between innerHTML, innerText and textContent is how they handle white space and html tags.
innerHTML will interpret any html tags within the string as actual html, innerText will not display any html tags as text, and textContent is similar to innerText but it includes all text including text within child elements.
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.