Pengaturcaraan DOM: Memanipulasi Halaman Web Dengan Kod

Pendedahan: Sokongan anda membantu mengekalkan laman web ini! Kami memperoleh bayaran rujukan untuk beberapa perkhidmatan yang kami cadangkan di halaman ini.


Model Objek Dokumen atau DOM menerangkan bagaimana setiap elemen dalam halaman HTML berkaitan dengan dokumen itu sendiri.

Pada hakikatnya, setiap halaman HTML, XHTML, atau XML setelah dimuat naik ke web, menjadi dokumen. DOM melihat dokumen-dokumen tersebut sebagai struktur pokok. Dokumen itu sendiri adalah struktur paling atas dan setiap elemen di halaman diwakili sebagai objek.

Ini bermaksud bahawa setiap gambar, setiap perenggan, setiap tajuk, dan sebagainya adalah objek terpisah yang mempunyai hubungannya sendiri dengan dokumen.

Dengan memanggil elemen tertentu dengan namanya, pembangun web dapat mengubah elemen tersebut. Ini bermaksud pembangun web boleh mengambil dan menetapkan sifatnya.

DOM juga memungkinkan untuk menambah dan membuang unsur atau objek. Akhirnya, ia membolehkan pembangun web menangkap dan bertindak balas terhadap tindakan pengguna atau penyemak imbas, dengan berkesan menangani peristiwa.

Sejarah Ringkas DOM

Sejarah DOM bermula sejak zaman perang penyemak imbas dan pembebasan bahasa skrip pertama.

Setelah Netscape Navigator dan Microsoft Internet Explorer mengeluarkan versi JavaScript mereka sendiri, pembangun mendapati mereka memerlukan antarmuka yang membolehkan elemen di halaman diakses dengan bahasa skrip tersebut.

Secara semula jadi, setiap penyemak imbas mempunyai kaedah mereka sendiri tetapi ini mengakibatkan banyak masalah keserasian kerana vendor penyemak imbas cuba mengalahkan satu sama lain dengan menambahkan ciri baru.

Akhirnya, W3C mulai mengerjakan spesifikasi untuk XML DOM, juga disebut Level 1 DOM yang seharusnya mudah alih di semua pelayar.

Ini juga dimaksudkan untuk bekerja untuk bahasa pengaturcaraan yang dapat memanipulasi dokumen XML. Spesifikasi ini diadopsi sebagai standard pada akhir tahun 1998. Versi semasa adalah DOM 4, W3C Recommendation dari 2015.

Dua Pandangan DOM

DOM terdiri daripada dua bahagian; teras dan HTML. Inti adalah asas untuk bahagian HTML dan digunakan untuk mewakili fungsi yang diperlukan untuk dokumen XML untuk memanipulasi struktur dokumen, elemen dan atributnya.

Bahagian HTML mentakrifkan elemen HTML tertentu dan fungsi mereka. Oleh itu, DOM dilihat sebagai API dan objek.

DOM sebagai API

Sebagai antara muka pengaturcaraan aplikasi (API), digunakan untuk dokumen HTML dan XML. Ini memberi kita sekumpulan objek standar yang digunakan dalam dokumen-dokumen tersebut dan juga berfungsi sebagai model bagaimana objek-objek tersebut dapat digabungkan, diakses, dan dimanipulasi.

DOM sebagai Objek

Model objek dalam DOM merujuk kepada fakta bahawa dokumen dan elemen didefinisikan sebagai objek. Dalam pengertian itu, ia mengenal pasti:

  • Antara muka dan objek yang digunakan untuk mewakili dan memanipulasi dokumen
  • Kelakuan dan sifat mereka
  • Hubungan mereka.

Struktur DOM

Secara struktural, DOM menyerupai dokumen yang dimodelkannya. Setiap elemen dokumen dianggap sebagai objek atau simpul, disusun secara hierarki.

Setiap nod mempunyai fungsi dan identiti dan setiap nod juga boleh mempunyai sebilangan nod anak. Nod yang paling biasa adalah elemen, teks, dan atribut.

Nod Unsur

Nod elemen adalah teg individu atau pasangan tag dalam kod HTML. Mereka boleh mempunyai simpul anak, yang mungkin unsur lain atau nod teks.

Nod Teks

