Skip to content

Commit b541df9

Browse files
AdrianMiftahulHAdrianMiftahulH
committed
Learn JS DOM(getElement,Class,Selector)
1 parent 53de6ff commit b541df9

File tree

2 files changed

+154
-0
lines changed

2 files changed

+154
-0
lines changed

‎JavaScript-DOM/app.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// # DOM Manipulation #
2+
let val;
3+
4+
// ## document ##
5+
val = document;
6+
val = document.all[0];
7+
val = document.all.length;
8+
9+
val = document.head;
10+
val = document.body;
11+
val = document.doctype;
12+
val = document.domain;
13+
val = document.URL;
14+
val = document.contentType;
15+
16+
// ### document form ###
17+
val = document.forms; //get element forms
18+
val = document.forms[0].id; //get class/id form
19+
val = document.forms[0].method; //get type method
20+
21+
// ### document links ###
22+
val = document.links; //get all element a href
23+
val = document.links[0]; //get element a href
24+
val = document.links[0].className; // get clss in a href
25+
26+
// ### get document image ###
27+
val = document.images
28+
29+
// ### get document script ###
30+
val = document.scripts //get all script
31+
val = document.scripts[1] //get script
32+
val = document.scripts[1].getAttribute('src') //get link script
33+
34+
// #### list link script ####
35+
36+
let script= document.scripts;
37+
38+
let scriptArr = Array.from(script); //convert from HTMLCollection to array
39+
40+
scriptArr.forEach(function (script) {
41+
// console.log(script.getAttribute('src'));
42+
})
43+
44+
// console.log(val);
45+
46+
47+
// ## get Element By Id
48+
49+
console.log(document.getElementById('task-title')); //get element
50+
console.log(document.getElementById('task-title').id); //get attribute id in element
51+
console.log(document.getElementById('task-title').className); //get attribute class in element
52+
53+
const cardHeader = document.getElementById('task-title');
54+
// ### Change style by id ###
55+
cardHeader.style.background = 'black'; //change bg by id
56+
cardHeader.style.color = 'white'; //change bg by id
57+
58+
// ### Change Content by id ###
59+
cardHeader.textContent = 'Hello World'; //change Content by id
60+
cardHeader.innerHTML = '<h2 style="text-align:center;">My Task</h2>'
61+
62+
// ## get Query Select, just take the first query ##
63+
console.log(document.querySelector('#task-title')); //get element
64+
65+
// ### Change style by Query ###
66+
document.querySelector('li').style.color = 'red'; //take the first query;
67+
document.querySelector('li:nth-child(2)').textContent = 'Hello World'; // take the quey as requested;
68+
69+
// ## get Class By Class Name ##
70+
71+
const items = document.getElementsByClassName('list-group-item');
72+
items[2].style.color = "blue"
73+
74+
// ## get Element By Tag Name ##
75+
const buttom = document.getElementsByTagName('button');
76+
buttom[1].style.color = "Blue"
77+
console.log(buttom);
78+
79+
// ## get query selector all ##
80+
const listLight = document.querySelectorAll('li:nth-child(odd'); //get all query odd
81+
82+
listLight.forEach(function (li, index) {
83+
li.style.background = '#ccc';
84+
})

‎JavaScript-DOM/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
12+
13+
<title>Hello, world!</title>
14+
</head>
15+
16+
<body>
17+
18+
<div class="container" style="padding-top: 15px;">
19+
<div class="row">
20+
<div class="col-md-12">
21+
<div class="card">
22+
<div class="card-header" id="task-title">
23+
Task List
24+
</div>
25+
<div class="card-body">
26+
<form id="form-task">
27+
<div class="form-group">
28+
<label for="">New Task</label>
29+
<input type="text" name="title" id="title" class="form-control">
30+
</div>
31+
<button type="submit" class="btn btn-primary mt-3">Submit</button>
32+
</form>
33+
<hr>
34+
<ul class="list-group">
35+
<li class="list-group-item d-flex flex-row justify-content-between w-100">
36+
Cras justo odio
37+
<a href="/" class="btn btn-danger btn-sm delete-item">x</a>
38+
</li>
39+
<li class="list-group-item d-flex flex-row justify-content-between w-100">
40+
Dapibus ac facilisis in
41+
<a href="/" class="btn btn-danger btn-sm delete-item">x</a>
42+
</li>
43+
<li class="list-group-item d-flex flex-row justify-content-between w-100">
44+
Vestibulum at eros
45+
<a href="/" class="btn btn-danger btn-sm delete-item">x</a>
46+
</li>
47+
</ul>
48+
<hr>
49+
<button class="btn btn-info clear-task">Clear Task</button>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<!-- Optional JavaScript -->
57+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
58+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
59+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
60+
crossorigin="anonymous"></script>
61+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
62+
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
63+
crossorigin="anonymous"></script>
64+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
65+
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
66+
crossorigin="anonymous"></script>
67+
<script src="app.js"></script>
68+
</body>
69+
70+
</html>

0 commit comments

Comments
 (0)