JavaScript HTML DOM

When a web page is loaded, the browser creates a Document Object Model of the page. The DOM is a W3C (World Wide Web Consortium) standard.

The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

Adding and Removing Nodes (HTML Elements):

To add/remove a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.

<script>
var newElement = document.createElement("p");
var node = document.createTextNode("This is new.");
newElement.appendChild(node);

var existing = document.getElementById("div1");
existing.appendChild(newElement);
</script>

The appendChild() method in the above example, appended the new element as the last child of the parent.

The insertBefore() method in the above example, appended the new element as the first child of the parent.

To remove an HTML element, use the remove() method.

The getElementsByTagName() method returns an HTMLCollection object.

var x = document.getElementsByTagName(“p”);

To access the second <p> element you can write:

y = x[1];

Most browsers return a NodeList object for the method querySelectorAll().

Some (older) browsers return a NodeList object instead of an HTMLCollection for methods like getElementsByClassName().

DOM CSS

document.getElementById(“p2”).style.color = “blue”;

DOM Animation

All animations should be relative to a container element.

<div id ="container">
<div id ="animate">My animation will go here</div>
</div>

Style the Elements

The container element should be created with style = “position: relative".

The animation element should be created with style = “position: absolute".

DOM Events

<h1 onclick=”this.innerHTML = ‘Ooops!’”>Click on this text!</h1><h1 onclick="changeText(this)">Click on this text!</h1>

OR

<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

DOM EventListener

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.

Add an event listener that fires when a user clicks a button:

document.getElementById(“myBtn”).addEventListener(“click”, displayDate);

The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.

You can add many event handlers to one element.

You can add many event handlers of the same type to one element, i.e two “click” events.

You can add event listeners to any DOM object not only HTML elements. i.e the window object.

With the addEventListener() method you can specify the propagation type by using the “useCapture” parameter:

addEventListener(event, function, useCapture);

The default value is false, which will use the bubbling propagation.

When the value is set to true, the event uses the capturing propagation.

You can easily remove an event listener by using the removeEventListener() method.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.