Apa itu orang tua dan anak dalam javascript?

Question

HTML terdiri dari DOM di mana semua elemen didefinisikan sebagai objek. Elemen-elemen ini membentuk hierarki seperti orang tua ke anak. Setiap elemen dengan elemen anak di bawahnya dapat diperlakukan sebagai elemen induk. Seringkali persyaratan untuk mengakses elemen induk tersebut dan mengambil tindakan terhadapnya menggunakan fungsi. Ini menyediakan dua cara untuk mengakses elemen induk, satu menggunakan parentNode dan yang lainnya dengan menggunakan parentElement. Kedua properti mengembalikan elemen induk dari elemen di mana properti ini dipanggil. ParentNode dan parentElement keduanya merupakan properti hanya-baca

Table of Contents Show

Bagaimana cara kerja Induk JavaScript?
Artikel yang Direkomendasikan
Apa itu induk dalam JavaScript?
Apa itu anak dalam JavaScript?
Apa itu elemen induk dan elemen anak?
Bagaimana cara mendapatkan elemen anak dari orang tua di JavaScript?

Bagaimana cara kerja Induk JavaScript?

Karena JavaScript menyediakan properti parentNode dan parentElement untuk mengakses elemen induk. Kedua properti serupa tetapi properti parentElement akan mengembalikan nol jika simpul induk dari elemen yang ditentukan bukan elemen

Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda

Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya

Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)

Harga
Lihat Kursus

600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (85.567 peringkat)

simpul. parentElement. Mengembalikan string yang mewakili simpul induk dari setiap simpul anak yang ditentukan dan akan mengembalikan nol jika simpul induk bukan elemen. Node mewakili elemen apa pun di pohon dokumen
simpul. parentNode. Mengembalikan objek yang mewakili induk dari simpul anak yang ditentukan. Node mewakili elemen apa pun di pohon dokumen

Contoh

Diberikan di bawah ini adalah contoh-contoh yang disebutkan

Contoh 1. Menggunakan parentElement

Kode

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
Accessing Parent Element using JavaScript
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Parent Element </h2>
<p> Click on button to access the parent element </p>
</div>
<div class = "list" >
<p> Number list: </p>
<ul>
<li id = "one" > One </li>
<li id = "two" > Two </li>
<li id = "three" > Three </li>
<li id = "four" > Four </li>
<li id = "five" > Five </li>
</ul>
<button type = "submit" value = "submit" onclick = "accessParent()"> Click Here </button>
</div>
<div class = "resultText">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
function accessParent() {
var parentEl = document.getElementById("one").parentElement;
document.getElementById("result").innerHTML = "Object: " + parentEl + "</br> Node Name:" + " " + parentEl.nodeName;
}
</script>
</body>
</html>

Keluaran

Contoh #2. Menggunakan parentNode

Kode

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
Accessing Parent Element using JavaScript
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Parent Element </h2>
<p> Click on button to access the parent element </p>
</div>
<div class = "list" >
<p> Number list: </p>
<ul>
<li id = "one" > One </li>
<li id = "two" > Two </li>
<li id = "three" > Three </li>
<li id = "four" > Four </li>
<li id = "five" > Five </li>
</ul>
<button type = "submit" value = "submit" onclick = "accessParent()"> Click Here </button>
</div>
<div class = "resultText">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
function accessParent() {
var parentEl = document.getElementById("one").parentNode;
document.getElementById("result").innerHTML = "Object: " + parentEl + "</br> Node Name:" + " " + parentEl.nodeName;
}
</script>
</body>
</html>

_

Keluaran

Contoh #3. Perbedaan antara keduanya

Kode

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
Accessing Parent Element using JavaScript
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Parent Element </h2>
<p> Click on button to access the parent element </p>
</div>
<div class = "list" >
<button type = "submit" value = "submit" onclick = "accessParent()"> Click Here </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script type = "text/javascript">
function accessParent() {
var parentEl1 = document.body.parentNode;
document.getElementById("result1").innerHTML = "Parent Name:" + " " + parentEl1.nodeName;
var parentEl2 = document.body.parentElement;
document.getElementById("result2").innerHTML = "Parent Name:" + " " + parentEl2.nodeName;
var parentEl3 = document.documentElement.parentNode;
document.getElementById("result3").innerHTML = "Parent Object:" + " " + parentEl3;
var parentEl4 = document.documentElement.parentElement;
document.getElementById("result4").innerHTML = "Parent Object:" + " " + parentEl4;
}
</script>
</body>
</html>

Keluaran

Perhatikan di sini, jika panggilan parentElement, ia mengembalikan induk nol dibandingkan dengan parentNode

Kesimpulan

JavaScript menyediakan dua jenis properti untuk mengakses elemen induk dalam struktur DOM. Salah satunya adalah parentElement dan yang lainnya adalah parentNode. Kedua properti itu hampir sama

Artikel yang Direkomendasikan

Ini adalah panduan untuk Induk JavaScript. Di sini kita membahas pendahuluan, bagaimana cara kerja induk JavaScript? . Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –

Apa itu induk dalam JavaScript?

Metode parent() mengembalikan elemen induk langsung dari elemen yang dipilih . Pohon DOM. Metode ini hanya melintasi satu tingkat di atas pohon DOM. Untuk menelusuri hingga ke elemen root dokumen (untuk mengembalikan kakek-nenek atau leluhur lainnya), gunakan metode parents() atau parentsUntil().