8000 nextSibling and previousSibling · last-endcode/JavaScript-DOM@5de9854 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5de9854

Browse files
last-endcodelast-endcode
committed
nextSibling and previousSibling
1 parent a142467 commit 5de9854

File tree

2 files changed

+17
-14
lines changed

2 files changed

+17
-14
lines changed

‎07_nextSibling_previous.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
// nextSibling
22
// previousSibling
3-
// remember return white space too
3+
// remember return white space too and comment html
44

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';
5+
const nextSubtitle = document.querySelector('h3');
6+
// h2 main-title if one nexSibling result #text
7+
// cause nextSibling read white space too remember!
8+
console.log(nextSubtitle.nextSibling.nextSibling);
109

11-
// use previous
12-
const last = document.querySelector('#last');
13-
console.log(
14-
(last.previousSibling.previousSibling.style.textTransform = 'uppercase')
15-
);
10+
const previousTitle = document.querySelector('h2');
11+
// h3 sub-title
12+
console.log(previousTitle.previousSibling);

‎index.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h2>SHP Pirates</h2>
5858
<li id="members">ussop</li>
5959
</ul> -->
6060

61-
<!-- parentElement -->
61+
<!-- parentElement
6262
<div class="container">
6363
<h2>SHP Pirates</h2>
6464
<ul id="shp">
@@ -67,6 +67,12 @@ <h2>SHP Pirates</h2>
6767
<li class="members">sanji</li>
6868
<li class="members">ussop</li>
6969
</ul>
70+
</div> -->
71+
72+
<!-- nextSibling & previousSibling -->
73+
<div class="container">
74+
<h3>sub title</h3>
75+
<h2>main title</h2>
7076
</div>
7177

7278
<!-- source js -->
@@ -75,9 +81,9 @@ <h2>SHP Pirates</h2>
7581
<!-- <script src="/03_getElementByClassName.js"></script> -->
7682
<!-- <script src="/04_querySelector.js"></script> -->
7783
<!-- <script src="/05_children.js"></script> -->
78-
<script src="/06_parentElement.js"></script>
84+
<!-- <script src="/06_parentElement.js"></script> -->
7985
<!-- <script src="/07_nextSibling_previous.js"></script> -->
80-
<!-- <script src="/08_nextElementSibling_previous.js"></script> -->
86+
<script src="/08_nextElementSibling_previous.js"></script>
8187
<!-- <script src="/09_textContent.js"></script> -->
8288
<!-- <script src="/10_getAttribute.js"></script> -->
8389
</body>

0 commit comments

Comments
 (0)
0