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:

Copy code

// 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 also use the classList property to add or remove classes from an element.

Copy code

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");

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.