-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
122 lines (98 loc) · 3.74 KB
/
Copy pathindex.js
File metadata and controls
122 lines (98 loc) · 3.74 KB
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
/* Access by tag, class, ID */
document.getElementById('demo').innerHTML = 'Hello Javascript!! I am Id';
document.getElementsByClassName('demo1')[0].innerHTML = 'Hello, I am a class';
document.getElementsByTagName('div')[1].innerHTML = 'Hello i am a div';
// const paragraph = document.querySelector("p");
// setTimeout(() => {
// paragraph.innerHTML = 'Hello this is change to query selector';
// paragraph.style.backgroundColor = 'red';
// }, 2000)
/**** Attribite ****/
// const attributes = paragraph.attributes;
// console.log(attributes[1])
// let link = document.getElementById('hrefLink');
// link.removeAttribute("target");
// link.setAttribute('href', 'https://www.gmail.com');
// console.log(link.getAttribute('href'))
// let x = document.getElementById('hrefLink');
// x.href = 'https://www.gmail.com';
/**** Custom Tag creation ****/
let sec = document.createElement('section');
sec.setAttribute('id', 'secId');
let secP = document.createElement('p');
let secPTxt = document.createTextNode('Custom p tag text node');
secP.appendChild(secPTxt);
let secDiv = document.createElement('div');
let secDivNode = document.createTextNode('Custom div tag text node')
secDiv.appendChild(secDivNode);
sec.appendChild(secP);
sec.appendChild(secDiv);
document.body.append(sec);
/**** Remove child node ****/
// let pId = document.getElementById('demo');
// pId.parentNode.removeChild(pId);
// let prId = document.getElementById('parntId');
// let chId = document.getElementById('chldId');
// let btnClick = document.getElementById('clickId');
// btnClick.addEventListener('click', function(){
// prId.removeChild(chId);
// })
/**** Replace node ****/
// let getParntId = document.getElementById('parntId');
// let getChild = document.getElementById('chldId');
// let getNewChild = document.getElementById('newChldId');
// let btnClick = document.getElementById('clickId');
// btnClick.addEventListener('click', function(){
// getParntId.replaceChild(getChild, getNewChild);
// })
/**** Event handler ****/
let btnClick = document.getElementById('clickId');
// btnClick.onclick = function(){
// console.log('Onclick event call')
// }
btnClick.style.backgroundColor = 'red';
btnClick.style.color = 'white';
btnClick.style.padding = '10px';
btnClick.style.border = 'none';
// btnClick.onmouseover = function(){
// this.innerHTML = 'Remove Tests';
// btnClick.style.backgroundColor = 'green';
// }
// btnClick.onmouseout = function(){
// this.innerHTML = 'Remove Node';
// btnClick.style.backgroundColor = 'red';
// }
// btnClick.addEventListener('click', function(){
// let xtrTxt = document.createTextNode(' Submit')
// btnClick.appendChild(xtrTxt);
// // })
// btnClick.addEventListener('mousedown', function(){
// btnClick.style.backgroundColor = 'green';
// })
// btnClick.addEventListener('mouseup', function(){
// btnClick.style.backgroundColor = 'red';
// })
btnClick.addEventListener('focusin', function(){
btnClick.style.border = '1px solid #000';
})
btnClick.addEventListener('focusout', function(){
btnClick.style.border = 'none';
})
/**** Query selector ****/
// let x = document.querySelectorAll('p')[0].outerHTML;
// const x = document.forms["frm1"];
// console.log(x);
// let btnClick = document.getElementById('clickId');
// btnClick.onclick = function(){
// let x = document.scripts[0];
// x.setAttribute('src', 'https://www.gmail.com');
// }
/**** Form Validation ****/
// let btnClick = document.getElementById('submitForm');
// btnClick.onclick = function(){
// let x = document.forms['frm1']['fname'].value;
// if(!!!x){
// alert('please enter value')
// }
// return false;
// }