Saat Anda bekerja dengan elemen DOM, hal umum yang ingin Anda lakukan adalah mendapatkan simpul induk dari suatu elemen
Dalam postingan ini, kita akan belajar cara mendapatkan parent node dari elemen DOM di JavaScript
Karena struktur mirip DOM HTML, elemen disusun dalam pohon. Ini berarti bahwa setiap elemen memiliki simpul induk, dan setiap elemen dapat memiliki beberapa simpul anak
Pertama, mari kita lihat HTML yang akan kita kerjakan
<div class="parent"> <div class="child"></div> </div>Katakanlah kita ingin mendapatkan simpul induk dari elemen anak. Kita dapat melakukannya dengan terlebih dahulu menanyakan DOM untuk elemen anak
const child = document.querySelector(".child"); console.log(child); <div class="child"></div>Kemudian, kita bisa mendapatkan simpul induk dari elemen anak dengan menggunakan properti parentNode
const child = document.querySelector(".child"); const parent = child.parentNode; console.log(parent); <div class="parent"> <div class="child"></div> </div>Satu-satunya elemen yang tidak memiliki simpul induk adalah elemen document. Ini karena elemen document adalah akar dari pohon DOM
Selain elemen document, setiap elemen lainnya memiliki simpul induk sehingga ketika Anda menggunakan properti parentNode, Anda akan selalu mendapatkan elemen kembali
Dalam posting ini, kami belajar cara mendapatkan node induk dari elemen DOM di JavaScript
Cukup kueri DOM untuk elemen yang ingin Anda dapatkan simpul induknya, lalu gunakan properti parentNode untuk mendapatkan simpul induk
Terima kasih sudah membaca
Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami
Properti parentNode HTML DOM. Properti simpul induk adalah properti hanya-baca yang mengembalikan nama simpul induk dari simpul yang dipilih kepada kita sebagai objek simpul. Objek Node mewakili satu simpul di pohon dokumen dan simpul dapat berupa simpul elemen, simpul teks, atau lebih.
Sintaksis
node.parentNodeNilai Pengembalian. Properti simpul induk mengembalikan objek simpul induk jika ada atau jika tidak maka akan mengembalikan "null".
Contoh.
html
<h1 style="color:green"________97__93_______node.parentElement0
node.parentElement_1
<node.parentElement3node.parentElement0
node.parentElement5<node.parentElement7 node.parentElement8=// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 0// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 1
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 3node.parentElement7node.parentElement0
node.parentElement5// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 7
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 9
________92______0node.parentElement3node.parentElement0
node.parentElement_1
<<5 <6=<8<9<5node.parentElement0
node.parentElement_1
<node.parentElement7 node.parentElement8=h17h18node.parentElement7node.parentElement0
node.parentElement_1
<style3node.parentElement0
node.parentElement5style6
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2style8
style_9
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2=1
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2=3
node.parentElement5=5
<0style3node.parentElement0
Keluaran.
Perbedaan antara DOM parentNode dan parentElement di JavaScript
parentElement. Elemen induk adalah properti hanya baca yang mengembalikan elemen induk dari elemen yang dipilih. Objek elemen mewakili elemen HTML, seperti P, DIV, dll.
Sintaksis.
node.parentElement_Nilai Pengembalian. Properti parentElement mengembalikan objek elemen yang mewakili elemen induk jika ada atau akan mengembalikan nol.
Contoh.
html
<h1 style="color:green""color:green"4________93__6_______0
node.parentElement_1
<"color:green"_9node.parentElement0
node.parentElement5<>GeeksforGeeks</3 node.parentElement8=>GeeksforGeeks</6>GeeksforGeeks</7>GeeksforGeeks</3node.parentElement0
node.parentElement5<>GeeksforGeeks</3h13>GeeksforGeeks</3node.parentElement0
node.parentElement5<>GeeksforGeeks</3h19>GeeksforGeeks</3node.parentElement0
________92______0"color:green"9node.parentElement0
node.parentElement_1
<node.parentElement7node.parentElement08
node.parentElement5node.parentElement10node.parentElement7node.parentElement0
node.parentElement_1
<<5 <6=node.parentElement18node.parentElement0
node.parentElement5node.parentElement21
________92______0<5node.parentElement0
node.parentElement_25
node.parentElement5node.parentElement27
<node.parentElement7 node.parentElement8=// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 0h18node.parentElement7node.parentElement0
node.parentElement_1
<style3node.parentElement0
node.parentElement5node.parentElement41
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2node.parentElement43
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2node.parentElement45
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement; 2node.parentElement47
node.parentElement5=5
<0style3node.parentElement0
Keluaran.
Perbedaan antara DOM parentNode dan parentElement di JavaScript
Perbedaan. Elemen Induk mengembalikan null jika induknya bukan simpul elemen, itulah perbedaan utama antara parentElement dan parentNode. Dalam banyak kasus seseorang dapat menggunakan salah satu dari mereka, dalam banyak kasus, mereka sama. Contohnya
// returns the document node document.documentElement.parentNode; // returns null document.documentElement.parentElement;Elemen HTML (dokumen. documentElement) tidak memiliki induk yang merupakan elemen, itu adalah simpul, oleh karena itu, elemen induknya adalah nol