8000 js update · last-endcode/JavaScript-DOM@86fe96d · GitHub
[go: up one dir, main page]
Skip to content

Commit 86fe96d

Browse files
last-endcodelast-endcode
committed
js update
1 parent 3cf92dc commit 86fe96d

13 files changed

+206
-201
lines changed

‎01_getElementById.js

+20-16
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1-
// getElementById for element ID on html
2-
// u can apply style whatever u want
1+
// getElementById() for select only id on html
2+
// for giving effect too
33

4-
// u can use this style
5-
document.getElementById('title').style.color = 'red';
6-
7-
// but for multiple element prefer like this use variable
4+
// u should use declare variable because if multiple is very efisien
85
const title = document.getElementById('title');
9-
const btn = document.getElementById('btn');
6+
title.style.color = 'blue'; //change h1 title be blue
7+
title.style.textTransform = 'uppercase'; //be uppercase
8+
9+
// if not declare and use multiple method not efisien and code be long
10+
// document.getElementById('title').style.color = 'coral';
11+
// document.getElementById('title').style.textTransform = 'uppercase';
12+
13+
// container & btn
14+
const container = document.getElementById('container');
15+
const button = document.getElementById('btn');
1016

11-
// for title
12-
title.style.textTransform = 'UpperCase';
13-
title.style.color = 'blue';
17+
container.style.background = '#333';
18+
container.style.width = '400px';
1419

15-
// for btn
16-
btn.style.padding = '0.375rem 1.25rem';
17-
btn.style.background = '#333';
18-
btn.style.color = '#fff';
19-
btn.style.textDecoration = 'none';
20-
btn.style.textTransform = 'UpperCase';
20+
button.style.textTransform = 'uppercase';
21+
button.style.fontSize = '1.25rem';
22+
button.style.background = '#ddd';
23+
button.style.color = '#333';
24+
button.style.margin = '0.75rem';

‎02_getElementByTagName.js

+21-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
// getElementByTagName
2-
// node-list = array-like objecct
3-
// index, length property but not array methods
1+
// For Tag name like h1,h2, etc...
2+
//getElementById('tagname')
3+
// node-list = array like object
4+
// index, length property but not array method
45

56
const heading = document.getElementsByTagName('h2');
6-
console.log(heading.length); //2
7-
heading[1].style.color = 'blue';
7+
// console.log(heading); //output total h2 but array like object
8+
heading[1].style.color = 'red'; //hello there-2 will red
9+
heading[0].style.textTransform = 'uppercase';
810

9-
const list = document.getElementsByTagName('li');
10-
console.log(list.length); //4
11+
const listItem = document.getElementsByTagName('li');
12+
console.log(listItem);
13+
// output list: 0:l1 , 1:li , 2:li
1114

12-
// before use forEach copy obj items
13-
const items = [...list];
15+
listItem[0].style.fontSize = '1.25rem'; //lutfy fontsize will 20px;
1416

15-
items[items.length - 1].style.color = 'red';
16-
items[items.length - 1].style.textTransform = 'uppercase';
17-
// use forEach()
18-
// const listItem = items.forEach(function (item) {
19-
// console.log(item);
20-
// });
17+
// copy object
18+
const getObject = [...listItem];
19+
20+
getObject.forEach(function (item) {
21+
item.style.fontSize = '1rem';
22+
item.style.listStyleType = 'none';
23+
item.style.background = '#333';
24+
item.style.width = '400px';
25+
item.style.color = '#ffff';
26+
});

‎03_getElementByClassName.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
// getElementByClassName
2-
// node-list = array-like objecct
3-
// index, length property but not array methods
1+
// getElementByClassName('classname')
2+
// For class name
3+
// node-list = array like object
4+
// index, length property but not array method
45

5-
const listItems = document.getElementsByClassName('debian-based-on');
6-
console.log(listItems); //on console show only class use .debian-based-on
6+
const listClass = document.getElementsByClassName('special');
7+
console.log(listClass);
8+
/* output node-list:
9+
0:li.special
10+
1:li.special
11+
2:li.special */
12+
console.log(listClass.length); // 3
713

8-
// change color for index 1 (debian) be red
9-
// remember here html just 3 classes has debian-based-on
10-
// so index array has 0,1,2 (ubuntu,debian,linux mint)
11-
listItems[0].style.color = 'coral'; //ubuntu
12-
listItems[1].style.color = 'red'; //debian
13-
listItems[2].style.color = 'green'; //linux mint
14-
listItems[3].style.color = 'navy'; //undefinded cz not array index 3
14+
// change index 1 zoro be green and font size: 2rem
15+
listClass[1].style.color = 'green';
16+
listClass[1].style.fontSize = '2rem';

‎04_querySelector.js

+24-17
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,32 @@ querySelector - for single
33
querySelectorAll - for multiple
44
*/
55

6-
const result = document.querySelector('#result');
7-
// change background ul use querySelector (single)
8-
result.style.backgroundColor = '#333';
9-
result.style.color = '#fff';
6+
const listItem = document.querySelector('#listItem');
7+
// change background ul
8+
listItem.style.background = '#333';
9+
listItem.style.color = '#ddd';
1010

