Skip to content

Commit 0719131

Browse files
Banti ShawBanti Shaw
Banti Shaw
authored and
Banti Shaw
committed
Dom manipulation
1 parent fb7ce8c commit 0719131

2 files changed

Lines changed: 156 additions & 0 deletions

File tree

‎DOM-manipulation/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Javascript Practice</title>
8+
</head>
9+
<body>
10+
<h1>Javascript Practice</h1>
11+
<p id="demo" idatr="demoId"></p>
12+
13+
<form id="frm1" action="">
14+
First name: <input type="text" name="fname" value=""><br>
15+
Last name: <input type="text" name="lname" value=""><br><br>
16+
<input type="submit" value="Submit" id="submitForm">
17+
</form>
18+
19+
<div id="parntId">
20+
<p class="demo1" id="chldId" classatr="abcClass"></p>
21+
<p class="demo1" id="newChldId" classatr="abcClass">Hi, New Child</p>
22+
</div>
23+
<div></div>
24+
<a href="www.google.com" target="_blank" id="hrefLink">Text link</a>
25+
26+
<button id="clickId">Remove Node</button>
27+
28+
29+
30+
31+
32+
<script src="./index.js"></script>
33+
</body>
34+
</html>

‎DOM-manipulation/index.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* Access by tag, class, ID */
2+
document.getElementById('demo').innerHTML = 'Hello Javascript!! I am Id';
3+
document.getElementsByClassName('demo1')[0].innerHTML = 'Hello, I am a class';
4+
document.getElementsByTagName('div')[1].innerHTML = 'Hello i am a div';
5+
// const paragraph = document.querySelector("p");
6+
// setTimeout(() => {
7+
// paragraph.innerHTML = 'Hello this is change to query selector';
8+
// paragraph.style.backgroundColor = 'red';
9+
// }, 2000)
10+
11+
12+
/**** Attribite ****/
13+
// const attributes = paragraph.attributes;
14+
// console.log(attributes[1])
15+
// let link = document.getElementById('hrefLink');
16+
// link.removeAttribute("target");
17+
// link.setAttribute('href', 'https://www.gmail.com');
18+
// console.log(link.getAttribute('href'))
19+
// let x = document.getElementById('hrefLink');
20+
// x.href = 'https://www.gmail.com';
21+
22+
23+
/**** Custom Tag creation ****/
24+
let sec = document.createElement('section');
25+
sec.setAttribute('id', 'secId');
26+
let secP = document.createElement('p');
27+
let secPTxt = document.createTextNode('Custom p tag text node');
28+
secP.appendChild(secPTxt);
29+
let secDiv = document.createElement('div');
30+
let secDivNode = document.createTextNode('Custom div tag text node')
31+
secDiv.appendChild(secDivNode);
32+
sec.appendChild(secP);
33+
sec.appendChild(secDiv);
34+
document.body.append(sec);
35+
36+
/**** Remove child node ****/
37+
// let pId = document.getElementById('demo');
38+
// pId.parentNode.removeChild(pId);
39+
// let prId = document.getElementById('parntId');
40+
// let chId = document.getElementById('chldId');
41+
// let btnClick = document.getElementById('clickId');
42+
// btnClick.addEventListener('click', function(){
43+
// prId.removeChild(chId);
44+
// })
45+
46+
47+
/**** Replace node ****/
48+
// let getParntId = document.getElementById('parntId');
49+
// let getChild = document.getElementById('chldId');
50+
// let getNewChild = document.getElementById('newChldId');
51+
// let btnClick = document.getElementById('clickId');
52+
// btnClick.addEventListener('click', function(){
53+
// getParntId.replaceChild(getChild, getNewChild);
54+
// })
55+
56+
57+
/**** Event handler ****/
58+
let btnClick = document.getElementById('clickId');
59+
// btnClick.onclick = function(){
60+
// console.log('Onclick event call')
61+
// }
62+
btnClick.style.backgroundColor = 'red';
63+
btnClick.style.color = 'white';
64+
btnClick.style.padding = '10px';
65+
btnClick.style.border = 'none';
66+
// btnClick.onmouseover = function(){
67+
// this.innerHTML = 'Remove Tests';
68+
// btnClick.style.backgroundColor = 'green';
69+
// }
70+
// btnClick.onmouseout = function(){
71+
// this.innerHTML = 'Remove Node';
72+
// btnClick.style.backgroundColor = 'red';
73+
// }
74+
// btnClick.addEventListener('click', function(){
75+
// let xtrTxt = document.createTextNode(' Submit')
76+
// btnClick.appendChild(xtrTxt);
77+
// // })
78+
// btnClick.addEventListener('mousedown', function(){
79+
// btnClick.style.backgroundColor = 'green';
80+
// })
81+
// btnClick.addEventListener('mouseup', function(){
82+
// btnClick.style.backgroundColor = 'red';
83+
// })
84+
85+
btnClick.addEventListener('focusin', function(){
86+
btnClick.style.border = '1px solid #000';
87+
})
88+
btnClick.addEventListener('focusout', function(){
89+
btnClick.style.border = 'none';
90+
})
91+
92+
93+
94+
/**** Query selector ****/
95+
// let x = document.querySelectorAll('p')[0].outerHTML;
96+
// const x = document.forms["frm1"];
97+
// console.log(x);
98+
99+
// let btnClick = document.getElementById('clickId');
100+
// btnClick.onclick = function(){
101+
// let x = document.scripts[0];
102+
// x.setAttribute('src', 'https://www.gmail.com');
103+
// }
104+
105+
106+
/**** Form Validation ****/
107+
// let btnClick = document.getElementById('submitForm');
108+
// btnClick.onclick = function(){
109+
// let x = document.forms['frm1']['fname'].value;
110+
// if(!!!x){
111+
// alert('please enter value')
112+
// }
113+
// return false;
114+
// }
115+
116+
117+
118+
119+
120+
121+
122+

0 commit comments

Comments
 (0)