8000 getElementById · last-endcode/JavaScript-DOM@98e22cd · GitHub
[go: up one dir, main page]
Skip to content

Commit 98e22cd

Browse files
last-endcodelast-endcode
committed
getElementById
1 parent 86fe96d commit 98e22cd

File tree

2 files changed

+16
-90
lines changed

2 files changed

+16
-90
lines changed

‎01_getElementById.js

+10-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
1-
// getElementById() for select only id on html
2-
// for giving effect too
1+
// getElementById for id
2+
// u can apply effect or whatever u want
33

4-
// u should use declare variable because if multiple is very efisien
5-
const title = document.getElementById('title');
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');
4+
// change #container background be dark
5+
const background = document.getElementById('container');
6+
background.style.background = '#333';
167

17-
container.style.background = '#333';
18-
container.style.width = '400px';
19-
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';
8+
// change title h2 color be white, uppercase,padding
9+
const title = document.getElementById('title');
10+
title.style.color = '#fff';
11+
title.style.textTransform = 'uppercase';
12+
title.style.padding = '1.25rem';

‎index.html

+6-68
Original file line numberDiff line numberDiff line change
@@ -15,81 +15,19 @@
1515
</style>
1616
</head>
1717
<body>
18-
<!-- 1 getElementById() -->
19-
<!-- <div class="container" id="container">
20-
<h1 id="title">Hello there</h1>
21-
<a href="#" id="btn">example</a>
22-
</div> -->
23-
24-
<!-- 2 getElementByTagName
25-
<h2>Hello There</h2>
26-
<h2>Hello There-2</h2>
27-
<ul>
28-
<li>lutfy</li>
29-
<li>zoro</li>
30-
<li>sanji</li>
31-
</ul> -->
32-
33-
<!-- 3 getElementByClassName
34-
<ul>
35-
<li class="special">Lutfi</li>
36-
<li class="special">Zoro</li>
37-
<li class="special">Sanji</li>
38-
</ul> -->
39-
40-
<!-- 4 querySelector
41-
<ul id="listItem">
42-
<h2>SHP</h2>
43-
<li class="shp">luffy</li>
44-
<li class="shp">zoro</li>
45-
<li class="shp">sanji</li>
46-
<h2>RHP</h2>
47-
<li class="rhp">shanks</li>
48-
<li class="rhp">benbackman</li>
49-
<li class="rhp">yasop</li>
50-
</ul> -->
51-
52-
<!-- 5 children
53-
<ul id="result">
54-
<h2 class="title">Okeee</h2>
55-
<li>hello</li>
56-
<li>hello2</li>
57-
</ul> -->
58-
59-
<!-- 6 parentElement
60-
<div class="container">
61-
<h3>this is a hello world</h3>
62-
<h2>hello world by dncode</h2>
63-
<p>
64-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias,
65-
distinctio!
66-
</p>
67-
</div> -->
68-
69-
<!-- 7 NextSibling, Previous Sibling
70-
<ul id="result">
71-
<li>hello1</li>
72-
<li>hello2</li>
73-
<li id="last">hello3</li>
74-
</ul> -->
75-
76-
<!-- <h1>hohoho</h1> -->
77-
<!-- NextElementSibling , previouselement
78-
<ul id="result">
79-
<li>hello1</li>
80-
<li>hello2</li>
81-
<li id="last">hello3</li>
82-
</ul> -->
83-
18+
<!-- getElementById for id -->
19+
<div id="container">
20+
<h2 id="title">Hello World</h2>
21+
</div>
8422
<!-- source js -->
85-
<!-- <script src="/01_getElementById.js"></script> -->
23+
<script src="/01_getElementById.js"></script>
8624
<!-- <script src="/02_getElementByTagName.js"></script> -->
8725
<!-- <script src="/03_getElementByClassName.js"></script> -->
8826
<!-- <script src="/04_querySelector.js"></script> -->
8927
<!-- <script src="/05_children.js"></script> -->
9028
<!-- <script src="/06_parentElement.js"></script> -->
9129
<!-- <script src="/07_nextSibling_previous.js"></script> -->
92-
<script src="/08_nextElementSibling_previous.js"></script>
30+
<!-- <script src="/08_nextElementSibling_previous.js"></script> -->
9331
<!-- <script src="/09_textContent.js"></script> -->
9432
<!-- <script src="/10_getAttribute.js"></script> -->
9533
</body>

0 commit comments

Comments
 (0)
0