Node teks adalah kandungan sebenar di antara tag HTML. Mereka biasanya mempunyai simpul induk dan kadangkala simpul saudara tetapi mereka tidak dapat mempunyai node anak mereka sendiri.

Node Atribut

Node atribut agak istimewa. Mereka tidak mempunyai simpul induk, anak, atau simpul saudara tetapi sebaliknya mereka mewakili atribut yang ditentukan dalam tag HTML, seperti atribut href pada tag atau atribut src dalam tag img.

Atribut baru dapat dibuat menggunakan document.createAttribute () dan kemudian anda boleh menetapkannya ke simpul elemen dan menetapkan nilainya. Cara lain untuk merujuk atribut adalah dengan mengakses atribut elemen secara langsung menggunakan getAttribute () dan menggunakan kaedah setAttribute () untuk menetapkan nilainya.

Semasa membincangkan atribut, perlu disebutkan bahawa kebanyakan atribut yang digunakan dengan teg HTML agak mudah, terdiri daripada satu nilai untuk harta tertentu yang dikaitkan dengan teg tersebut. Namun, ada juga atribut gaya yang boleh menjadi lebih kompleks.

Atribut gaya diterapkan dengan bantuan CSS. Anda dapat menggunakannya untuk menerapkan gaya pada tag individu, semua tag dari jenis tertentu, atau anda dapat menetapkan atribut gaya menggunakan kelas.

Untuk menyulitkan perkara lebih jauh lagi, gaya untuk elemen tertentu dapat diwarisi dari salah satu sumber ini. Anda juga boleh memanipulasi dan mengubah gaya tersebut dengan mengubah atribut gaya tag atau menggunakan atribut kelas tag.

Namun, berbuat demikian akan mengubah semua parameter gaya elemen dan dalam beberapa kes, itu tidak praktikal, terutama jika anda ingin menukar hanya satu parameter gaya.

Nasib baik, atribut gaya berbeza dari atribut lain. Mereka didefinisikan sebagai objek dan mempunyai sifat untuk setiap parameter yang mungkin. Sifat-sifat ini kemudian dapat diakses, dikemas kini, dan dimanipulasi.

Menggunakan DOM

Oleh kerana setiap dokumen juga merupakan objek, ia berfungsi sebagai titik awal untuk memanipulasi nod lain di dalamnya. Nod kanak-kanak tersebut dapat diakses dan dimanipulasi menggunakan kaedah berikut:

  • getElementById ()
  • getElementsByTagName ()
  • buatElement ()
  • buatAtribut ()
  • createTextNode ().

Anda juga boleh menambah, mengemas kini, dan membuang nod secara dinamik menggunakan kaedah berikut:

  • masukkanSebelum ()
  • gantiChild ()
  • alih keluarAnak ()
  • appendChild ()
  • klonNode ().

DOM terikat secara langsung dengan HTML, CSS, dan JavaScript kerana menggambarkan tag dan atribut yang ditentukan oleh piawaian tersebut serta berfungsi sebagai API untuk skrip sisi pelanggan.

Sumber

Senarai sumber berikut memberikan gambaran terperinci mengenai DOM dan sesuai untuk pengguna pemula dan pengguna lanjutan. Senarai rujukan juga disertakan serta sumber dengan contoh.

  • JavaScript dan DOM Series: ini adalah siri tutorial yang sangat terperinci dengan terperinci mengenai penggunaan JavaScript untuk memanipulasi DOM.
  • Tutorial DOM JavaScript: satu set tutorial interaktif yang mengajar anda cara mengakses dan memanipulasi DOM dari JavaScript. Pengetahuan sebelumnya tentang JavaScript diandaikan, namun, perlu disebutkan bahawa tidak ada perpustakaan khusus yang digunakan.
  • Nod DOM: gambaran umum yang mendalam mengenai nod DOM yang sesuai untuk pemula yang ingin mengetahui bagaimana struktur DOM dan nod mana yang termasuk.
  • JavaScript DOM – Latihan, Latihan, Penyelesaian: sekumpulan pelbagai latihan yang melibatkan DOM mulai dari latihan sederhana hingga latihan yang lebih kompleks.
  • Model Objek Dokumen W3C (DOM): panduan ini diterbitkan oleh W3C menawarkan gambaran umum pengenalan dan mesra pemula mengenai DOM, sejarah, dan cara kerjanya.
  • Pengenalan DOM: pengenalan konseptual ringkas untuk DOM yang diterbitkan oleh Mozilla Developer Network yang menerangkan bagaimana ia menyediakan struktur untuk dokumen HTML dan XML dan bagaimana anda boleh mengaksesnya.
  • W3C DOM4: cadangan DOM terbaru oleh W3C yang bermula dari 2015, yang mengandungi gambaran keseluruhan dan spesifikasi terperinci untuk DOM.
  • Rujukan DOM: senarai rujukan berguna yang diterbitkan oleh Rangkaian Pembangun Microsoft termasuk sifat, kaedah, acara, dan banyak lagi.

