Pahlawan Tersembunyi dari Situs Web: Memahami DOM

"DOM" adalah istilah yang banyak digunakan dalam desain dan pengembangan web front-end. Ini adalah singkatan dari "Model Objek Dokumen", dan ini adalah bagian fundamental dari situs web.

Sama pentingnya dengan DOM, banyak orang tidak memahaminya. Faktanya, Anda dapat memprogram situs web selama bertahun-tahun tanpa belajar banyak tentangnya. Namun seiring kemajuan teknologi front-end, memahami DOM menjadi lebih penting.

Memahami Kontrak DOM

Dalam pemrograman berorientasi objek, ada konstruksi yang disebut antarmuka. Antarmuka tidak melakukan apa pun dengan sendirinya. Sebaliknya, hal itu menciptakan kontrak. Ia mengatakan bahwa apa pun dapat berinteraksi dengan apa pun, selama mengikuti aturan kontrak antarmuka.

Memiliki antarmuka memungkinkan setiap bagian dari program berinteraksi dengan bagian lain dari program dengan cara yang terkontrol dan dapat diprediksi. Antarmuka juga memungkinkan satu bagian program untuk bekerja dengan bagian lain, meskipun ia tidak tahu apa-apa tentang bagian program di sisi lain antarmuka.

Antarmuka seperti stopkontak di dinding Anda. Perangkat Anda tidak perlu mengetahui dari mana daya berasal selama voltase benar. Trafo di sudut tidak perlu tahu apa yang dinyalakannya. Itu hanya perlu mengirim listrik dengan voltase yang sesuai ke rumah Anda.

DOM adalah lapisan antarmuka antara halaman web dan kode yang membuat dan mengubahnya. Saat Anda mengunjungi sebuah situs web, Anda melihat bagaimana browser merender DOM situs web itu. Saat Anda menulis HTML, Anda sebenarnya memprogram menggunakan DOM API (antarmuka pemrograman).

Standar DOM dikelola oleh organisasi bernama Konsorsium World Wide Web, atau W3C. Mereka telah menciptakan dokumentasi yang sangat mendetail yang mendefinisikan DOM standar.

Pada titik ini, Anda mungkin berpikir mereka tidak melakukan pekerjaan dengan sangat baik. Bagaimanapun, ada begitu banyak masalah yang disebabkan oleh masalah kompatibilitas lintas browser.

Masalahnya bukan pada standarnya. Itu dengan browser itu sendiri. Banyak browser telah menambahkan fungsionalitas ke implementasi DOM mereka yang tidak sesuai dengan standar W3C. Terkadang fungsionalitas itu menjadi populer dan diimplementasikan ke dalam standar DOM, memaksa browser lain untuk menyusul.

Masalah lainnya adalah beberapa orang masih menggunakan browser versi lama yang tidak memiliki standar DOM bawaan terbaru. Dan terkadang browser tidak menerapkan standar dengan benar.

Bagaimana DOM Terstruktur

Anda dapat menganggap DOM seperti pohon. Itu elemen adalah batang, dan semua elemen di dalamnya adalah cabang. Saat Anda menyarangkan elemen HTML di dalam elemen induk, Anda sebenarnya membuat cabang dari cabang itu. Istilah yang tepat untuk setiap cabang adalah "node".

Struktur pohon menciptakan hubungan logis antar node, seperti pohon keluarga. Setiap node dapat memiliki induk dan leluhur yang menjadi cabangnya. Mereka bisa memiliki saudara kandung. Dan node dapat memiliki turunan dan turunan. Berpikir dalam istilah-istilah ini sangat membantu saat menggunakan JavaScript dan CSS untuk berinteraksi dengan DOM.

Bagaimana HTML Berinteraksi dengan DOM

DOM didefinisikan dengan membuat objek dokumen dengan antarmuka dokumen. Kode HTML Anda adalah cara paling langsung untuk membuat dokumen. HTML memberi Anda cara sederhana untuk menentukan dokumen tanpa perlu melakukan pemrograman tradisional.

Jika Anda baru memulai dengan HTML, berikut ini lima tips untuk membiasakan diri dengannya.

5 Langkah untuk Memahami Kode HTML Dasar

