Posting ini menjelaskan properti elemen HTML DOM 'previousElementSibling' menggunakan JavaScript.
Apa itu Properti 'previousElementSibling' Elemen DOM HTML?
Elemen DOM (Document Object Model) “ sebelumnyaElementSibling ” adalah properti read-only yang membantu mengambil saudara kandung sebelumnya dari suatu elemen di pohon yang sama. Properti ini mengembalikan konten saudara sebelumnya.
Sintaksis
elemen. sebelumnyaElementSibling
Sintaks ini mengembalikan “ rangkaian ” berisi konten HTML dari saudara sebelumnya, dan “ batal ” jika tidak ada.
Mari gunakan sintaks yang ditentukan di atas secara praktis untuk menunjukkan cara kerja properti 'previousElementSibling'.
Contoh: Menerapkan Properti “previousElementSibling” untuk Mengembalikan Konten Saudara Sebelumnya
Contoh ini menerapkan properti JavaScript “previousElementSibling” untuk mendapatkan konten HTML saudara sebelumnya.
Kode HTML
Pertama, ikhtisar kode HTML berikut:
< ul >< itu pengenal = 'Pertama' > HTML < / itu >
< itu pengenal = 'Kedua' > CSS < / itu >
< itu pengenal = 'ketiga' > JavaScript < / itu >
< / ul >
< P pengenal = 'untuk' >< / P >
Pada baris kode di atas:
- “
- Di dalam daftar yang tidak diurutkan, beberapa item disematkan menggunakan “
” tag dengan id yang ditetapkan. - Terakhir, “ ” tag menyematkan paragraf kosong dengan id unik “para”.
Kode JavaScript
Sekarang, lanjutkan dengan kode JavaScript:
< naskah >biarkan barang = dokumen. getElementById ( 'ketiga' ) . sebelumnyaElementSibling . innerHTML ;
dokumen. getElementById ( 'untuk' ) . innerHTML = ' Saudara kandung item ketiga sebelumnya adalah : ' + barang ;
naskah >
Menurut potongan kode di atas:
- Variabel 'item' pertama-tama menggunakan ' getElementById() ” metode untuk mengakses item daftar yang ditargetkan menggunakan id 'ketiga' dan kemudian menerapkan ' sebelumnyaElementSibling ” properti untuk mendapatkan saudara kandungnya sebelumnya.
- Setelah itu, “ getElementById() ” metode mengakses paragraf kosong yang ditambahkan menggunakan id 'para' untuk menambahkannya dengan nilai variabel 'item' yaitu saudara sebelumnya.
Keluaran
Seperti yang terlihat, hasilnya menunjukkan saudara sebelumnya dari item yang ditargetkan yaitu, (JavaScript).
Kesimpulan
JavaScript menyediakan elemen DOM yang telah ditentukan sebelumnya “ sebelumnyaElementSibling ” properti untuk mengambil saudara sebelumnya dari suatu elemen. Ini mengembalikan saudara sebelumnya dari suatu elemen dari tingkat pohon yang sama di mana elemen target berada. Posting ini secara mendalam menjelaskan properti elemen HTML DOM 'previousElementSibling' di JavaScript.