-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDOM.js
405 lines (275 loc) · 14 KB
/
DOM.js
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
/*
What is DOM ?
Document object model is an API for manipulating htlm document.DOM represent html document as a tree of nodes.DOM provoide a function that allow you to add , remove , and modify part of the document effectivly
A document as a hierarchy of nodes=>
The DOM represents an HTML document as a hierarchy of nodes. Consider the following HTML document:
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>
In this DOM tree, the document is the root node. The root node has one child node which is the <html> element. The <html> element is called the document element.
selecting Elements=>
1) select element by id=>
The document.getElementById() method returns an Element object that represents an HTML element with an id that matches a specified string.
If the document has no element with the specified id, the document.getElementById() returns null.Because the id of an element is unique within an HTML document, the document.getElementById() is a quick way to access an element
const element = document.getElementById(id);
example=>
<html>
<head>
<title>JavaScript getElementById() Method</title>
</head>
<body>
<p id="message">A paragraph</p>
</body>
</html>
const p = document.getElementById('message');
console.log(p);
The document.getElementById() returns a DOM element specified by an id or null if no matching element found.
If multiple elements have the same id, even though it is invalid, the getElementById() returns the first element it encounters.
2)select element by name=>
Every element on an HTML document may have a name attribute:
<input type="radio" name="language" value="JavaScript">
To get all elements with a specified name, you use the getElementsByName() method of the document object:
let elements = document.getElementsByName(name);
<!DOCTYPE html>
<html>
<body>
<h1>The Document Object</h1>
<h2>The document.getElementsByName Method</h2>
Cats:
<input name="animal" type="checkbox" value="Cats">
Dogs:
<input name="animal" type="checkbox" value="Dogs">
<p>Number of elements with name="animal" is:</p>
<p id="demo"></p>
<script>
let num = document.getElementsByName("animal").length;
document.getElementById("demo").innerHTML = num;
</script>
</body>
</html>
3)select element by tagName=>
The getElementsByTagName() method accepts a tag name and returns a live HTMLCollection of elements with the matching tag name in the order which they appear in the document.
The following illustrates the syntax of the getElementsByTagName():
let elements = document.getElementsByTagName(tagName);
<body>
<h1>JavaScript getElementsByTagName() Demo</h1>
<h2>First heading</h2>
<p>This is the first paragraph.</p>
<h2>Second heading</h2>
<p>This is the second paragraph.</p>
<h2>Third heading</h2>
<p>This is the third paragraph.</p>
<button id="btnCount">Count H2</button>
<script>
let btn = document.getElementById('btnCount');
btn.addEventListener('click', () => {
let headings = document.getElementsByTagName('h2');
console.log(`The number of H2 tags: ${headings.length}`)
});
</script>
</body>
getElementsByClassName()=>
The getElementsByClassName() method returns an array-like of objects of the child elements with a specified class name
<body>
<div>
<header>
<ul id="menu">
<li class="item">mango</li>
<li class="item">apple</li>
<li class="item">banana</li>
</ul>
</header>
</div>
<footer>
<p class="footer">example 1 </p>
</footer>
<script>
// let menu = document.getElementById('menu');
let items = document.getElementsByClassName('footer');
let data = [].map.call(items, item => item.textContent);
console.log(data);
</script>
</body>
CSS selector=>
The querySelector() finds the first element that matches a CSS selector or a group of CSS selectors.
The querySelectorAll() finds all elements that match a CSS selector or a group of CSS selectors.
A CSS selector defines elements to which a CSS rule applies.
const heading = document.querySelector('h1'); //element selector
const paragraph = document.querySelector('p');
const listItems = document.querySelectorAll('li');
const box = document.querySelector('.box'); //class selector
const button = document.querySelector('#myButton'); //id selector
const input = document.querySelector('#myInput');
const link = document.querySelector('a');
Manipulating elements
heading.textContent = 'Hello, Query Selector!';
paragraph.style.color = 'blue';
listItems.forEach((item, index) => {
item.textContent = `Modified Item ${index + 1}`;
});
box.style.backgroundColor = 'yellow';
button.addEventListener('click', () => {
alert('Button Clicked!');
});
input.addEventListener('focus', () => {
input.value = 'enter value';
});
link.setAttribute('target', '_blank');
******************************triversing element******************************
1) Triversing element=>(parent node)
To get the parent node of a specified node in the DOM tree, you use the parentNode property:
let note = document.queryselector(".child");
console.log(note.parentNode);
2) next sibiling=>
To get the next sibling of an element, you use the nextElementSibling attribute:
let nextSibling = currentNode.nextElementSibling;
let current=document.queryselector(".current");
let next=current.nextElementSibling;
console.log(next);
3)chid node=>
Get the first child element
To get the first child element of a specified element, you use the firstChild property of the element:
let firstChild = parentElement.firstElemtChild;
To get last child
let lasthild=parentelement.lastElementChild;
*********************Manipulating elements*************************
1)Creating elements and appends elements=>
To create an HTML element, you use the document.createElement() method:
let element = document.createElement(htmlTag);
example=>
let div=document.createElement('div'); //create new element
div.innerHtml='<p>new p</p> //add child element
document.body.appendsChild(div); //append it into body
div.id="content"; // add id to Div
let text=document.createTextNode("thi sis first paragarph"); //add text to div
div.appendsChild(text);
const menu = document.querySelector('#menu'); //create ui
let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li); //add ui to element whose is is menu
2)The following example uses the appendChild() method to add three list items to the <ul> element:
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
3)create element vs innerHtml=>
However, using the innerHTML causes the web browsers to reparse and recreate all DOM nodes inside the div element. Therefore, it is less efficient than creating a new element and appending to the div. In other words, creating a new element and appending it to the DOM tree provides better performance than the innerHTML.
4)before()=>
The element.before() method allows you to insert one or more nodes before the element. The following shows the syntax of the before() method:
const p = document.querySelector('p');
// create a new h1 element
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';
// insert the h1 before the paragraph
p.before(h1);
5)after()=>
The element.after() method allows you to insert one or more nodes after the element.
const p = document.querySelector('p');
// create a new h1 element
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - after()';
// insert the h1 before the paragraph
p.after(h1);
6)replace child element=>
Use Node.replaceChild() to replace a child element of a node by a new element.
let fisrt=document.querySelector("#first-list");
let li=document.createElement("li");
li.textContent="java";
fisrt.replaceChild(li,fisrt.firstElementChild);
7)remove child element=>
To remove a child element of a node, you use the removeChild() method:
let fisrt=document.querySelector("#first-list");
fisrt.removeChild(fisrt.lastElementChild )
8)insert before first element child=>
To insert a node before another node as a child node of a parent node, you use the parentNode.insertBefore() method:
parentNode.insertBefore(newNode, existingNode);
let fisrt=document.querySelector("#first-list");
let li=document.createElement("li");
li.textContent="new";
fisrt.insertBefore(li , fisrt.firstElementChild)
9)insert after()=>
JavaScript DOM provides the insertBefore() method that allows you to insert a new node after an existing node as a child node.
let fisrt=document.querySelector("#first-list");
let li=document.createElement("li");
li.textContent="last new";
fisrt.insertAfter(li , fisrt.firstElementChild)
*********************Managing Attributes************************
1)Introduction to the JavaScript setAttribute() method
To set a value of an attribute on a specified element, you use the setAttribute() method:
element.setAttribute(name, value);
let btn=document.querySelector("button");
btn.setAttribute('name' , 'send');
2)Introduction to the JavaScript getAttribute() method
To get the value of an attribute on a specified element, you call the getAttribute() method of the element:
let value = element.getAttribute(name);
let link=document.querySelector("#google");
if(link){
let tar=link.getAttribute("target");
console.log(tar);
}
3)Introduction to JavaScript removeAttribute() method
The removeAttribute() removes an attribute with a specified name from an element:
element.removeAttribute(name);
let link = document.querySelector('#js');
if (link) {
link.removeAttribute('target');
}
4)hasAttributes()=>
Use the hasAttribute() method to check if an element contains a specified attribute.
let link=document.querySelector("#google");
if(link){
let tar=link.hasAttribute("target");
console.log(tar);
}
***************************Styling**********************
1)Setting inline styles
To set the inline style of an element, you use the style property of that element:
element.style
element.style.color = 'red';
To completely override the existing inline style, you set the cssText property of the style object. For example:
element.style.cssText = 'color:red;background-color:yellow';
Or you can use the setAttribute() method:
element.setAttribute('style','color:red;background-color:yellow');
2)Introduction to the JavaScript className
The className is the property of an element that returns a space-separated list of CSS classes of the element as a string:
element.className
The following shows the classes of the ul element in the console window:
example=>let menu = document.querySelector('#menu');
console.log(menu.className); //vertical main
you can add existing class name with new
=>let menu = document.querySelector('#menu');
menu.className += ' new';
console.log(menu.className);
className returns a space-separated list of classes of an element as a string.
3)class list property:>
The classList is a read-only property of an element that returns a live collection of CSS classes:
const classes = element.classList;
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}
2) Add one or more classes to the class list of an element=>(add())
let div = document.querySelector('#content');
div.classList.add('info','visible','block');
3)remove elements classes=>(remove())
let div=document.queryselector("#id");
div.classList.remove("block");
4)Replace a classof an element=>(replace())
let div = document.querySelector('#content');
div.classList.replace('info','warning');
5)check if element has specified property=>(contains())
let div = document.querySelector('#content');
div.classList.contains('warning'); // true
*/