Buku

Sekiranya anda lebih suka belajar dari buku, terdapat banyak pilihan. Buku-buku yang terdapat dalam senarai menerangkan dengan terperinci mengenai DOM, cara kerjanya, dan bagaimana dokumen dapat dimanipulasi.

  • Skrip DOM: Reka Bentuk Web dengan JavaScript dan Model Objek Dokumen (2005), oleh Jeremy Keith: buku ini memberikan rujukan yang cepat dan mudah bagi mereka yang bukan pakar kod, tetapi ingin cepat belajar dan memanfaatkan JavaScript dan DOM untuk menambahkan fungsi ke laman web mereka. Ini merangkumi banyak contoh dan membimbing pembaca untuk membina beberapa projek dunia nyata.
  • Model Objek Dokumen (2002), oleh Joe Marini: pengarang buku ini membantu anda mempelajari konsep, reka bentuk, teori, dan asal usul DOM. Sepanjang buku ini, anda akan menggunakan DOM untuk memeriksa, menavigasi, dan memanipulasi nod dan kandungan dokumen; kemudian belajar membina aplikasi berguna yang dapat dengan mudah dibawa ke pelaksanaan yang mematuhi DOM tanpa pengekodan semula.
  • Pencerahan DOM: Meneroka JavaScript dan DOM Moden (2013), oleh Cody Lindley: dengan bantuan buku ini, anda akan belajar bagaimana memanipulasi HTML dengan lebih berkesan dengan membuat skrip Model Objek Dokumen (DOM) tanpa menggunakan perpustakaan DOM. Dengan banyak contoh mudah dicerna, penulis memberi anda panduan lengkap mengenai konsep DOM moden untuk menunjukkan bagaimana pelbagai objek nod berfungsi.

Pergi ke Depan dan Melintasi DOM

Memahami DOM adalah salah satu konsep penting bagi mana-mana pembangun web yang bercita-cita tinggi.

Bahagian terbaiknya ialah anda tidak memerlukan alat khas untuk mula menggunakannya. Yang anda perlukan hanyalah skrip dan penyemak imbas pilihan anda. Sebaik sahaja anda membuat skrip dan memasukkannya ke dalam laman web anda, anda dapat mulai menggunakan API untuk dokumen atau elemen tetingkap untuk memanipulasi dokumen dengan berbagai cara.

Sumber-sumber di atas akan berfungsi sebagai titik permulaan yang kuat dalam melintasi DOM.

Bacaan dan Sumber Lanjut

Kami mempunyai lebih banyak panduan, tutorial, dan infografik yang berkaitan dengan pengekodan dan pembangunan laman web:

  • Mengarang HTML yang Baik: ini adalah pengenalan yang kukuh untuk menulis HTML dengan baik dan menggunakan perisian pengesah HTML.
  • CSS3 – Pengenalan, Panduan, dan Sumber: ini adalah tempat yang bagus untuk memulakan pembelajaran susun atur halaman web.
  • Sumber ASP.NET: panduan ini akan membantu anda menggunakan rangka kerja .NET Microsoft untuk membuat laman web.

HTML untuk Pemula – Panduan Muktamad

Sekiranya anda benar-benar ingin belajar HTML, kami telah membuat artikel sepanjang buku, HTML for Beginners – Ultimate Guide.

Dan ia adalah panduan utama; ia akan membawa anda dari awal ke penguasaan.

HTML untuk Pemula - Panduan Muktamad
HTML untuk Pemula – Panduan Muktamad

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map