Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit dcf62ea

Browse files
Wcoder547Wcoder547
committed
Dome done
1 parent 50c839c commit dcf62ea

File tree

3 files changed

+121
-0
lines changed

3 files changed

+121
-0
lines changed

‎Dom/2nd.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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>Create a new elemenet</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+
16+
<script>
17+
// console.log("is js working");
18+
const parent = document.querySelector(".parent");
19+
// console.log(parent);
20+
// console.log(parent.children);
21+
// console.log(parent.children[0]);
22+
23+
for (let i = 0; i < parent.children.length; i++) {
24+
// console.log(parent.children[i]);
25+
}
26+
// console.log(parent.children[0].innerHTML);
27+
28+
// console.log(parent.firstElementChild);
29+
// console.log(parent.lastElementChild);
30+
31+
const firstElem = document.querySelector(".day");
32+
//console.log(firstElem);
33+
// console.log(firstElem.children); //length is 0
34+
35+
//console.log(firstElem.parentElement);
36+
//console.log(firstElem.nextElementSibling.nextElementSibling); //wednesday
37+
//console.log(firstElem.lastElementChild); //null
38+
// console.log(`Nodes ${parent.childNodes}`);
39+
console.log("Nodes", parent.childNodes);
40+
</script>
41+
</body>
42+
</html>

‎Dom/3rd.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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>Creating a new elemenet</title>
7+
</head>
8+
<body style="background-color: #212121; color: #fff">
9+
<div>hello world</div>
10+
11+
<script>
12+
//console.log("hello world");
13+
const div = document.createElement("div");
14+
console.log(div);
15+
div.className = "main";
16+
div.id = Math.round(Math.random() * 10 + 1);
17+
//console.log(div.id);
18+
div.setAttribute("title", "waseem_title");
19+
// div.innerText = "waseem akram";
20+
const textName = document.createTextNode("waseem akram");
21+
div.style.backgroundColor = "green";
22+
div.style.padding = "10px";
23+
// div.appendChild(textName)
24+
div.appendChild(document.createTextNode("waseem akram"));
25+
document.body.appendChild(div);
26+
</script>
27+
</body>
28+
</html>

‎Dom/4th.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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>Edit | Remove Element</title>
7+
</head>
8+
<body style="background-color: #212121; color: #fff">
9+
<ul class="language">
10+
<li class="js">Javascript</li>
11+
</ul>
12+
13+
<script>
14+
console.log("hello world");
15+
16+
function addLI(langname) {
17+
const li = document.createElement("li");
18+
li.innerHTML = `${langname}`;
19+
document.querySelector(".language").appendChild(li);
20+
}
21+
addLI("python");
22+
addLI("Rust");
23+
24+
function addTwoLi(langname) {
25+
const li = document.createElement("li");
26+
li.appendChild(document.createTextNode(langname));
27+
document.querySelector(".language").appendChild(li);
28+
}
29+
addTwoLi("Ruby");
30+
addTwoLi("dynamic Li");
31+
32+
//Edit
33+
const secondLanguage = document.querySelector("li:nth-child(2)");
34+
// console.log(secondLanguage);
35+
const newLi = document.createElement("li");
36+
newLi.textContent = "PHP";
37+
// console.log(newLi);
38+
secondLanguage.replaceWith(newLi);
39+
// console.log(secondLanguage);
40+
41+
//Edit
42+
const firstLang = document.querySelector("li:first-child");
43+
firstLang.outerHTML = "<li>first language</li>";
44+
45+
//Remove..
46+
47+
const lastLang = document.querySelector("li:last-child");
48+
lastLang.remove();
49+
</script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)