DOM
Document Object Model:
=====================
"The Document Object Model (DOM) is a platform and
language-neutral interface
that allows programs and scripts to dynamically access and
update the content, structure,
and style of a document."
Document==> html file
Object====>tags elements, nodes
Model===>layout,structure
When a web page is loaded, the browser creates a
Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs
to create dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and
attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
DOM SELECTERS:
1)document.getElementsByTagName();
2)document.getElementById();
3)document.getElementsByClassName();
4)document.querySelector();
5)document.querySelectorAll();
1)get elements by tag name:
======> this function is basically used to target or fecth and
element from the document object model.
this function target the element based on tag name.
<head>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
color: black;
width: 10vh;
}
</style>
</head>
<!-- Second part -->
<body>
<h1>html</h1>
<h1 id="heading"> js</h1>
<h1>react </h1>
<h2>DOM</h2>
<h2>document Object Modal</h2>
</body>
<script>
var tag = document.getElementsByTagName("h1")
console.log(tag)
</script>
</html>
OUTPUT:
Eg2
<head>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
color: black;
/* width: 10vh; */
text-align: center;
}
</style>
</head>
<!-- Second part -->
<body>
<h1>html</h1>
<h1 id="heading"> js</h1>
<h1>react </h1>
<h2>DOM</h2>
<h2>document Object Modal</h2>
</body>
<script>
var tag = document.getElementsByTagName("h1")
console.log(tag)
tag[0].style.color = "red"
tag[2].style.fontStyle = "italic"
tag[2].style.color = "blue"
tag[1].style.backgroundColor = "green"
</script>
</html>
Out
Date 14-09-2022
document.getElementById():- get elements id is a function
which is used to faced the data form the documents objects by
using id.
It will return only one data.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Day 2 document.getElementById</title>
</head>
<body>
<h1 id="heading1">html</h1>
<h1 id="heading2">css</h1>
<h1 id="heading3">js</h1>
<script>
var h = document.getElementById("heading1")
console.log(h)
h.style.color = "red"
h.style.fontStyle = "italic"
var h1 = document.getElementById("heading2")
console.log(h1)
h1.style.border = "2px solid green"
</script>
</body>
</html>
Output
Eg3
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Day 2 document.getElementById</title>
</head>
<body>
<h1 id="heading1">html</h1>
<h1 id="heading2">css</h1>
<h1 id="heading3">js</h1>
<button onclick="col()">color</button>
<button onclick="col1()">change</button>
<script>
function col() {
var h = document.getElementById("heading1")
console.log(h)
h.style.color = "red"
h.style.fontStyle = "italic"
}
function col1() {
var h1 = document.getElementById("heading2")
console.log(h1)
h1.style.border = "2px solid green"
}
</script>
</body>
</html>
Out
{Onclick means call the button.}
3. document.getElementsByClassName();
This function targets and returns all the elements with
matching class value.
it returns HTML collection object and as to the access to
using index value.
Eg:-
<head>
<title>getElementsByClassName</title>
</head>
<body>
<h1 id="blue">1. Java</h1>
<h1 class="orange">2. Java-script</h1>
<h1 class="orange">3. SPRING</h1>
<h1 class="orange">4. REACT</h1>
<h1 id="blue">5.HTML </h1>
<button onclick="color()">orange</button>
<script>
function color() {
var ele = document.getElementsByClassName("orange");
console.log(ele);
for (i = 0; i <= 2; i++) {
ele[i].style.color = "orange";
}
}
</script>
</body>
Output
4) document.Query selectors:
Qurey selector function is used to target and element using
tag name, id value, class value.
In which whichever io available frist that is tag name id
value,
classvalue it returns that particular element.
<head>
<title>document.Query selectors:</title>
</head>
<body>
<h1>Document Object Model</h1>
<h1 id="js">java_script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernnet</h1>
<script>
var ele1 = document.querySelector("h1,#js,.fw");
var ele2 = document.querySelector("#js,h1,.fw");
var ele3 = document.querySelector(".fw,h1,#js");
console.log(ele1);
console.log(ele2);
console.log(ele3);
</script>
</body>
</html>
Output
Query selector all:
Query selector all function is used to target and element
using tag name, id value, class value
In which whichever io available first that is tag name id value
Class value it returns all element.
<head>
<title> Query selector all</title>
</head>
<body>
<h1>Document Object Model</h1>
<h1 id="js">java_script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernet</h1>
<script>
//fetching element w.r.t tag-name
var ele1 = document.querySelectorAll("h1");
console.log(ele1);
//fetching element w.r.t ID
var ele2 = document.querySelectorAll("#js");
console.log(ele2);
//fetching element w.r.t class
var ele3 = document.querySelectorAll(".fw");
console.log(ele3);
</script>
</body>
Output
ADVANCED Level Selector:
<head>
<title>ADVANCED</title>
</head>
<body>
<script>
var x = document.createElement("h1")
x.textContent = "Document object model"
x.id = "heading"
x.className = "js"
console.log(x)
</script>
</body>
Output
appendChild:
Append Child function is basically used to insert an element
inside another element as last child.
<head>
<title>ADVANCED</title>
</head>
<body>
<script>
// creating element
var x = document.createElement("h1")
// add the text created element
x.textContent = "Document object model"
// add attribute to the element
x.id = "heading"
x.className = "js"
// print the created element
console.log(x)
// document.write(x)
// adding one element to another element
document.body.appendChild(x)
</script>
</body>
Ex2
<head>
<title>Document</title>
</head>
<body>
<!-- <h1>DOM</h1>
<div>I am div tag</div> -->
<script>
var x = document.createElement("h1")
var y = document.createElement("div")
x.textContent = "DOM"
y.textContent = "i'm div tag"
console.log(x)
console.log(y)
document.body.appendChild(x)
document.body.appendChild(y)
</script>
</body>
Output
Ex2
<body>
<!-- <h1>DOM</h1>
<div>I am div tag</div> -->
<script>
var x = document.createElement("h1")
var y = document.createElement("div")
x.textContent = "DOM"
x.style.color = "red"
x.style.border = ("2px solid blue")
// s.style = "italic"
x.style.textAlign = "center"
y.textContent = "i'm div tag"
console.log(x)
console.log(y)
y.style.border = ("2px solid blue")
y.style.textAlign = "center"
y.style.color = "green"
document.body.appendChild(x)
document.body.appendChild(y)
</script>
</body>
Ex 4
For using function call
<body>
<!-- <h1>DOM</h1>
<div>I am div tag</div> -->
<button onclick="alp()">boom</button>
<script>
function alp() {
var x = document.createElement("h1")
var y = document.createElement("div")
x.textContent = "DOM"
x.style.color = "red"
x.style.border = ("2px solid blue")
// s.style = "italic"
x.style.textAlign = "center"
y.textContent = "i'm div tag"
console.log(x)
console.log(y)
y.style.border = ("2px solid blue")
y.style.textAlign = "center"
y.style.color = "green"
document.body.appendChild(x)
document.body.appendChild(y)
}
</script>
</body>
Op 1
Op2
Date 18-oct-2022
For clear the web pages
Using clear function
<body>
<!-- <h1>DOM</h1>
<div>I am div tag</div> -->
<button onclick="alp()">boom</button>
<button onclick="clr()">clear</button>
<script>
function alp() {
var x = document.createElement("h1")
var y = document.createElement("div")
x.textContent = "DOM"
x.style.color = "red"
x.style.border = ("2px solid blue")
// s.style = "italic"
x.style.textAlign = "center"
y.textContent = "i'm div tag"
console.log(x)
console.log(y)
y.style.border = ("2px solid blue")
y.style.textAlign = "center"
y.style.color = "green"
document.body.appendChild(x)
document.body.appendChild(y)
}
function clr() {
location.reload()
}
</script>
</body>
Out
Now this example using external js file using
Html file
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>Java</li>
<li>React Js</li>
<li>Angular js</li>
</ul>
</body>
<script src="./AppDom.js"></script>
Js file
var ul = document.createElement("ul")
var l1 = document.createElement("li")
var l2 = document.createElement("li")
var l3 = document.createElement("li")
l1.textContent = "Java"
l1.style.color = "blue"
l1.style.backgroundColor = "green"
l2.textContent = "React js"
l2.style.color = "orange"
l2.style.backgroundColor = "gray"
l3.textContent = "Angular js"
l3.style.color = "red"
l3.style.backgroundColor = "green"
document.body.appendChild(l1)
document.body.appendChild(l2)
document.body.appendChild(l3)
ul.appendChild(l1)
ul.appendChild(l2)
ul.appendChild(l3)
console.log(ul)
Output
Without any code in html file
<head>
<title>Document</title>
</head>
<body>
</body>
<script src="./AppDom.js"></script>
Js file
var ul = document.createElement("ul")
var l1 = document.createElement("li")
var l2 = document.createElement("li")
var l3 = document.createElement("li")
l1.textContent = "Java"
l1.style.color = "blue"
l1.style.backgroundColor = "green"
l2.textContent = "React js"
l2.style.color = "orange"
l2.style.backgroundColor = "gray"
l3.textContent = "Angular js"
l3.style.color = "red"
l3.style.backgroundColor = "green"
document.body.appendChild(l1)
document.body.appendChild(l2)
document.body.appendChild(l3)
ul.appendChild(l1)
ul.appendChild(l2)
ul.appendChild(l3)
console.log(ul)
document.body.appendChild(ul)
Output
Insert adjacent element function :- if you want to add the
element in all the 4th adjacent sides we use insert element
function.
Inside adjacent inline function capable of taking two
arguments
Position
Adding element
<head>
<title>Document</title>
<style>
#heading {
border: 2px solid red;
}
</style>
</head>
<body>
<h1 id="heading">Laptop</h1>
<!-- <button></button> -->
<script>
// created an element
var h2 = document.createElement("h1")
h2.textContent = "Processor"
console.log(h2)
// var h3 = document.createElement("h1")
// h2.textContent = "ram"
// console.log(h3)
// var h4 = document.createElement("h1")
// h4.textContent = "color"
// console.log(h4)
// var h5 = document.createElement("h1")
// h5.textContent = "barnd"
// console.log(h5)
// target the element
var x = document.getElementById("heading")
// insert element in adjacent sides
// x.insertAdjacentElement("beforebegin", h2)
// x.insertAdjacentElement("afterend", h2)
// x.insertAdjacentElement("afterbegin", h4)
x.insertAdjacentElement("beforeend", h2)
</script>
</body>
Date :- 20-10-2022
Clone node function:-
Clone node of true
This function basically used to created a copy of an
element its along with children .
<head>
<title>Clone Node true</title>
</head>
<body>
<body>
<div>
<ul id="ul">
<li>Java</li>
<li>Java-script</li>
<li>React-js</li>
<li>Hibernet</li>
<li>Spring</li>
</ul>
</div>
<div id="d2">
</div>
<script>
// target the element
var ul = document.getElementById("ul");
var div = document.getElementsByTagName("div");
// created the clone node
var cloneUl = ul.cloneNode(true);
// add created clone element to the element another element
div[1].appendChild(cloneUl);
console.log(cloneUl);
</script>
</body>
</body>
Output
Clone node of false
This function basically used to created a copy an element
its ignores the child tag.
<head>
<title>Clone Node true</title>
</head>
<body>
<body>
<div>
<ul id="ul">
<li>Java</li>
<li>Java-script</li>
<li>React-js</li>
<li>Hibernet</li>
<li>Spring</li>
</ul>
</div>
<div id="d2">
</div>
<script>
// target the element
var ul = document.getElementById("ul");
var div = document.getElementsByTagName("div");
// created the clone node
var cloneUl = ul.cloneNode(false);
// add created clone element to the element another element
div[1].appendChild(cloneUl);
console.log(cloneUl);
</script>
</body>
Output
Project 1. ScrollBar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store data & fitter the data</title>
<style>
#myinput {
width: 100%;
}
table {
border: 2px solid black;
width: 100%;
}
#head {
display: inline-block;
}
.header th {
width: 500px;
border: 2px solid black;
background-color: rgb(242, 117, 8);
}
tr td {
width: 500px;
border: 2px solid black;
background-color: rgb(215, 167, 11);
}
tr td {
width: 500px;
border: 2px solid black;
}
button {
/* width: 50px;
text-align: center;
display: inline-block; */
background-color: bisque;
color: red;
}
</style>
</head>
<body>
<!-- created a search funtion -->
<input type="text" name="" id="myinput" placeholder="names.."
onkeyup="searchfun()"><br><br>
<!-- Created a reset button -->
<button onclick="reset()">Reset</button><br><br>
<!-- created a table -->
<table id="mytable">
<tr class="header">
<th>Name</th>
<th>Degree</th>
<th>Profession</th>
</tr>
<tr>
<td>Rahul Kumar</td>
<td>BE</td>
<td>Full Stack Developer</td>
</tr>
<tr>
<td>Ashutosh Raj</td>
<td>BE</td>
<td>Forntend</td>
</tr>
<tr>
<td>Deepak Panday</td>
<td>BE</td>
<td>Backend</td>
</tr>
<tr>
<td>Chandan Kumar</td>
<td>BBA</td>
<td>SalesMan</td>
</tr>
<tr>
<td>Rahul Niranjan</td>
<td>BE</td>
<td>AM</td>
</tr>
<tr>
<td>Neeraj Panday</td>
<td>msc</td>
<td>Backend</td>
</tr>
</table>
<script>
function searchfun() {
let filter =
document.getElementById("myinput").value.toUpperCase();
let mytable = document.getElementById("mytable");
let tr = mytable.getElementsByTagName('tr')
for (var i = 1; i < tr.length; i++) {
let td = tr[i].getElementsByTagName('td')[0];
if (td) {
let text = td.textContent || td.innerHTML;
if (text.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = " ";
} else {
tr[i].style.display = "none"
}
}
}
function reset() {
location.reload();
}
</script>
</body>
</html>
Out
RemoveChild:-
removeChild function is used to remove child element of
particular element.
<head>
<title>removeChild for uesing Js</title>
</head>
<body>
<div id="d1">
<ul id="ul">
<li>Java</li>
<li>J2ee</li>
<li id="li">React-js</li>
<li>Node-Js</li>
<li>Spring</li>
</ul>
</div>
<script>
var ul = document.getElementById("ul");
var li = document.getElementById("li");
ul.removeChild(li);
</script>
</body>
</html>
Output:-
events:
Event is basically an action perform.
For respective event handler should be attached.
<head>
<title>Events</title>
</head>
<body>
<!-- Events using Java-Script -->
<h1>Events using Java-Script</h1>
<button id="btn">Cliclk me!</button>
<script>
var button = document.getElementById("btn");
button.onclick = display;
function display() {
alert("Events using Java-Script")
}
</script>
</body>
Output:-
Anonymous function
<head>
<title>Events</title>
</head>
<body>
<!-- Events using Java-Script -->
<h1>Events using Java-Script</h1>
<button id="btn">Cliclk me!</button>
<script>
var button = document.getElementById("btn");
button.onclick = function() {
alert("Events using Java-Script")
}
</script>
</body>
</html>
Out
Project 2. Local Storage Java Script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Local Storage Java-Script</title>
<style>
input,
button {
padding: 10px;
height: 30px;
}
fieldset {
margin-bottom: 20px;
color: rgb(228, 24, 24);
background-color: rgb(225, 225, 51);
text-align: center;
}
</style>
</head>
<body>
<h1>Local Storage-Java Script</h1>
<fieldset>
<legend>Insert Data</legend>
<input type="text" placeholder="enter key" id="inputkey">
<input type="text" placeholder="enter value" id="inputvalue">
<button type="button" id="btn">Submit</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="output"></div>
</fieldset>
<script>
const inputkey = document.getElementById("inputkey");
const inputvalue = document.getElementById("inputvalue");
const btn = document.getElementById("btn");
const output = document.getElementById("output");
btn.onclick = function() {
const key = inputkey.value;
const value = inputvalue.value;
if (key && value) {
localStorage.setItem(key, value)
location.reload();
}
}
for (i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
output.innerHTML += `${key}: ${value} <br>`
}
</script>
</body>
</html>
Output:-
Output2:-
