Skip to content

Commit efdceec

Browse files
Prakhar0013Prakhar0013
committed
DOM Complete
1 parent 16639f1 commit efdceec

5 files changed

Lines changed: 202 additions & 14 deletions

File tree

‎06_dom/one.html‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎DOM/four.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body style="background-color: #212121; color:#fff">
9+
<ul class="language">
10+
<li>Javascript</li>
11+
</ul>
12+
</body>
13+
<script>
14+
function addLanguage(langName){
15+
const li= document.createElement("li");
16+
li.innerText= `${langName}`;
17+
document.querySelector('.language').appendChild(li)
18+
}
19+
addLanguage("Python");
20+
addLanguage("Java");
21+
function addOptiLanguage(langName){
22+
const li = document.createElement("li");
23+
li.appendChild(document.createTextNode(langName));
24+
document.querySelector('.language').appendChild(li);
25+
}
26+
addOptiLanguage("C++");
27+
28+
//Edit
29+
const secondLang=document.querySelector('li:nth-child(2)')
30+
//secondLang.innerHTML="Mojo"
31+
const newli= document.createElement("li");
32+
newli.innerText="Mojo";
33+
secondLang.replaceWith(newli);
34+
35+
//edit
36+
const firstLang= document.querySelector("li:first-child")
37+
firstLang.outerHTML="<li>Typescript</li>";
38+
39+
//delete
40+
const lastLang= document.querySelector("li:last-child");
41+
lastLang.remove();
42+
</script>
43+
</html>

‎DOM/one.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DOM Learning</title>
6+
<style>
7+
.bg-black {
8+
background-color: black;
9+
color: white;
10+
}
11+
</style>
12+
</head>
13+
<body class="bg-black">
14+
<div>
15+
<h1 id="title" class="heading">DOM Learning <span style="display: none;">test text</span> </h1>
16+
<h2>Lorem ipsum dolor sit</h2>
17+
<h2>Lorem ipsum dolor sit</h2>
18+
<h2>Lorem ipsum dolor sit</h2>
19+
<p>Lorem ipsum dolor sit amet.</p>
20+
21+
<ul>
22+
<li class="li-item">one</li>
23+
<li class="li-item">two</li>
24+
<li class="li-item">three</li>
25+
</ul>
26+
</div>
27+
</body>
28+
</html>
29+
<!--
30+
document.getElementById('title').getAttribute('id')
31+
document.getElementById('title').setAttribute('class','test')
32+
This overrides current value of class.
33+
To include both class and test, use the following code:
34+
document.getElementById('title').setAttribute('class', document.getElementById('title').getAttribute('class') + ' test');-->
35+
36+
<!--
37+
We can set different styles as well like:
38+
title.style.backgroundColor= 'green'
39+
title.style.padding= "15px"
40+
title.style.borderRadius="15px"-->
41+
42+
<!--
43+
There is a difference between innerText and textContent
44+
innerText returns the visible text, while textContent returns all text including hidden elements.
45+
innerHTML gives html content-->
46+
47+
<!--
48+
While accessing the classes, ids, we usually get HTML Collection, not an array or a single elemwent.
49+
To convert HTML Collection to an array, we can use:
50+
Array.from(document.getElementsByClassName('className'))
51+
52+
querySelector and querySelectorAll are also useful.
53+
document.querySelector('.className') // returns first element with className
54+
55+
const myul=document.querySelector('ul')
56+
const turnGreen= myul.querySelector('li')
57+
turnGreen.style.backgroundColor= "green"
58+
59+
While using querySelectorAll, we get a node list
60+
61+
const myul=document.querySelector("ul")
62+
undefined
63+
64+
myul.querySelectorAll("li")
65+
NodeList(3) [li, li, li]0: li1: li2: lilength: 3[[Prototype]]: NodeListentries: ƒ entries()forEach: ƒ forEach()item: ƒ item()keys: ƒ keys()length: (...)values: ƒ values()constructor: ƒ NodeList()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.toStringTag): "NodeList"get length: ƒ length()[[Prototype]]: Object
66+
67+
const liList= myul.querySelectorAll("li")
68+
undefined
69+
70+
liList.style.color= "green"
71+
VM1333:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')
72+
at <anonymous>:1:19
73+
(anonymous) @ VM1333:1
74+
75+
liList[0].style.color= "green"
76+
'green'
77+
78+
So, we can access each element in the NodeList and set styles or attributes as needed.
79+
80+
const listItem=document.getElementByClassName("li-item")
81+
If we try to access a class using getElementByClassName, it will return an HTML Collection, not a single element.
82+
We cannot access or traverse through
83+
84+
To traverse through the HTML Collection, we can use a for loop or Array.from() method:
85+
86+
const liclass= document.getElementsByClassName("li-item")
87+
for(let i=0;i<liclass.length;i++){
88+
console.log(liclass[i])
89+
}
90+
91+
Array.from(liclass).forEach((item) => {
92+
console.log(item);
93+
});
94+
const convArray= Array.from(liclass)
95+
convArray.forrEach(function(li){
96+
li.style.color= "green"
97+
})
98+
-->

‎DOM/three.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DOM</title>
7+
</head>
8+
<body style="color: white; background-color: #212121;">
9+
10+
<script>
11+
const div= document.createElement("div");
12+
console.log(div);
13+
div.className="main"
14+
div.id=Math.round(Math.random()*10+1)
15+
div.setAttribute("title","Generated Title")
16+
div.style.backgroundColor="green"
17+
div.style.padding="12px"
18+
//div.innerText="Just Testing"
19+
const text= document.createTextNode("Just Testing");
20+
div.appendChild(text);
21+
//Both approaches are valid but second more preferred as it doesn't override existing content.
22+
document.body.appendChild(div);
23+
</script>
24+
</body>
25+
</html>

‎DOM/two.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DOM</title>
7+
</head>
8+
<body style="background-color: #212121; color:#fff">
9+
<div class="parent">
10+
<div class="day">Monday</div>
11+
<div class="day">Tuesday</div>
12+
<div class="day">Wednesday</div>
13+
<div class="day">Thursday</div>
14+
</div>
15+
<script>
16+
const parent= document.querySelector('.parent')
17+
//console.log(parent);
18+
//console.log(parent.children[0].innerHTML);
19+
20+
// for(let i=0;i<parent.children.length;i++){
21+
// console.log(parent.children[i].innerHTML);
22+
// }
23+
parent.children[1].style.color="orange"
24+
// console.log(parent.firstElementChild)
25+
// console.log(parent.lastElementChild)
26+
27+
const dayOne= document.querySelector('.day')
28+
console.log(dayOne)
29+
console.log(dayOne.parentElement)
30+
console.log(dayOne.nextElementSibling)
31+
32+
console.log("NODES: ", parent.childNodes)
33+
34+
</script>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)