HTML adalah tulang punggung setiap halaman web. Jika Anda seorang pemula, izinkan kami memandu Anda melalui langkah-langkah dasar untuk memahami HTML.

HTML lebih sederhana dan lebih pemaaf daripada bahasa pemrograman tradisional. Itu membuat interaksi dengan DOM mudah bagi desainer web pemula.

Bagaimana CSS Berinteraksi dengan DOM

Setelah HTML Anda menyusun dokumen DOM, CSS dapat mengatur gaya dokumen itu. Untuk melakukan itu, ia harus dapat menemukan elemen yang ingin Anda gaya. Ini dilakukan dalam beberapa cara.

Anda dapat mengakses node dokumen dengan mereferensikan elemen dengan nama, seperti dan. CSS juga dapat mengakses elemen secara langsung dengan mereferensikan kelas dan Indo nama. Penataan gaya kelas diterapkan ke beberapa elemen sehingga Anda dapat menata semuanya pada saat yang bersamaan. Sebaliknya, gaya id menerapkan perubahan hanya ke satu elemen.

Anda juga dapat mengakses struktur pohon keluarga dengan CSS dan akses fine-tune untuk kontrol lebih. Pemilih CSS memungkinkan Anda memilih banyak elemen dan memberi Anda sekumpulan trik untuk menemukannya. Anda dapat mencari anak menurut keturunan mereka, kombinasi kelas, dan banyak lagi.

Bagaimana JavaScript Berinteraksi dengan DOM

JavaScript memiliki kendali paling besar atas dokumen karena JavaScript adalah bahasa pemrograman aktual dengan objek, kontrol aliran, variabel, dll. DOM menyediakan beberapa antarmuka yang memungkinkan JavaScript untuk memanipulasi dokumen, elemen, dan node lainnya.

Terkait: Apa Itu JavaScript?

JavaScript dapat menambah dan menghapus node serta mengubah gayanya. Dan JavaScript dapat mengawasi kejadian di dokumen, seperti mengarahkan mouse ke atas sebuah elemen, mengklik, dan menekan tombol.

JavaScript dapat mencari dan menavigasi pohon dokumen dengan cara yang sangat mirip dengan CSS. Ia dapat menemukan elemen berdasarkan id dan kelas. Dan itu bisa mengambil daftar elemen anak sebagai array.

Masa Depan Pengembangan Web dan DOM

Internet telah banyak berubah sejak awal. Pada masa-masa awal, JavaScript banyak digunakan untuk efek khusus dan tampilan data sederhana. Sebagian besar situs web tidak lebih dari brosur digital. AJAX mengubah semua itu.

AJAX memungkinkan situs web memperbarui data yang ditampilkan dari server dengan cepat tanpa memuat ulang halaman. Sebelum AJAX, setiap perubahan pada data hanya dapat dilihat saat halaman dimuat ulang, atau pengguna menavigasi ke halaman lain.

Setelah AJAX, aplikasi web menjadi semakin populer. Internet bukan lagi kumpulan situs web statis sederhana dan beberapa aplikasi fungsionalitas tinggi, seperti eBay. Sekarang internet hampir menjadi sistem operasi kedua, penuh dengan aplikasi yang sangat berfungsi.

Seiring dengan pertumbuhan ekspektasi pengguna, teknologi harus mengikuti. JavaScript bukanlah bahasa yang paling kuat atau tercepat. Itu juga menderita dari beberapa masalah seperti kesalahan angka floating-point yang membuatnya kurang diminati oleh pengembang. Di sinilah peran WebAssembly.

WebAssembly membawa banyak manfaat kode asli ke browser, termasuk peningkatan kecepatan dan akses perangkat keras yang lebih baik. Ini akan memungkinkan programmer menggunakan bahasa lain untuk membangun situs web seperti C ++ dan Rust.

Tetapi bahkan dengan peningkatan besar yang akan dibawa oleh WebAssembly, DOM akan tetap ada, menyediakan antarmuka yang konsisten antara kode dan apa yang ditampilkan di browser.

Cara Menggunakan Outlook dalam Mode Gelap

Kurangi ketegangan mata dan tingkatkan masa pakai baterai Anda dengan mengalihkan Microsoft Outlook ke mode Gelap.

Tentang Penulis