Objek Dokumen mewakili dokumen yang ditampilkan di jendela itu. Objek Dokumen memiliki berbagai properti yang merujuk ke objek lain yang memungkinkan akses dan modifikasi konten dokumen. Pada artikel ini, kita akan memahami HTML DOM.
- Konsep HTML DOM
- Apa itu DOM HTML
- Apa DOM HTML itu BUKAN
- Darimana DOM Berasal
- Properti HTML DOM
- Menemukan Elemen HTML
Konsep HTML DOM
Cara konten yang didokumentasikan diakses dan dimodifikasi disebut Model Objek Dokumen , atau DOM. Objek diatur dalam hierarki. Struktur hierarki ini berlaku untuk organisasi objek dalam dokumen Web.
- Objek jendela & minus Puncak hierarki. Ini adalah elemen tertinggi dari hierarki objek.
- Objek dokumen & minus Setiap dokumen HTML yang dimuat ke dalam jendela menjadi objek dokumen. Dokumen tersebut berisi konten halaman.
- Objek formulir & minus Segala sesuatu yang terlampir dalam tag… menyetel objek formulir.
- Elemen kontrol formulir & minus Objek formulir berisi semua elemen yang ditentukan untuk objek itu seperti bidang teks, tombol, tombol radio, dan kotak centang.
Apa itu DOM HTML
Model Objek Dokumen adalah API pemrograman untuk dokumen. Model objek itu sendiri sangat mirip dengan struktur dokumen yang dimodelkannya. Misalnya, pertimbangkan tabel ini, diambil dari dokumen HTML:
| Shady Grove | Aeolian |
| Di atas Sungai, Charlie | Dorian |
Apa DOM HTML itu BUKAN
Bagian ini dirancang untuk memberikan pemahaman yang lebih tepat tentang Model Objek Dokumen dengan membedakannya dari sistem lain yang mungkin tampak seperti itu.
Meskipun Model Objek Dokumen sangat dipengaruhi oleh HTML Dinamis, di Tingkat 1, Model Objek Dokumen tidak menerapkan semua HTML Dinamis. Secara khusus, peristiwa belum ditentukan. Level 1 dirancang untuk meletakkan dasar yang kokoh untuk jenis fungsionalitas ini dengan menyediakan model dokumen itu sendiri yang kuat dan fleksibel.
Model Objek Dokumen bukan spesifikasi biner. Program Model Objek Dokumen yang ditulis dalam bahasa yang sama akan kompatibel dengan kode sumber di seluruh platform, tetapi Model Objek Dokumen tidak menentukan bentuk interoperabilitas biner apa pun.
Model Objek Dokumen bukanlah cara untuk mempertahankan objek ke XML atau HTML. Alih-alih menentukan bagaimana objek dapat direpresentasikan dalam XML, Model Objek Dokumen menentukan bagaimana dokumen XML dan HTML direpresentasikan sebagai objek, sehingga mereka dapat digunakan dalam program berorientasi objek.
Model Objek Dokumen bukanlah sekumpulan struktur data, ini adalah model objek yang menentukan antarmuka. Meskipun dokumen ini berisi diagram yang menunjukkan hubungan induk / anak, ini adalah hubungan logis yang ditentukan oleh antarmuka pemrograman, bukan representasi dari struktur data internal tertentu.
Model Objek Dokumen tidak mendefinisikan 'semantik dalam yang sebenarnya' dari XML atau HTML. Semantik dari bahasa-bahasa tersebut ditentukan oleh bahasa itu sendiri.
Model Objek Dokumen adalah model pemrograman yang dirancang untuk menghormati semantik ini. Model Objek Dokumen tidak memiliki konsekuensi apa pun untuk cara Anda menulis dokumen XML dan HTML, dokumen apa pun yang dapat ditulis dalam bahasa ini dapat direpresentasikan dalam Model Objek Dokumen.
Model Objek Dokumen, meskipun namanya, bukanlah pesaing Model Objek Komponen (COM). COM, seperti CORBA, adalah cara independen bahasa untuk menentukan antarmuka dan objek. Model Objek Dokumen adalah sekumpulan antarmuka dan objek yang dirancang untuk mengelola dokumen HTML dan XML. DOM mungkindiimplementasikan menggunakan sistem bahasa-independen seperti COM atau CORBA, itu juga dapat diimplementasikan menggunakan binding khusus bahasa seperti binding Java atau ECMAScript yang ditentukan dalam dokumen ini.
Dari Mana Model Objek Dokumen Berasal
Model Objek Dokumen berasal dari spesifikasi yang memungkinkan skrip JavaScript dan program Java menjadi portabel di antara browser web. HTML dinamis adalah nenek moyang langsung dari Model Objek Dokumen, dan awalnya dianggap sebagian besar dalam istilah browser.
Namun, ketika Kelompok Kerja Model Objek Dokumen dibentuk, itu juga bergabung dengan vendor di domain lain, termasuk editor HTML atau XML dan repositori dokumen. Beberapa vendor ini telah bekerja dengan SGML sebelum XML dikembangkan sebagai hasilnya, Model Objek Dokumen telah dipengaruhi oleh SGML Groves dan standar HyTime. Beberapa dari vendor ini juga telah mengembangkan model objek mereka sendiri untuk disediakan oleh dokumenAPI pemrograman untuk editor SGML / XML atau repositori dokumen, dan model objek ini juga mempengaruhi Model Objek Dokumen.
Properti HTML DOM
Mari kita lihat properti objek dokumen yang dapat diakses dan dimodifikasi oleh objek dokumen.
- Objek Jendela: Objek Jendela selalu di bagian atas hierarki.
- Objek dokumen: Ketika dokumen HTML dimuat ke dalam jendela, itu menjadi objek dokumen.
- Objek Formulir: Itu diwakili oleh untuk m tag.
- Tautkan Objek: Itu diwakili oleh tautan tag.
- Objek Jangkar: Itu diwakili oleh a href tag.
- Elemen Kontrol Formulir: Formulir dapat memiliki banyak elemen kontrol seperti bidang teks, tombol, tombol radio, dan kotak centang, dll.
Metode Objek Dokumen :
- tulis ('string'): menulis string yang diberikan pada dokumen.
- getElementById (): mengembalikan elemen yang memiliki nilai id yang diberikan.
- getElementsByName (): mengembalikan semua elemen yang memiliki nilai nama tertentu.
- getElementsByTagName (): mengembalikan semua elemen yang memiliki nama tag tertentu.
- getElementsByClassName (): mengembalikan semua elemen yang memiliki nama kelas yang diberikan.
Menemukan Elemen HTML
Saat Anda ingin mengakses elemen HTML dengan JavaScript, Anda harus menemukan elemennya terlebih dahulu.
Ada banyak cara melakukan ini:
- Menemukan elemen HTML dengan id
- Menemukan elemen HTML dengan nama tag
- Menemukan elemen HTML dengan nama kelas
Menemukan Elemen HTML berdasarkan Id
Cara termudah untuk menemukan elemen HTML di DOM, adalah dengan menggunakan id elemen.
Contoh
Menemukan Elemen HTML dengan Nama Tag
Contoh ini menemukan elemen dengan id = 'main', dan kemudian menemukan semua
elemen di dalam 'utama':
Dengan ini, kita sampai pada akhir artikel DOM HTML ini. Saya harap Anda mendapatkan pemahaman tentang berbagai aspek dari DOM HTML, Model Objek Dokumen.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
system.exit (0)
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog 'Gambar HTML' dan kami akan menghubungi Anda kembali.