Objek Dokumen mewakili dokumen yang dipaparkan di tetingkap itu. Objek Dokumen mempunyai pelbagai sifat yang merujuk kepada objek lain yang memungkinkan akses dan pengubahsuaian kandungan dokumen. Dalam artikel ini, kita akan memahami HTML DOM.
- Konsep DOM HTML
- Apa itu HTML DOM
- Apa itu DOM HTML TIDAK
- Dari mana datangnya DOM
- Sifat HTML DOM
- Mencari Elemen HTML
Konsep DOM HTML
Cara kandungan didokumentasikan diakses dan diubah namanya disebut Model Objek Dokumen , atau DOM. Objek disusun secara hierarki. Struktur hierarki ini berlaku untuk penyusunan objek dalam dokumen Web.
- Objek tetingkap & tolak Bahagian atas hierarki. Ini adalah elemen paling tinggi dari hirarki objek.
- Objek dokumen & tolak Setiap dokumen HTML yang dimuat ke dalam tetingkap menjadi objek dokumen. Dokumen tersebut mengandungi kandungan halaman.
- Objek bentuk & tolak Segala-galanya yang dilampirkan dalam… tag menetapkan objek bentuk.
- Elemen kawalan bentuk & tolak Objek bentuk mengandungi semua elemen yang ditentukan untuk objek tersebut seperti bidang teks, butang, butang radio, dan kotak pilihan.
Apa itu HTML DOM
Model Objek Dokumen adalah API pengaturcaraan untuk dokumen. Model objek itu sendiri menyerupai struktur dokumen yang dimodelkannya. Sebagai contoh, pertimbangkan jadual ini, diambil dari dokumen HTML:
| Shady Grove | Aeolian |
| Di Sungai, Charlie | Dorian |
Apa itu DOM HTML TIDAK
Bahagian ini dirancang untuk memberikan pemahaman yang lebih tepat mengenai Model Objek Dokumen dengan membezakannya dari sistem lain yang sepertinya seperti itu.
Walaupun Model Objek Dokumen sangat dipengaruhi oleh Dynamic HTML, di Level 1, itu tidak menerapkan semua Dynamic HTML. Khususnya, peristiwa belum ditentukan. Tahap 1 dirancang untuk meletakkan asas yang kukuh untuk fungsi seperti ini dengan menyediakan model dokumen yang kuat dan fleksibel.
apa itu sains data?
Model Objek Dokumen bukanlah spesifikasi binari. Program Model Objek Dokumen yang ditulis dalam bahasa yang sama akan menjadi kod sumber yang serasi di semua platform, tetapi Model Objek Dokumen tidak menentukan bentuk interoperabiliti binari.
Model Objek Dokumen bukanlah cara untuk meneruskan objek ke XML atau HTML. Daripada menentukan bagaimana objek dapat diwakili dalam XML, Model Objek Dokumen menentukan bagaimana dokumen XML dan HTML diwakili sebagai objek, sehingga dapat digunakan dalam program berorientasi objek.
Model Objek Dokumen bukan sekumpulan struktur data, itu adalah model objek yang menentukan antara muka. Walaupun dokumen ini mengandungi rajah yang menunjukkan hubungan ibu bapa / anak, ini adalah hubungan logik yang ditentukan oleh antara muka pengaturcaraan, bukan perwakilan struktur data dalaman tertentu.
Model Objek Dokumen tidak mendefinisikan 'semantik dalaman sebenar' XML atau HTML. Semantik bahasa-bahasa tersebut ditentukan oleh bahasa-bahasa itu sendiri.
Model Objek Dokumen adalah model pengaturcaraan yang dirancang untuk menghormati semantik ini. Model Objek Dokumen tidak memiliki konsekuensi untuk cara Anda menulis dokumen XML dan HTML, setiap dokumen yang dapat ditulis dalam bahasa-bahasa ini dapat ditunjukkan dalam Model Objek Dokumen.
Model Objek Dokumen, walaupun namanya, bukan pesaing Model Komponen Objek (COM). COM, seperti CORBA, adalah cara bebas bahasa untuk menentukan antara muka dan objek Model Dokumen Objek adalah sekumpulan antara muka dan objek yang dirancang untuk menguruskan dokumen HTML dan XML. DOM mungkindilaksanakan menggunakan sistem bebas bahasa seperti COM atau CORBA, ia juga dapat dilaksanakan menggunakan pengikatan khusus bahasa seperti Java atau ECMAScript binding yang dinyatakan dalam dokumen ini.
Dari mana Model Objek Dokumen Berasal
Model Objek Dokumen berasal sebagai spesifikasi untuk membolehkan skrip JavaScript dan program Java menjadi mudah alih di antara penyemak imbas web. HTML dinamik adalah nenek moyang langsung Model Objek Dokumen, dan pada mulanya ia dianggap sebagai penyemak imbas.
Namun, ketika Kumpulan Kerja Model Objek Dokumen dibentuk, ia 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 standard HyTime. Beberapa vendor ini juga telah mengembangkan model objek mereka sendiri untuk dokumen untuk disediakanAPI pengaturcaraan untuk editor SGML / XML atau repositori dokumen, dan model objek ini juga telah mempengaruhi Model Objek Dokumen.
Sifat HTML DOM
Mari kita lihat sifat objek dokumen yang dapat diakses dan diubah suai oleh objek dokumen.
- Objek Tetingkap: Objek Tetingkap sentiasa berada di puncak hierarki.
- Objek dokumen: Apabila dokumen HTML dimuat ke dalam tetingkap, dokumen menjadi objek dokumen.
- Objek Bentuk: Ia diwakili oleh bentuk tanda nama.
- Pautan Objek: Ia diwakili oleh pautan tanda nama.
- Objek Anchor: Ia diwakili oleh href tanda nama.
- Elemen Kawalan Borang: Bentuk boleh mempunyai banyak elemen kawalan seperti bidang teks, butang, butang radio, dan kotak pilihan, dll.
Kaedah Objek Dokumen :
- tulis ('tali'): menulis rentetan yang diberikan pada dokumen.
- getElementById (): mengembalikan elemen yang mempunyai nilai id yang diberikan.
- getElementsByName (): mengembalikan semua elemen yang mempunyai nilai nama yang diberikan.
- getElementsByTagName (): mengembalikan semua elemen yang mempunyai nama tag yang diberikan.
- getElementsByClassName (): mengembalikan semua elemen yang mempunyai nama kelas yang diberikan.
Mencari Elemen HTML
Apabila anda ingin mengakses elemen HTML dengan JavaScript, anda mesti mencari elemen tersebut terlebih dahulu.
Terdapat beberapa cara untuk melakukan ini:
- Mencari elemen HTML mengikut id
- Mencari elemen HTML mengikut nama tag
- Mencari elemen HTML mengikut nama kelas
Mencari Elemen HTML mengikut Id
Cara termudah untuk mencari elemen HTML di DOM, adalah dengan menggunakan elemen id.
Contohnya
Mencari Elemen HTML mengikut Nama Tag
Contoh ini menemui elemen dengan id = 'main', dan kemudian menemui semua
elemen di dalam 'utama':
Dengan ini, kita akan mengakhiri artikel HTML DOM ini. Saya harap anda dapat memahami pelbagai aspek HTML DOM, Model Objek Dokumen.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Gambar HTML' dan kami akan menghubungi anda.