Saat mengembangkan situs web modern, fitur JavaScript untuk bekerja dengan DOM banyak digunakan. Skrip memungkinkan Anda untuk menampilkan dan menyembunyikan elemen-elemen dari mana halaman-halaman itu dibuat, mengonfigurasi properti dari elemen-elemen ini. Objek DOM yang berinteraksi dengan dari program memiliki properti dan metode. Praktis semua programmer web mengetahui tentang beberapa dari mereka, menurut penulis materi, terjemahan yang kami terbitkan hari ini. Tetapi beberapa yang ingin dia bicarakan di sini jauh kurang terkenal.
HTML dan DOM
Pertama, mari kita bicara tentang perbedaan antara HTML dan DOM. Misalnya, elemen
<table< reguler jelas kode HTML. Elemen ini dapat digunakan dalam file html, ia memiliki seperangkat atribut yang menentukan penampilan dan perilaku tabel yang dibuat dengan bantuannya. Sebenarnya, tag
<table> itu sendiri tidak ada hubungannya dengan JavaScript. Hubungan antara elemen HTML yang ada dalam dokumen dan kode JavaScript disediakan oleh DOM (Document Object Model). DOM memungkinkan untuk berinteraksi dengan elemen HTML dari kode JavaScript seolah-olah mereka objek.
Semua elemen HTML memiliki "antarmuka DOM" sendiri yang menentukan properti (biasanya terkait dengan atribut elemen HTML) dan metode. Misalnya, elemen
<table> memiliki antarmuka yang disebut
HTMLTableElement .
Anda bisa mendapatkan tautan ke elemen, misalnya, menggunakan konstruksi berikut:
const searchBox = document.getElementById('search-box');
Setelah tautan ke elemen diterima, programmer memiliki akses ke properti dan metode yang dimiliki elemen tersebut. Misalnya, Anda bisa bekerja dengan properti
value bidang teks tertentu, mengingat bahwa tautannya disimpan dalam variabel
searchBox menggunakan struktur form
searchBox.value . Anda dapat menempatkan kursor di bidang teks ini dengan memanggil metode
searchBox.focus() .
Mungkin di sinilah kita dapat menyelesaikan "kursus singkat tentang DOM" dan, pada kenyataannya, ke properti dan metode antarmuka DOM dari elemen HTML yang tidak banyak diketahui.
Jika Anda ingin membaca dan bereksperimen segera, buka alat pengembang browser. Secara khusus, untuk mendapatkan tautan ke elemen halaman tertentu, Anda dapat memilihnya di pohon elemen, dan kemudian menggunakan konstruk
$0 di
konsol . Untuk melihat item sebagai objek, ketikkan
dir($0) di konsol. Omong-omong, jika Anda menemukan sesuatu yang baru untuk Anda, cobalah menjelajahinya menggunakan konsol.
1: metode tabel
Elemen
<table> sederhana (yang masih memegang tempat pertama di antara teknologi yang digunakan dalam pengembangan tata letak halaman web) memiliki cukup banyak metode yang sangat baik yang sangat menyederhanakan proses membangun tabel.
Ini beberapa di antaranya.
const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you';
Seperti yang Anda lihat, di sini kami tidak menggunakan perintah seperti
document.createElement() . Dan metode
.insertRow() , jika Anda menyebutnya langsung di atas meja, bahkan akan memberikan tambahan
<tbody> . Luar biasa bukan?
# 2: metode scrollIntoView ()
Anda mungkin tahu bahwa jika tautan memiliki konstruksi seperti
#something , maka setelah memuat laman, peramban akan secara otomatis menggulir ke elemen dengan
ID sesuai? Metode ini nyaman, tetapi jika elemen yang menarik bagi kami diberikan setelah halaman dimuat, itu tidak akan berfungsi. Inilah cara membuat ulang pola perilaku ini sendiri:
document.querySelector(document.location.hash).scrollIntoView();
3: properti tersembunyi
Di sini kami mempertimbangkan sebuah properti, namun, kemungkinan besar, ketika mengakses properti ini, setter tertentu akan dipanggil, yang merupakan metode. Bagaimanapun, ingat, pernahkah Anda menggunakan desain yang ditunjukkan di bawah ini untuk menyembunyikan elemen?
myElement.style.display = 'none'
Jika Anda menggunakannya, Anda tidak harus melakukannya lagi. Untuk menyembunyikan elemen, cukup tulis
true ke properti
hidden :
myElement.hidden = true
# 4: metode toggle ()
Sebenarnya, ini bukan metode beberapa elemen. Ini adalah metode properti elemen. Secara khusus, metode ini memungkinkan Anda untuk menambahkan kelas ke suatu elemen dan menghapusnya dari itu menggunakan konstruksi berikut:
myElement.classList.toggle('some-class')
Omong-omong, jika Anda pernah menambahkan kelas menggunakan konstruk
if , ketahuilah bahwa Anda tidak perlu melakukan ini lagi, dan lupakan konstruk ini. Mekanisme yang sama diimplementasikan menggunakan parameter kedua metode
toggle() . Jika ini adalah ekspresi yang bernilai
true , maka kelas yang diteruskan ke
toggle() akan ditambahkan ke elemen.
el.classList.toggle('some-orange-class', theme === 'orange');
Mungkin, di sini Anda mungkin memiliki keraguan tentang kecukupan desain ini. Setelah semua, nama metode, "beralih", yang, mengingat fakta bahwa esensi dari tindakan yang dilakukan olehnya tersembunyi di dalamnya, dapat diterjemahkan sebagai "switch", tidak mengandung menyebutkan bahwa "switch" menyiratkan pemenuhan kondisi tertentu. Namun, desain yang dijelaskan di atas ada dalam bentuk ini, meskipun pengembang Internet Explorer mungkin juga menganggapnya aneh. Dalam penerapan
toggle() parameter kedua tidak disediakan. Oleh karena itu, walaupun dikatakan di atas bahwa mereka yang tahu tentang
toggle() dapat melupakan konstruk
if , lupakan saja, namun, jangan.
# 5: metode querySelector ()
Anda pasti sudah tahu tentang keberadaan metode ini, tetapi ada kecurigaan bahwa tepatnya 17% dari Anda tidak tahu bahwa itu dapat digunakan dalam aplikasi ke elemen apa pun.
Misalnya, konstruksi
myElement.querySelector('.my-class') hanya memilih elemen-elemen yang memiliki kelas
my-class dan pada saat yang sama merupakan turunan dari elemen
myElement .
# 6: metode terdekat ()
Semua elemen yang mendukung pencarian elemen induk memiliki metode ini. Ini adalah sesuatu seperti kebalikan dari
querySelector() . Menggunakan metode ini, misalnya, Anda bisa mendapatkan judul untuk bagian saat ini:
myElement.closest('article').querySelector('h1');
Di sini, selama pencarian, pertama elemen induk pertama
<article> terdeteksi, dan kemudian elemen pertama
<h1> memasukinya.
# 7: metode getBoundingClientRect ()
Metode
getBoundingClientRect() mengembalikan objek kecil yang dihias dengan baik berisi informasi tentang ukuran elemen yang disebut metode ini.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Namun, menggunakan metode ini, perhatian harus diberikan, khususnya, memperhatikan dua poin:
- Memanggil metode ini menghasilkan redraw dari halaman. Bergantung pada perangkat di mana halaman dilihat, dan pada kompleksitas halaman, operasi ini dapat memakan waktu beberapa milidetik. Pertimbangkan ini jika Anda bermaksud memanggil metode ini dalam fragmen kode berulang, misalnya, saat melakukan animasi.
- Tidak semua browser mendukung metode ini.
# 8: metode cocok ()
Misalkan kita perlu memeriksa apakah elemen tertentu memiliki kelas tertentu.
Inilah cara mengatasi masalah ini, tampaknya dengan cara yang paling sulit:
if (myElement.className.indexOf('some-class') > -1) {
Ini pilihan lain, lebih baik, tetapi juga jauh dari ideal:
if (myElement.className.includes('some-class')) {
Dan inilah cara terbaik untuk menyelesaikan masalah ini:
if (myElement.matches('.some-class')) {
# 9: masukkan metodeAdjacentElement ()
Metode ini mirip dengan
appendChild() , tetapi memberikan sedikit lebih banyak kekuatan di mana tepatnya elemen anak akan ditambahkan.
Jadi, perintah
parentEl.insertAdjacentElement('beforeend', newEl) mirip dengan perintah
parentEl.appendChild(newEl) , tetapi menggunakan metode
insertAdjacentElement() , Anda dapat meneruskan
beforebegin ,
afterbegin , dan
afterend , menunjukkan tempat di mana Anda perlu tambahkan item.
10: berisi metode ()
Pernahkah Anda ingin tahu apakah satu elemen ada di dalam yang lain? Saya membutuhkannya sepanjang waktu. Misalnya, jika selama pemrosesan peristiwa klik mouse Anda perlu mencari tahu apakah itu terjadi di dalam jendela modal atau di luarnya (yang artinya dapat ditutup), Anda dapat menggunakan konstruksi berikut:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Di sini
modalEl adalah tautan ke jendela modal, dan
e.target adalah elemen apa pun yang diklik. Menariknya, ketika saya menggunakan teknik ini, saya tidak pernah bisa menulis semuanya dengan benar pertama kali, bahkan ketika saya ingat bahwa saya terus-menerus salah dan mencoba untuk memperbaiki kemungkinan kesalahan di muka.
# 11: metode getAttribute ()
Mungkin metode ini bisa disebut yang paling tidak berguna, namun, ada satu situasi yang pasti bisa berguna.
Ingat, kami katakan sebelumnya bahwa properti objek DOM biasanya dikaitkan dengan atribut elemen HTML?
Salah satu kasus saat ini bukan kasus diwakili oleh atribut
href , misalnya, seperti di sini:
<a href="/animals/cat">Cat</a> .
Konstruksi
el.href tidak
el.href kembali, seperti yang Anda harapkan,
/animals/cat . Ini karena elemen
<a> mengimplementasikan antarmuka
HTMLHyperlinkElementUtils , yang memiliki banyak properti pembantu seperti
protocol dan
hash yang membantu Anda mengetahui detail tautan.
Salah satu properti pembantu ini adalah properti
href , yang memberikan URL lengkap yang mencakup segala sesuatu yang URL relatif tidak miliki dalam atribut.
Akibatnya, untuk mendapatkan apa yang tertulis dalam atribut
href , Anda perlu menggunakan
el.getAttribute('href') .
12: tiga metode elemen <dialog>
Elemen
<dialog> relatif baru memiliki dua metode yang bermanfaat, tetapi cukup biasa, dan satu metode yang dapat disebut sangat bagus. Jadi, metode
show() dan
close() melakukan apa yang dapat Anda harapkan dari mereka, menunjukkan dan menyembunyikan jendela. Kami menyebutnya bermanfaat, tetapi biasa saja. Tetapi metode
showModal() akan menampilkan elemen
<dialog> di atas segalanya, menampilkannya di tengah jendela. Sebagai Sebenarnya, perilaku seperti itu biasanya diharapkan dari modal windows. Saat bekerja dengan elemen-elemen seperti itu, Anda tidak perlu memikirkan properti
z-index , secara manual menambahkan latar belakang buram, atau mendengarkan acara menekan tombol
Escape untuk menutup jendela yang sesuai. Browser tahu bagaimana modal windows seharusnya bekerja dan akan memastikan semuanya berjalan sebagaimana mestinya.
# 13: metode forEach ()
Terkadang, ketika Anda mendapatkan tautan ke daftar elemen, Anda bisa
forEach() pada elemen-elemen ini menggunakan metode
forEach() . Loop
for() adalah kemarin. Misalkan kita perlu mendaftar semua elemen
<a> dari halaman dalam log. Jika kami melakukan ini seperti yang ditunjukkan di bawah ini, kami akan menemukan pesan kesalahan:
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Untuk mengatasi masalah ini, Anda dapat menggunakan konstruksi berikut:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Intinya di sini adalah metode seperti
getElementsByTagName() mengembalikan objek bertipe
HTMLCollection , dan
querySelectorAll objek
querySelectorAll . Ini adalah antarmuka objek
NodeList memberi kita akses ke metode
forEach() (dan juga ke metode
keys() ,
values() dan
entries() ).
Bahkan, akan jauh lebih baik jika metode seperti itu hanya mengembalikan array normal, dan tidak menawarkan kepada kita sesuatu yang memiliki semacam metode yang tampaknya berguna yang tidak seperti array. Namun, jangan kecewa karena ini, karena orang-orang pintar dari ECMA memberi kami metode yang bagus -
Array.from() , yang memungkinkan kami mengubah segala sesuatu yang tampak seperti array menjadi array.
Sebagai hasilnya, Anda dapat menulis yang berikut ini:
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Dan ini hal kecil yang menyenangkan. Dengan mentransformasikannya menjadi sebuah array yang dulunya seperti itu, kita berkesempatan untuk menggunakan banyak metode array, seperti
map() ,
filter() dan
reduce() . Di sini, misalnya, cara membentuk array tautan eksternal pada halaman:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Ngomong-ngomong, saya sangat suka konstruksi
.filter(Boolean) karena ketika saya temui suatu saat dalam kode yang saya tulis sejak lama, saya hampir tidak bisa langsung memahami maknanya.
Nomor 14: bekerja dengan formulir
Anda sangat mungkin tahu bahwa elemen
<form> memiliki metode
submit() . Namun, kecil kemungkinan Anda tahu bahwa formulir memiliki metode
reset() , dan mereka memiliki metode
reportValidity() , yang berlaku ketika validasi mengisi elemen formulir digunakan.
Saat bekerja dengan formulir, di samping itu, Anda bisa menggunakan properti
elements mereka, yang, melalui suatu titik, memungkinkan Anda untuk mengakses elemen formulir menggunakan atribut
name mereka. Misalnya, konstruk
myFormEl.elements.email akan mengembalikan elemen
<input name="email" /> yang dimiliki oleh formulir ("milik" tidak selalu berarti "menjadi keturunan").
Perlu dicatat di sini bahwa properti
elements itu sendiri tidak mengembalikan daftar elemen biasa. Ini mengembalikan daftar kontrol (dan daftar ini, tentu saja, bukan sebuah array).
Berikut ini sebuah contoh. Jika ada tiga tombol radio pada formulir dan semuanya memiliki nama yang sama (
animal ),
formEl.elements.animal konstruksi akan memberikan tautan ke satu set tombol radio (1 kontrol, 3 elemen HTML). Dan jika Anda menggunakan desain
formEl.elements.animal.value , maka itu akan memberikan nilai tombol radio yang dipilih oleh pengguna.
Jika Anda memikirkannya, maka itu semua terlihat sangat aneh, jadi mari kita berurusan dengan contoh sebelumnya:
formEl adalah sebuah elemen.elements adalah objek HTMLFormControlsCollection yang menyerupai array tetapi tidak. Elemen-elemennya tidak harus elemen HTML.animal adalah seperangkat beberapa tombol radio, disajikan sebagai satu set karena fakta bahwa mereka semua memiliki atribut name sama (ada antarmuka RadioNodeList yang dirancang khusus untuk bekerja dengan tombol radio).value digunakan untuk mengakses atribut value dari tombol radio aktif dalam koleksi.
# 15: pilih metode ()
Mungkin di akhir materi akan lebih baik untuk berbicara tentang beberapa metode yang benar-benar menakjubkan, meskipun mungkin metode ini akan menjadi wahyu bagi seseorang. Jadi, metode
.select() memungkinkan Anda untuk memilih teks di bidang input yang dipanggil.
Ringkasan
Pada artikel ini, kami berbicara tentang metode dan properti yang sedikit diketahui yang dapat digunakan untuk bekerja dengan konten halaman web. Kami harap Anda menemukan sesuatu yang baru di sini untuk Anda sendiri, dan mungkin tidak hanya baru, tetapi juga bermanfaat.
Pembaca yang budiman! Apakah Anda menggunakan sarana interaksi terprogram dengan konten halaman web yang tidak dikenal luas?
