-
Notifications
You must be signed in to change notification settings - Fork 3
/
50 DOM Manipulation.html
132 lines (107 loc) · 4.99 KB
/
50 DOM Manipulation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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>DOM Manipulation</title>
<link rel="stylesheet" href="50style.css">
</head>
<body>
<div class="container" id="container">
<div class="box" id="box-1">box-1</div>
<div class="box" id="box-2">box-2</div>
<div class="box random" id="box-3">box-3</div>
<div class="box" id="box-4">box-4</div>
</div>
<script>
//DOM : Document object model
//DOM Manipulation: how we access,modify,change,add and manipulate html elements using Javascript
//we can manipulate html and css using javascript
//->What is DOM?
/* ANS:
->when a page is loaded the browser creates a document object model of the page
->the html DOM model is constructed as a tree of objects {document -> html ->head and body etc. see image on google}
*/
//Accessing ELEMENTS:
/*
Finding HTML elements by id : document.getElementByld("intro");
Finding HTML elements by tag name : document.getelementsByTagName("p");
Finding HTML elements by class name : document.getElementsByClassName("intro);
Finding HTML elements by CSS selectors : document.querySelectorAll("p.intro");
*/
const b=document.body; //selects body
console.log("body:",b); //prints whole code inside body
//b.style.backgroundColor="green";
const box2=document.getElementById("box-2");
console.log("box-2:",box2);
const divs=document.getElementsByTagName("div"); //selects all div's
console.log("All Divs: ",divs);
const boxes=document.getElementsByClassName("box");
console.log("Elements With Class box",boxes)
const random=document.querySelector(".container .random"); //selects random class which is inside container class
console.log("random class inside container class",random);
//const randomAll=document.querySelectorAll(".container .random") //selects all random classes inside container class
//Modifying Elements
/*
->changing HTML Content using innerHTML:
document.getElementByld(id).innerHTML= new HTML
->changing HTML attributes value :
document.getElementByid("myImage").src = "landscape.jpg";
document.getElementByld("p2").style.color = "blue";
->modifying class in HTML
element.classList.add("mystyle");
element.classList.remove("mystyle");
element.classList.toggle("mystyle");*/
const box1=document.getElementById("box-1");
box1.innerHTML="Hello Box-1";
box2.innerHTML="<h1>BOX2</h1>";
//these things have already seen in css
box2.style.backgroundColor="purple";
//using classes
//giving box1 class round-border
//const box1=document.getElementById("box-1");
//box1.classList.add("round-border");
//adding round-border class to all boxes using for loop
for(let i=0; i<boxes.length;i++){
boxes[i].classList.add('round-border')
}
//removing class round-border form box-1
box1.classList.remove("round-border");
//-> Creating a new html element
/*
We can create a new Element using the createElement() method of the document. We can append this
new Element (node) inside any other element.
const para = document.createElement("p");
const element = document.getElementByld("div1");
element.appendChild(para);
*/
const newP= document.createElement('p');
newP.innerText="This is new paragraph";
//now this paragraph is create in memory but its not attached to DOM tree yet
//putting this paragraph inside container
const container =document.getElementById("container");
container.appendChild(newP);
//now this new p is inside container
//we can also attatch box class to it
newP.classList.add('box','round-border');
//changing fontsize of newP
newP.style.fontSize="1.2rem";
//creating h3 element and putting it inside container and adding box class to it
const newH3=document.createElement('h3');
newH3.innerText="This is H3 Element";
//getting container above on line number 102
container.appendChild(newH3);
newH3.classList.add("box")
//adding button element which will toggle the class to newH3
const newButton=document.createElement("button");
newButton.innerText="Toggle Class To H3";
container.appendChild(newButton);
newButton.addEventListener("click",()=>{
newH3.classList.toggle('round-border')
})
// innerHTML: we can put any new html element inside it
// innerText : we can only add or change its text
</script>
</body>
</html>