Scribd
Upload
146 views

Dom Notes

1) 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. 2) When a web page is loaded, the browser creates a Document Object Model of the page represented as a tree of Objects. 3) The DOM SELECTORS like getElementsByTagName(), getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() are used to target elements in the DOM tree.

Uploaded by

subhanshu sahu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
146 views

Dom Notes

1) 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. 2) When a web page is loaded, the browser creates a Document Object Model of the page represented as a tree of Objects. 3) The DOM SELECTORS like getElementsByTagName(), getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() are used to target elements in the DOM tree.

Uploaded by

subhanshu sahu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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:-

You might also like