(lt.36)Mastering the DOM: Building Dynamic and Interactive Webpages with JavaScript
Introduction:
The Document Object Model (DOM) in JavaScript is a programming interface that represents the structure of HTML and XML documents as a tree-like structure.
Just like we target html through CSS , same way DOM helps us to target the html through JavaScript. It's a platform-independent and language-neutral interface that allows programming languages like JavaScript to access, manipulate, and interact with the structure and content of an HTML document.
Methods of Dom:
Here we will learn how to use the document model through class , id , tag and query selector. We will get to know how to use all of these to select any element in the html document and also get to know how to change classes , color and select a class list through these methods:
The below coding implementation will tell us how to use all these methods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- //ID -->
<p id="one"><span>hello</span>namste</p>
<!-- class -->
<ul>
<li class="tech">one</li>
<li class="tech">2</li>
<li class="tech">three <span></span></li>
</ul>
<!-- tag name -->
<h4>hey</h4>
<h4>how</h4>
<h4>are you</h4>
<!-- QUERY SELECTOR-EK HI TAG K ANDER ID CLASS TAG LIKH KSTE H -->
<h2>gaurav</h2>
<h2 class="clss">krish</h2>
<h2 id="iiDD">Jadugar</h2>
<script>
let var1 = document.getElementById("one");
console.log(var1)
console.log(var1.innerText);
console.log(var1.innerHTML)
//CLASS
let var2 = document.getElementsByClassName("tech");
console.log(var2)
console.log(var2[2])
console.log(var2[2].innerText);
console.log(var2[2].innerHTML);
console.log(var2[1].innerHTML);
// //manupulatinh html elements
var2[1].innerText = "node.js";
// / /TAG Name
let var3 = document.getElementsByTagName("h4");
console.log(var3[1].innerHTML)
console.log(var3[2].innerText);
console.log(var3.innerText)
var3[2].innerText = "himanshu";
var3[2].style.color = "red";
console.log(var3[2].innerText);
// QUERY SELECTOR
let var4 = document.querySelector(".clss");
console.log(var4);
let var41 = document.querySelector("#iiDD");
console.log(var41)
// var4.className = "helloji"
// console.log(var4)
// var4.classList="helo hi no"
// // attribute name , attribute value
var4.setAttribute("title", "hacker")
console.log(var4)
</script>
</body>
</html>
Method to create and remove any html element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom part 2</title>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<script>
// // append child
let title = document.createElement("h1")
title.className="hello"
title.style.fontSize="30px";
title.textContent="hunter genius";
console.log(title)
document.body.appendChild(title)
// i have to tell the javascript that inset whatever i have made and to
// insert this we have to use this code : document.body.appendChild(title)
// // remove child
let ul = document.querySelector("ul")
console.log(ul)
let lists = document.querySelectorAll("li")
console.log(lists)
for(list of lists)
{
ul.removeChild(list)
}
</script>
</body>
</html>
Methods to use event listener in JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>part 3</title>
</head>
<body>
<!-- normal html -->
<h1>hello ji</h1>
<p id="js"></p>
<button ondblclick="hey()" id="jss">submit</button>
<!-- javascript -->
<script>
// document.addEventListener("click",hello)
document.addEventListener("dblclick", hello);
// targetting full web page
// document.addEventListener("mouseenter",hello)
function hello() {
document.getElementById("js").innerText = "namste india";
}
function hey() {
document.getElementById("jss").innerText = "nice work";
document.getElementById("jss").style.color = "red";
document.getElementById("jss").style.backgroundColor = "yellow";
document.getElementById("jss").style.padding = "13px";
document.getElementById("jss").style.border = "7px solid green";
}
</script>
</body>
</html>