Dari seorang penerjemah: David Gilbertson adalah seorang penulis terkenal yang menulis tentang teknologi web dan cryptocurrency. Dia mampu mengumpulkan pembaca dalam jumlah besar, yang menceritakan tentang segala macam trik dan bidang yang menarik.
Pengantar kecilMari kita bahas perbedaan antara HTML dan DOM.
Misalnya, ambil elemen
tabel dari HTML. Anda dapat menggunakannya dalam file dengan ekstensi .html. Di dalamnya, kami menunjukkan serangkaian atribut yang menentukan penampilan dan "perilaku" halaman.
Dan itu saja, tidak ada hubungannya dengan JavaScript.
DOM adalah sesuatu yang memungkinkan Anda untuk menggabungkan kode JavaScript Anda dengan elemen HTML dalam dokumen sehingga Anda dapat berinteraksi dengan mereka sebagai objek.
Ini adalah model dokumen-dalam-objek.
Setiap jenis elemen dalam HTML memiliki antarmuka "DOM" sendiri, yang mendefinisikan properti dan metode. Misalnya,
tabel memiliki antarmuka yang disebut
HTMLTableElement .
Anda bisa mendapatkan tautan ke elemen tertentu dengan menulis sesuatu seperti ini:
Anda memiliki akses ke semua properti dan metode yang tersedia untuk jenis elemen tertentu. Misalnya, Anda dapat mengakses properti nilai menggunakan searchBox.value, atau mengatur kursor ke posisi tertentu menggunakan searchBox.focus ().
Sekarang mari kita bahas satu hal lagi yang penting: sebagian besar elemen tidak memiliki metode yang menarik, jadi mudah untuk melewatkan sesuatu yang penting jika Anda tidak menyelidiki masalah ini dengan sengaja.
Tapi, untungnya, perhatian terhadap detail dan studi spesifikasi adalah keahlian saya. Karena itu, saya melakukan semua yang diperlukan dan saya menulis tentang hasil di artikel ini.
Jika Anda ingin mencoba sendiri menangani DOM, Anda harus menggunakan alat peramban untuk mempelajari beberapa elemen. Untuk melakukan ini, pilih salah satunya di elemen tree dan ketik $ 0 di konsol. Ini akan memberi Anda tautan ke item yang Anda pilih. Untuk mengonversinya menjadi objek, ketikkan dir ($ 0).
Ada banyak hal
yang dapat Anda lakukan di konsol .
Rekomendasi Skillbox: Kursus Online Pengembang Web
Kami mengingatkan Anda: Untuk semua pembaca Habr - diskon 10.000 rubel saat mendaftar untuk kursus Skillbox menggunakan kode promosi Habr.
1 Metode tabel
Ada banyak metode mudah yang memungkinkan Anda untuk merakit meja seperti furnitur di Ikea.
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';
Di sini Anda melihat tidak hanya document.createElement (). Misalnya, metode .insertRow () akan inline
tbody jika Anda mengatur panggilan ke elemen ini langsung di pohon. Bukankah itu luar biasa?
2 scrollIntoView ()
Anda tahu bahwa jika Anda memiliki sesuatu yang ada di URL, maka ketika halaman dibuka, browser akan menggulir ke elemen dengan ID ini?
Ini biasanya banyak membantu, tetapi tidak berfungsi jika Anda merender elemen ini setelah halaman dimuat. Untuk memanfaatkan peluang yang dijelaskan di atas, cukup tentukan document.querySelector (document.location.hash) .scrollIntoView ();
Nomor 3 disembunyikan
Ya, itu seperti metode, tetapi karena ada setter (metode untuk menetapkan properti), maka itu dapat dianggap sebagai metode.
Namun, pernahkah Anda menggunakan myElement.style.display = 'tidak ada' untuk menyembunyikan elemen? Jika demikian, maka jangan lakukan ini.
Di mana lebih baik menggunakan myElement.hidden = true.
Nomor 4 beralih ()
Kita dapat menggunakan metode ini untuk menambah atau menghapus kelas elemen menggunakan myElement.classList.toggle ('some-class').
Dan jika Anda pernah menambahkan kelas menggunakan if, maka pikirkan: mungkin Anda harus mencoba sesuatu yang lain?
Misalnya, Anda cukup menggunakan parameter kedua untuk metode sakelar. Anda harus meneruskannya ke metode switching. Jika ini terjadi, kelas Anda akan ditambahkan ke elemen:
el.classList.toggle('some-orange-class', theme === 'orange');
Ya, saya mengerti apa yang Anda pikirkan saat ini: ini bukan arti dari kata “toogle” itu sendiri. Yang ada di belakang Internet Explorer? setuju dengan ini dan ungkapkan protes mereka tanpa menggunakan parameter kedua sama sekali.
Tapi mari kita dapatkan kembali. Kebebasan untuk memilih!
No. 5. querySelector ()
Yah, Anda pasti harus tahu ini, tetapi saya menduga bahwa sekitar 17% pembaca tidak menyadari bagaimana metode ini dapat digunakan bersama dengan elemen.
Contoh: myElement.querySelector ('. My-class') akan menunjukkan korespondensi elemen yang memiliki kelas my-class dan "anak-anak" dari myElement.
No. 6. paling dekat
Metode ini tersedia untuk semua elemen yang melihat struktur elemen. Ini sedikit terbalik untuk querySelector (). Oleh karena itu, kita dapat menggunakan judul bagian saat ini dengan cara ini:
myElement.closest('article').querySelector('h1');
Kita mulai dengan
artikel dan diakhiri dengan
h1 pertama.
Nomor 7 getBoundingClientRect ()
Metode mengembalikan objek dengan informasi terperinci tentang elemen yang kami tentukan.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Tapi hati-hati: contoh ini menyebabkan redraw. Bergantung pada perangkat dan kompleksitas halaman Anda, ini mungkin membutuhkan beberapa milidetik. Karena itu, ingatlah ini jika Anda menyebutnya berulang kali, misalnya dalam animasi.
Tidak semua browser mengembalikan semua nilai ini.
Nomor 8 pertandingan ()
Saya ingin memeriksa apakah elemen tertentu milik kelas tertentu.
Kesulitan maksimum:
if (myElement.className.indexOf('some-class') > -1) { // do something } , : if (myElement.className.includes('some-class')) { // do something }
Apa yang Anda butuhkan:
if (myElement.matches('.some-class')) {
No. 9. masukkanAdjacentElement ()
Saya menemukannya hari ini! Ini mirip dengan appendChild (), tetapi memberi sedikit lebih banyak kontrol dalam proses penambahan anak.
parentEl.insertAdjacentElement ('beforeend', newEl) melakukan hal yang sama dengan parentEl.appendChild (newEl), tetapi Anda dapat menentukan beegebegin, afterbegin atau afterend untuk meletakkannya di tempat yang ditunjukkan oleh nama-nama ini.
Berapa banyak kendali!
No. 10. mengandung ()
Pernahkah Anda ingin tahu apakah ada elemen di dalam elemen lainnya? Saya ingin tahu ini setiap saat.
Misalnya, jika saya menangani klik mouse dan ingin memahami apakah itu terjadi di dalam atau di luar (sehingga saya bisa menutupnya), saya melakukan ini:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Di sini modal El adalah referensi ke jendela modal, dan e.target adalah elemen untuk diklik.
Itu lucu, tetapi saya sering membuat kesalahan dalam logika ketika saya mencoba menggunakan metode ini pertama kali. Dan kemudian ketika saya mencoba untuk memperbaiki kesalahan, saya salah lagi. Dan metode ini membantu untuk segera menghadapinya.
No. 11. getAttribute ()
Salah satu metode elemen yang paling tidak berguna, tetapi tidak dalam kasus khusus ini.
Apakah Anda ingat bahwa biasanya properti merujuk ke atribut?
Kadang-kadang ini bukan masalahnya, misalnya, ketika href adalah atribut elemen, misalnya href = "/ animals / cat"> Cat </ a.
el.href tidak akan memberi kami / hewan / kucing, seperti yang Anda harapkan. Ini karena elemen mengimplementasikan antarmuka HTMLHyperlinkElementUtils, yang merupakan sekelompok properti pembantu seperti protokol dan hash yang mengarah ke objek tautan.
Ini adalah salah satu properti href yang berguna yang akan memberikan L penuh, bukan URL relatif dalam atribut.
Jadi Anda harus menggunakan el.getAttribute ('href') jika Anda memerlukan string literal di dalam atribut href.
No. 12. dialog
Elemen
dialog yang relatif baru memiliki dua metode yang baik dan satu ideal. show () dan close () melakukan apa yang diharapkan dari mereka. Dan itu bagus, kurasa.
Tetapi showModal () akan menampilkan
dialog di atas elemen lain yang ditempatkan pada halaman. Tidak perlu untuk z-index, atau secara manual menambahkan latar belakang redup, atau melacak penekanan tombol Escape. Browser tahu cara modal windows bekerja dan akan melakukan segalanya untuk Anda. Dan itu luar biasa.
13 forEach ()
Terkadang, saat Anda membutuhkan referensi ke daftar elemen, Anda bisa menggunakan forEach ().
Tetapi bagaimana jika Anda perlu mencatat semua URL untuk semua tautan halaman? Anda dapat melakukan ini dan melihat kesalahannya.
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Atau lakukan ini:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Intinya adalah, getElementsByTagName dan lainnya get ... metode mengembalikan HTMLCollection, tetapi querySelectorAll mengembalikan NodeList.
Dan antarmuka NodeList memberi kita metode forEach () (bersama dengan kunci (), nilai (), dan entri ()).
Orang baik dari ECMA memberi kami Array.from (), yang mengubah segala sesuatu yang tampak seperti array menjadi array itu sendiri.
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Bonus! Saat membuat array, Anda dapat menggunakan peta (), dan filter (), dan mengurangi (), atau metode lainnya. Misalnya, mengembalikan array tautan eksternal:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Saya sangat suka meresepkan filter. (Boolean), karena tanpa itu saya harus menggaruk kepala saya di masa depan, mencoba mengingat apa itu dan cara kerjanya.
No. 14. Bentuk
Formulir , seperti yang mungkin sudah Anda ketahui, memiliki metode kirim (). Agak sedikit Anda tahu bahwa formulir memiliki metode reset () dan dapat melaporkan nilai Validitas () jika Anda menggunakan validasi pada elemen formulir Anda.
Anda juga bisa menggunakan properti notasi titik elemen formulir untuk merujuk ke elemen dengan atribut namanya. Sebagai contoh, myFormEl.elements.email akan mengembalikan
nama input = "email" / elemen yang menjadi milik
form ("milik" tidak selalu berarti bahwa itu adalah "turunan").
Dan sekarang aku berbohong. Faktanya adalah bahwa elemen tidak mengembalikan daftar elemen. Ini mengembalikan daftar kontrol (dan, tentu saja, ini bukan sebuah array).
Contoh: jika Anda memiliki tiga tombol radio, masing-masing dengan nama yang sama dengan hewan, maka formEl.elements.animal akan memberi Anda tautan ke rangkaian tombol radio ini (1 kontrol, 3 elemen).
Dan formEl.elements.animal.value akan mengembalikan nilai tombol radio yang dipilih.
Ini adalah sintaks aneh, jika Anda memikirkannya. Jatuhkan orang-orang: formEl adalah elemen, elemen adalah HTMLFormControlsCollection, bukan array yang cukup, di mana setiap elemen tidak harus elemen HTML. Animal memiliki beberapa switch yang digabungkan hanya karena mereka memiliki atribut nama yang sama (ada antarmuka RadioNodeList untuk ini), dan nilainya memeriksa atribut nilai dari setiap switch dalam koleksi.
Nomor 15 pilih ()
Metode .select () akan memilih semua teks dalam input apa pun yang Anda panggil.
Terima kasih sudah membaca, semoga semua ini bermanfaat untukmu. Selalu periksa kemampuan peramban Anda, sehingga nantinya tidak akan terlalu menyakitkan.
Praktis dari Skillbox , yang akan membantu programmer pemula menjadi spesialis yang dicari: