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

Commit a142467

Browse files
last-endcodelast-endcode
committed
parentElement
1 parent f30fc52 commit a142467

File tree

2 files changed

+28
-18
lines changed

2 files changed

+28
-18
lines changed

‎06_parentElement.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
// parentElement
2-
// for knowing where your classes parent
2+
// for knowing where your classes or id
33

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);
4+
const myParent = document.querySelector('.members');
5+
// ul #shp is parent
6+
console.log(myParent.parentElement);
7+
// div .container is parent
8+
console.log(myParent.parentElement.parentElement);
9+
// body is parent and if add parentElement again will null
10+
console.log(myParent.parentElement.parentElement.parentElement);
1311

14-
// example change background .container
15-
const background = yourParent.parentElement;
16-
background.style.background = 'blue';
17-
background.style.textTransform = 'uppercase';
12+
// example
13+
const bodyBackground = document.querySelector('.container');
14+
const containerColor = document.querySelector('#shp');
15+
containerColor.parentElement.style.color = '#fff';
16+
bodyBackground.parentElement.style.background = '#333';

‎index.html

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,33 @@ <h2>SHP Pirates</h2>
4949
<li id="members">ussop</li>
5050
</ul> -->
5151

52-
<!-- children -->
52+
<!-- children
5353
<h2>SHP Pirates</h2>
5454
<ul id="shp">
5555
<li id="members">lutfy</li>
5656
<li id="members">zoro</li>
5757
<li id="members">sanji</li>
5858
<li id="members">ussop</li>
59-
</ul>
59+
</ul> -->
60+
61+
<!-- parentElement -->
62+
<div class="container">
63+
<h2>SHP Pirates</h2>
64+
<ul id="shp">
65+
<li class="members">lutfy</li>
66+
<li class="members">zoro</li>
67+
<li class="members">sanji</li>
68+
<li class="members">ussop</li>
69+
</ul>
70+
</div>
6071

6172
<!-- source js -->
6273
<!-- <script src="/01_getElementById.js"></script> -->
6374
<!-- <script src="/02_getElementByTagName.js"></script> -->
6475
<!-- <script src="/03_getElementByClassName.js"></script> -->
6576
<!-- <script src="/04_querySelector.js"></script> -->
66-
<script src="/05_children.js"></script>
67-
<!-- <script src="/06_parentElement.js"></script> -->
77+
<!-- <script src="/05_children.js"></script> -->
78+
<script src="/06_parentElement.js"></script>
6879
<!-- <script src="/07_nextSibling_previous.js"></script> -->
6980
<!-- <script src="/08_nextElementSibling_previous.js"></script> -->
7081
<!-- <script src="/09_textContent.js"></script> -->

0 commit comments

Comments
 (0)
0