8000 nextElementSibling & previousElementSibling · last-endcode/JavaScript-DOM@45ca441 · GitHub
[go: up one dir, main page]
Skip to content

Commit 45ca441

Browse files
last-endcodelast-endcode
committed
nextElementSibling & previousElementSibling
1 parent 5de9854 commit 45ca441

File tree

2 files changed

+19
-8
lines changed

2 files changed

+19
-8
lines changed

‎08_nextElementSibling_previous.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@
33
// remember this element not read white space just element
44
// and not same with nextSibling read white space, read comment
55

6-
const result = document.querySelector('#result');
7-
console.log(result.previousElementSibling); //hohoho
6+
const list_items = document.querySelector('ul');
7+
// previousElementSibling
8+
list_items.previousElementSibling.style.background = 'blue';
9+
// nextElementSibling ul > next or inside ul
10+
// output <script src=........
11+
const nextLi = list_items.nextElementSibling;
12+
console.log(nextLi);
813

9-
const last = document.querySelector('#last');
10-
const modification = last.previousElementSibling;
11-
modification.style.fontSize = '2rem';
12-
modification.style.textTransform = 'uppercase';
14+
const headingNext = document.querySelector('h2');
15+
// nextElement is ul and add background ul be red
16+
headingNext.nextElementSibling.style.background = 'red';

‎index.html

+9-2
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,19 @@ <h2>SHP Pirates</h2>
6969
</ul>
7070
</div> -->
7171

72-
<!-- nextSibling & previousSibling -->
72+
<!-- nextSibling & previousSibling
7373
<div class="container">
7474
<h3>sub title</h3>
7575
<h2>main title</h2>
76-
</div>
76+
</div> -->
7777

78+
<!-- nextElementSibling & previousElementSibling -->
79+
<h2>The Pirates</h2>
80+
<ul id="list-item">
81+
<li class="lutfy">shp</li>
82+
<li>rhp</li>
83+
<li>marine ford</li>
84+
</ul>
7885
<!-- source js -->
7986
<!-- <script src="/01_getElementById.js"></script> -->
8087
<!-- <script src="/02_getElementByTagName.js"></script> -->

0 commit comments

Comments
 (0)
0