The DOM - Build: The Web

JavaScript can access and modify all parts of an HTML document via the HTML The Document Object Model (DOM) in HTML .The browser produces a Document Object Model of a web page when it is loaded. The HTML DOM model is built as a hierarchy of Objects:

Document

Your web page is represented by the document object. When you wish to get to any element on an HTML page, you must first get to the document object.

Selecting An Element


const id = document.getElementById("id");
const p_tag = document.getElementsByTagName("p");
const classname = document.getElementsByClassName("class");
const query_id = document.querySelector("#id");
const query_class = document.querySelectorAll(".class");

You'll frequently wish to manipulate HTML elements with JavaScript.To do so, you must first locate the components. There are various options for accomplishing this:

Identifying HTML elements based on their ids

Using the tag name to locate HTML elements

Finding HTML elements based on their class names

CSS selectors are used to locate HTML elements.

Manipulating The Element


document.getElementById("id").innerHTML = "<em>italic</em>";

The innerHTML attribute is the simplest way to change the content of an HTML element.


document.getElementById("img").src = "image.jpg";
document.getElementById("a").href = "https://some.site.com";

Use the above syntax to update the value of an HTML attribute


document.write("Hello");

Document.write() in JavaScript can be used to write straight to the HTML file.


document.getElementById(id).style.property = value;
document.getElementById("heading").style.color = "blue";
document.getElementById("heading").style.backgroundColor = "red";

JavaScript may change the style of HTML elements thanks to the HTML DOM. Use the above syntax to modify the style of an HTML element. It's important to note that the background color in CSS is written as backgroundColor rather than background-color. This also applies to other styles with several words.

Events


document.getElementById("btn").onclick = changename;

A function named changename is applied to an HTML element with the id="btn" in the example above. When the button is pressed, the function is called.


<body onload="sayhello()">

When a user enters or exits a page, the onload and onunload events are fired. The onload event can be used to determine the visitor's browser type and version, and then load the appropriate version of the web page based on the data.

A mouse-click is represented by the onmousedown, onmouseup, and onclick events. The onmousedown event is started when a mouse button is clicked, followed by the onmouseup event when the mouse button is released, and finally the onclick event when the mouse-click is completed.


id.addEventListener("click", function(){ 
	alert("Hello, World!"); 
});
id.removeEventListener("click", function(){ 
alert("Goodbye!"); 
});

The addEventListener() method adds an event handler to an element without overwriting any that already exist. Many event handlers can be added to a single element. The removeEventListener() function makes it simple to remove an event listener.

Creating New Elements


const div = document.getElementById("div");
const p = document.createElement("p");
const text = document.createTextNode("This is a new paragraph.");
p.appendChild(text);
div.appendChild(p);
// or
const p = document.createElement("p");
p.innerHTML = "New Paragraph";
div.appendChild(p);
// or
div.innerHTML = "<p>New Paragraph</p>";

You must first create the element before appending it to an existing element to add a new element to the HTML DOM.


<div id="div1">  
<p id="p1">This is a paragraph.</p>  
<p id="p2">This is another paragraph.</p>
</div>



const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);

You can use the insertBefore() method to insert before a particular element.

document.getElementById("div").remove()

Use the remove() or removeChild() methods to remove an HTML element.

Other JavaScript properties, methods and objects include math, date, array methods and so on. The links below will provide you with additional information.

The list is just a selection of the great JavaScript documentation; try searching online for additional sites to discover which one you like.