JavaScript HTML DOM

The HTML DOM Tree of Objects

Adding and Removing Nodes (HTML Elements):

<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>
var x = document.getElementsByTagName(“p”);
y = x[1];

DOM CSS

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

DOM Animation

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

Style the Elements

DOM Events

<h1 onclick=”this.innerHTML = ‘Ooops!’”>Click on this text!</h1><h1 onclick="changeText(this)">Click on this text!</h1>
<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

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store