11-
let base_on = document.querySelector('.debian-based-on');
12-
console.log(base_on); //ubuntu cz use single querySelector
11+
// if only querySelector, show just first
12+
let shp = document.querySelector('.shp');
13+
console.log(shp); //lutfy
14+
// if use querySelectorAll
15+
shp = document.querySelectorAll('.shp');
16+
console.log(shp); //show node-list all
1317

14-
base_on = document.querySelectorAll('.debian-based-on');
15-
console.log(base_on); //3 show use classes debian cz use multiple querySelectorAll
16-
17-
// use forEach()
18-
base_on.forEach(function (items) {
19-
console.log(items);
18+
// SHP
19+
const shpObject = [...shp];
20+
shpObject.forEach(function (items) {
2021
items.style.textTransform = 'uppercase';
21-
items.style.color = 'red';
22-
items.style.padding = '0.375rem';
22+
items.style.fontSize = '1.25rem';
23+
});
24+
25+
// RHP
26+
const rhp = document.querySelectorAll('.rhp');
27+
const rhpObject = [...rhp];
28+
rhpObject.forEach(function (items) {
29+
items.style.textTransform = 'Capitalize';
30+
items.style.fontSize = '1.25rem';
2331
});
2432

25-
// for last li classes
26-
const last = document.querySelector('li:last-child');
27-
last.style.color = 'green';
33+
const memberRHP = document.querySelector('li:last-child');
34+
console.log(memberRHP);

‎05_children.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// children
2+
// childNodes - return all childNodes including whitespaces
3+
// which is treated as text node
4+
5+
// children
6+
// firstChild
7+
// lastChild
8+
9+
const result = document.querySelector('#result');
10+
// output get 7 length include white space
11+
console.log(result.childNodes);
12+
13+
// if use children not include white space
14+
console.log(result.children);
15+
// output : h2.title, li , li
16+
console.log(result.children.length); //3
17+
18+
// firstChild & lastChild this gonna be text
19+
console.log(result.firstChild);
20+
console.log(result.lastChild);

‎05_parentElement.js

-14
This file was deleted.

‎06_childNodes.js

-20
This file was deleted.

‎06_parentElement.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// parentElement
2+
// for knowing where your classes parent
3+
4+
const yourParent = document.querySelector('p');
5+
// result is .container
6+
console.log(yourParent.parentElement);
7+
// result is body
8+
console.log(yourParent.parentElement.parentElement);
9+
// result is /html
10+
console.log(yourParent.parentElement.parentElement.parentElement);
11+
// result is null
12+
console.log(yourParent.parentElement.parentElement.parentElement.parentElement);
13+
14+
// example change background .container
15+
const background = yourParent.parentElement;
16+
background.style.background = 'blue';
17+
background.style.textTransform = 'uppercase';

‎07_nextSibling_previous.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
// previousSibling
33
// remember return white space too
44

5-
const ul_list = document.querySelector('.list-items');
6-
// if only nextSibling will #text cz read white space
7-
console.log(ul_list.nextSibling.nextSibling.nextSibling.nextSibling); //<~--source js -->
8-
9-
const manjaroNext = document.querySelector('#first');
10-
console.log(manjaroNext.nextSibling.nextSibling); //debian
11-
12-
const crunchBangPrevious = document.querySelector('.last');
13-
console.log(crunchBangPrevious.previousSibling.previousSibling); //debian
14-
15-
const crunchBangNext = document.querySelector('.last');
16-
console.log(crunchBangNext.nextSibling.nextSibling); //null
5+
const li_one = document.querySelector('li');
6+
// index 1 be red
7+
li_one.nextSibling.nextSibling.style.color = 'red';
8+
// index 2 be blue
9+
li_one.nextSibling.nextSibling.nextSibling.nextSibling.style.color = 'blue';
10+
11+
// use previous
12+
const last = document.querySelector('#last');
13+
console.log(
14+
(last.previousSibling.previousSibling.style.textTransform = 'uppercase')
15+
);

‎08_nextElementSibling_previous.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
// nextElementSibling
22
// previousElementSibling
33
// remember this element not read white space just element
4-
// and not same with nextSibling
4+
// and not same with nextSibling read white space, read comment
55

6-
const ul_list = document.querySelector('.list-items');
7-
//nextElementSibling -> output is <h1>hello</h1>
8-
console.log(ul_list.nextElementSibling);
6+
const result = document.querySelector('#result');
7+
console.log(result.previousElementSibling); //hohoho
98

10-
const manjaroNext = document.querySelector('#first');
11-
console.log(manjaroNext.nextElementSibling); //debian
12-
13-
const crunchBangNext = document.querySelector('.last');
14-
console.log(crunchBangNext.nextElementSibling); //null
9+
const last = document.querySelector('#last');
10+
const modification = last.previousElementSibling;
11+
modification.style.fontSize = '2rem';
12+
modification.style.textTransform = 'uppercase';

‎10_getAttribute.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// getAttribute();
2+
// setAttribute();
3+
4+
const first = document.querySelector('.first');
5+
// getAttribute
6+
const getIDs = first.getAttribute('id');
7+
console.log(getIDs);

0 commit comments

Comments
 (0)
0