Apa itu dom dalam javascript. Bekerja dengan model DOM

Dalam tutorial ini kita akan melihat dasar-dasar bekerja dengan event, atribut, dan getElementById di JavaScript.

Pada pelajaran sebelumnya, kita mempelajari kemampuan dasar bahasa JavaScript. Dimulai dengan pelajaran ini, kita akan melakukan apa yang sebenarnya dirancang untuk JavaScript - kita akan memodifikasi elemen halaman HTML dan merespons tindakan pengguna. Skrip kami akan menjadi lebih spektakuler dan bermanfaat.

Kita akan mulai dengan mengajarkan kode kita untuk merespons tindakan pengguna situs. Misalnya, pengguna akan mengklik suatu tempat dengan mouse, dan kode kita sebagai tanggapannya harus memproses klik ini dan menampilkan beberapa informasi di layar.

Tindakan pengguna yang dapat kita lacak melalui JavaScript disebut peristiwa. Acara mungkin sebagai berikut: menangis mouse pada elemen halaman, panduan mouse ke elemen halaman atau sebaliknya - peduli kursor mouse dari suatu elemen dan seterusnya. Selain itu, ada kejadian yang tidak bergantung pada tindakan pengguna, misalnya kejadian saat halaman HTML dimuat ke browser.

Ada beberapa cara untuk bekerja dengan event di JavaScript. Kita akan mulai dengan yang paling sederhana.

Dasar-Dasar Acara

Cara termudah untuk menyetel respons elemen terhadap peristiwa tertentu adalah dengan menentukannya menggunakan atribut untuk tag tertentu. Misalnya saja sebuah acara "klik mouse" sesuai dengan atribut onclick, acara "arahkan mouse"- atribut onmouseover, dan acara "elemen daun kursor"- atribut onmouseout.

Nilai atribut dengan event adalah kode JavaScript. Dalam contoh berikut dengan mengklik tombol dengan mouse fungsi peringatan akan dijalankan:

Dan sekarang dengan klik fungsi func akan dieksekusi pada elemen:

fungsi fungsi() ( peringatan("!"); )

Anda tidak hanya dapat melakukan satu fungsi, tetapi beberapa fungsi:

fungsi func1() ( peringatan("1"); ) fungsi func2() ( peringatan("2"); )

Harap dicatat bahwa jika Anda memerlukan tanda kutip ganda di dalam suatu atribut (misalnya, untuk string) dan tanda kutip luar dari atribut tersebut juga merupakan tanda kutip ganda - onclick="peringatan("!")"- kode ini tidak akan berfungsi.

Ada beberapa cara untuk mengatasi hal ini: Anda dapat mengubah tanda kutip luar menjadi tanda kutip tunggal onclick="peringatan("!")", Anda juga dapat menghindari tanda kutip dalam dengan garis miring terbalik onclick="peringatan(\"!\)" atau cukup pindahkan kode JavaScript dari atribut ke fungsi, dan biarkan hanya nama fungsi di atribut onclick="fungsi()".

Hal yang sama akan terjadi jika Anda menempatkan tanda kutip luar dari atribut dalam tanda kutip tunggal dan juga menggunakan tanda kutip tunggal untuk string: onclick="peringatan("!")"- di sini juga, semuanya diselesaikan dengan cara yang sama.

Tabel atribut untuk acara Bekerja dengan getElementById

Sekarang kita akan belajar cara menerima elemen halaman HTML dan melakukan berbagai manipulasi dengannya (kita akan dapat mengubah, misalnya, teks dan warnanya serta banyak hal berguna lainnya).

Katakanlah kita memiliki tag pada halaman dengan atribut id yang disetel ke test . Mari tulis link ke tag ini ke dalam variabel elem. Untuk melakukan ini, kita harus menggunakan metode getElementById, yang mendapatkan elemen berdasarkan idnya.

Entri ini akan muncul ketika tombol yang telah kita tetapkan atribut onclick diklik. Dengan mengklik tombol ini, fungsi func akan bekerja, yang akan menemukan elemen pada halaman HTML dengan id yang sama untuk menguji dan menulis tautan ke sana ke variabel elemen:

Sekarang di variabel elem kita memiliki link ke elemen dengan atribut id di nilai tes. Variabel elemennya sendiri adalah obyek.

Objek ini dan tag halaman HTML terhubung satu sama lain - kita dapat mengubah properti apa pun dari objek elemen dan pada saat yang sama kita akan melihat perubahan pada halaman HTML yang akan terjadi pada elemen yang kita terima.

Mari kita lihat bagaimana hal ini terjadi dalam praktiknya.

Dasar-dasar bekerja dengan atribut HTML melalui JavaScript

Sekarang kita akan membaca dan mengubah atribut tag. Mari kita kembali mendapatkan input dengan id yang sama dengan test dan sebuah tombol, setelah mengklik fungsi func yang akan diluncurkan:

Di dalam fungsi func kita akan menerima masukan kita dengan id-nya dan tulis tautan ke sana di variabel elem:

fungsi func() ( var elem = document.getElementById("test"); )

Sekarang mari kita tampilkan isi atribut masukan kita. Untuk mengakses, misalnya, atribut value, Anda harus menulis yang berikut: elem.value , di mana elem adalah variabel tempat kita menulis tautan ke elemen kita menggunakan getElementById, dan value adalah atribut dari tag yang kita minati.

Kita dapat menampilkan isi atribut melalui alert dengan cara ini - alert(elem.value) - atau menulisnya ke beberapa variabel. Mari kita lakukan:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //akan menampilkan "!" )

Kita dapat membaca nilai atribut lain dengan cara yang sama, misalnya elem.id - kita membaca nilai atribut id, dan elem.type - nilai atribut type. Lihat contoh:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //akan menampilkan "!" alert(elem.id); //akan menampilkan "test" alert(elem.type ); //akan menampilkan "teks" )

Anda tidak hanya dapat membaca nilai atribut, tetapi juga mengubahnya. Misalnya, untuk mengubah nilai atribut value, Anda hanya perlu menugaskannya ke konstruk elem.value:

fungsi func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

Kode HTMLnya akan terlihat seperti ini (atribut value akan menjadi www):

Nah, sekarang bagian tersulitnya adalah Anda tidak bisa memasukkan variabel elemen, tetapi membangun rantai poin dengan cara ini:

function func() ( alert(document.getElementById("test").value); //akan menampilkan "!" )

Dengan cara yang sama (rantai) Anda dapat menulis ulang atribut:

fungsi func() ( document.getElementById("test").value = "www"; }!}

Namun, dalam banyak kasus, memasukkan variabel lebih mudah. Bandingkan dua contoh - sekarang saya telah memperkenalkan variabel elem dan dapat membaca sejumlah atribut, sementara getElementById dipanggil hanya satu kali:

fungsi func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

Sekarang saya tidak memperkenalkan variabel baru sehingga saya harus memanggil getElementById dua kali:

fungsi func() ( document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

Menurut pendapat saya, kode ini menjadi lebih rumit, meskipun membutuhkan satu baris lebih sedikit. Selain itu, jika saya ingin mengubah nilai id dari test menjadi, misalnya www, saya harus melakukannya di banyak tempat, yang sangat tidak nyaman.

ke peramban. Menemukan elemen pada halaman, yang dilakukan oleh metode getElementById, adalah operasi yang agak lambat ( dan secara umum, pekerjaan apa pun dengan elemen halaman adalah operasi yang lambat- ingat ini).

Dalam kasus kami, jika kami menggunakan getElementById setiap kali, maka browser akan memproses halaman HTML setiap kali dan mencari elemen dengan id tertentu beberapa kali (tidak masalah jika idnya sama - browser akan melakukan semuanya tindakan beberapa kali), melakukan operasi tidak berguna yang dapat memperlambat operasi browser.

Jika kita menggunakan variabel elem, pencarian pada halaman tidak terjadi (elemen telah ditemukan dan link ke sana terletak pada variabel elem).

Pengecualian: atribut kelas dan for

Anda telah mempelajari cara bekerja dengan atribut melalui JavaScript dan sekarang saatnya memberi tahu Anda bahwa tidak semuanya sesederhana itu - ada pengecualian saat bekerja dengan atribut - ini adalah atribut kelas.

Kata ini spesial dalam JavaScript dan oleh karena itu kita tidak bisa menulisnya begitu saja elemen.kelas untuk membaca nilai atribut kelas. Sebaliknya Anda harus menulis elemen.namakelas.

Contoh berikut menampilkan nilai atribut class:

fungsi func() ( var elem = document.getElementById("test"); alert(elem.className); )

Omong-omong, ada atribut lain yang namanya berbeda dari properti. Misalnya, atribut for() memiliki properti bernama htmlFor.

Bekerja dengan ini

Sekarang kita akan bekerja dengan objek khusus ini, yang menunjuk ke elemen saat ini (elemen di mana peristiwa itu terjadi). Selain itu, ini menunjukkan seolah-olah elemen ini telah diperoleh dengan metode getElementById.

Mari kita lihat bagaimana cara mengatasinya dan apa kemudahan dari pendekatan ini.

Mari kita mempunyai tugas mengklik input untuk menampilkan isi nilainya.

Untuk saat ini Anda hanya dapat mengambil keputusan ini:

fungsi func() ( var elem = document.getElementById("test"); alert(elem.value); )

Pada prinsipnya, solusi ini bagus, tetapi sekarang bayangkan kita memiliki banyak masukan dan ketika kita mengklik masing-masing masukan, kita perlu menampilkan nilainya.

Dalam hal ini, kita akan mendapatkan hasil seperti ini:

fungsi func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) fungsi func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) fungsi func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

Sekarang kelemahan dari pendekatan kami terlihat jelas - untuk setiap masukan kami harus membuat fungsi pemrosesan klik kami sendiri, dan fungsi-fungsi ini melakukan hal yang hampir sama.

Jika kita memiliki 10 input, kita harus membuat 10 fungsi, dan ini tidak nyaman.

Mari sederhanakan tugas kita: kita akan meneruskan id elemen saat ini sebagai parameter ke fungsi. Dan alih-alih banyak fungsi, semuanya akan direduksi menjadi satu fungsi:

fungsi fungsi(id) ( var elem = document.getElementById(id); alert(elem.value); )

Namun, solusi ini masih memiliki kelemahan - setiap elemen harus memasukkan id yang berbeda, yang juga agak merepotkan.

Jadi, akhirnya mari kita lihat opsi untuk menyelesaikan masalah menggunakan ini.

Mari kita buat agar setiap masukan menampilkan isinya saat diklik. Untuk melakukan ini, kita meneruskan objek ini sebagai parameter ke fungsi, seperti ini: func(this) .

This kami diteruskan sebagai parameter fungsi dan berakhir di variabel elem. Elemen ini berperilaku seolah-olah diperoleh dengan cara ini: var elemen = dokumen.getElementById(...), tetapi Anda tidak perlu menerimanya dengan cara ini, semuanya sudah siap di sana dan Anda dapat menggunakannya. Misalnya, elem.value menunjuk ke nilai masukan kita dan seterusnya.

Jadi, inilah solusi paling sederhana untuk masalah kita:

fungsi func(elem) ( alert(elem.value); )

Dasar-dasar CSS

Dalam JavaScript, bekerja dengan properti CSS terjadi dengan mengubah nilai atribut style untuk sebuah elemen. Misalnya, untuk mengubah warna, Anda perlu membuat rantai berikut - elemen.gaya.warna- dan tetapkan nilai warna yang diinginkan:

fungsi func() ( var elem = document.getElementById("test"); elem.style.color = "red"; )

Anda juga tidak bisa memasukkan variabel elem, tetapi build rantai yang sangat panjang.

Saat Anda membuka dokumen HTML apa pun, browser terlebih dahulu menguraikan isinya dan, berdasarkan penguraian ini, membuat model objek dokumen HTML, atau disingkat DOM.

DOM terdiri dari objek-objek bertingkat yang disebut node. Setiap node dalam struktur mewakili elemen HTML yang terletak di halaman.

Menggunakan DOM Anda dapat berinteraksi ( membaca, mengubah, menghapus) dengan isi dokumen HTML dari skrip.

Di bawah ini adalah kode dokumen HTML dan DOM yang akan dibuat oleh browser berdasarkan kode ini:

HTML DOM HTML DOM.

Halo semua.

Semua persegi panjang yang ditunjukkan pada gambar adalah objek (atau titik). Node dari jenis yang berbeda ditandai dengan warna berbeda pada gambar.

Node Dokumen ditandai dengan warna merah. Setiap akses ke DOM harus dimulai dengan akses ke node ini.

Node unsur ditandai dengan warna hijau. Untuk setiap elemen HTML pada halaman, browser membuat node elemen yang sesuai.

Isi elemen disimpan dalam node teks. Node teks ditandai dengan warna biru di diagram kita.

Untuk setiap atribut elemen HTML, node atribut dibuat. Node atribut ditandai dengan warna merah muda pada diagram.

Harap dicatat: ingat bahwa teks selalu disimpan dalam node teks dan bukan merupakan properti elemen. Itu. Untuk mengakses konten elemen HTML, Anda harus mengakses properti simpul teksnya.

Hubungan antar node

Node dalam suatu struktur objek terhubung satu sama lain. Ada beberapa istilah khusus untuk menggambarkan hubungan antar node:

Simpul induk ( simpul induk) - node induk dalam kaitannya dengan objek yang dipermasalahkan adalah node tempat objek yang dipermasalahkan disarangkan. Dalam diagram kami, sehubungan dengan node dan

adalah orang tua. Untuk sebuah node, node induknya adalah .

Node keturunan ( simpul anak) - node anak dalam kaitannya dengan objek yang dimaksud adalah node yang bersarang di objek yang dimaksud. Dalam diagram kami, sehubungan dengan node dan

Mereka adalah keturunan. Untuk sebuah node, anaknya adalah .

Node saudara ( simpul saudara) - node yang berada pada tingkat sarang yang sama dalam kaitannya dengan node induknya. Dalam diagram kita, simpul saudaranya adalah dan ,

Node paling atas di DOM disebut root. Dalam diagram kita, ini adalah root (karena objek dokumen bukan bagian dari DOM).

Dalam pelajaran ini, kita akan melihat apa itu DOM, mengapa DOM diperlukan, dan bagaimana DOM dibuat.

Apa itu DOM?

Saat browser meminta halaman dan menerima kode HTML sumbernya sebagai respons dari server, browser harus menguraikannya terlebih dahulu. Dalam proses menganalisis dan mengurai kode HTML, browser membuat pohon DOM berdasarkan kode tersebut.

Setelah menyelesaikan tindakan ini dan beberapa tindakan lainnya, browser mulai merender halaman. Dalam proses ini tentunya dia sudah menggunakan DOM tree yang dibuatnya, dan bukan kode HTML aslinya.

DOM adalah model objek dokumen yang dibuat browser di memori komputer berdasarkan kode HTML yang diterimanya dari server.

Sederhananya, kode HTML adalah teks suatu halaman, dan DOM adalah sekumpulan objek terkait yang dibuat oleh browser saat mengurai teksnya.

Di Chrome, kode sumber halaman yang diterima browser dapat dilihat di tab “Sumber” di panel “Alat Pengembang Web”.

Chrome tidak memiliki alat yang dapat digunakan untuk melihat pohon DOM yang dibuatnya. Namun pohon DOM ini ada representasinya dalam bentuk kode HTML, tersedia pada tab “Elements”. Representasi DOM ini, tentu saja, jauh lebih nyaman untuk digunakan oleh pengembang web. Oleh karena itu, tidak ada alat yang dapat merepresentasikan DOM sebagai struktur pohon.

Objek pada model ini terbentuk dari hampir semua yang ada pada HTML (tag, isi teks, komentar, dll), termasuk dokumen itu sendiri. Hubungan antara objek-objek dalam model dibentuk berdasarkan bagaimana elemen HTML diposisikan relatif satu sama lain dalam kode.

Dalam hal ini, DOM dokumen setelah pembentukannya dapat diubah. Saat DOM berubah, browser langsung menggambar ulang gambar halaman. Hasilnya, rendering halaman kami selalu sesuai dengan DOM.

Untuk membaca dan mengubah DOM secara terprogram, browser memberi kita API DOM atau, dengan kata lain, antarmuka pemrograman. Sederhananya, DOM API adalah kumpulan sejumlah besar objek berbeda, properti dan metodenya yang dapat kita gunakan untuk membaca dan mengubah DOM.

Untuk bekerja dengan DOM, JavaScript digunakan dalam banyak kasus, karena... Saat ini, ini adalah satu-satunya bahasa pemrograman di mana skrip dapat dieksekusi di browser.

Mengapa kita memerlukan API DOM? Kami membutuhkannya agar kami dapat menggunakan JavaScript untuk mengubah halaman dengan cepat, mis. menjadikannya dinamis dan interaktif.

DOM API memberi kami (pengembang) sejumlah besar metode yang dapat digunakan untuk mengubah segala sesuatu di halaman, serta berinteraksi dengan pengguna. Itu. antarmuka perangkat lunak ini memungkinkan kita membuat antarmuka yang kompleks, formulir, memproses tindakan pengguna, menambah dan menghapus berbagai elemen pada halaman, mengubah konten, properti (atribut), dan banyak lagi.

Saat ini praktis tidak ada situs di web yang skenarionya tidak berfungsi dengan DOM.

Terdiri dari apakah kode HTML suatu halaman?

Sebelum melanjutkan mempelajari model objek dokumen, Anda harus mengingat terlebih dahulu apa itu kode sumber suatu halaman web (dokumen HTML).

Kode sumber halaman web terdiri dari tag, atribut, komentar, dan teks. Tag adalah konstruksi sintaksis dasar HTML. Kebanyakan dari mereka berpasangan. Dalam hal ini, salah satunya adalah pembukaan dan yang lainnya adalah penutupan. Sepasang tag tersebut membentuk elemen HTML. Elemen HTML dapat memiliki parameter tambahan - atribut.

Dalam sebuah dokumen, untuk membuat markup tertentu, beberapa elemen ditempatkan di dalam elemen lainnya. Hasilnya, dokumen HTML dapat direpresentasikan sebagai sekumpulan elemen HTML yang bertumpuk satu sama lain.

Sebagai contoh, perhatikan kode HTML berikut:

Judul halaman Judul artikel Bagian artikel

Isi artikel

Dalam kode ini, elemen root adalah html. Ini berisi elemen kepala dan tubuh. Elemen head berisi judul, dan body berisi h1 dan div. Elemen div pada gilirannya berisi h2 dan p .

Sekarang mari kita lihat bagaimana browser membuat pohon DOM berdasarkan kode HTML.

Bagaimana pohon DOM suatu dokumen dibuat?

Seperti dijelaskan di atas, browser membuat pohon berdasarkan elemen HTML dan entitas lain dari kode sumber halaman. Saat melakukan proses ini, ini memperhitungkan penumpukan elemen di dalam satu sama lain.

Hasilnya, browser menggunakan pohon DOM yang dihasilkan tidak hanya dalam pekerjaannya, tetapi juga memberi kita API untuk kenyamanan bekerja dengannya melalui JavaScript.

Saat membuat DOM, browser membuat objek (node ​​pohon DOM) dari elemen HTML, teks, komentar, dan entitas lain dari bahasa ini.

Dalam kebanyakan kasus, pengembang web hanya tertarik pada objek (node) yang dibentuk dari elemen HTML.

Pada saat yang sama, browser tidak hanya membuat objek dari elemen HTML, tetapi juga menghubungkannya satu sama lain dengan koneksi tertentu, bergantung pada bagaimana masing-masing objek berhubungan satu sama lain dalam kode.

Unsur-unsur yang berada langsung dalam suatu unsur adalah anak-anak yang berhubungan dengannya. Dan dia adalah orang tua bagi mereka masing-masing. Selain itu, semua unsur tersebut merupakan saudara kandung (saudara) dalam hubungannya satu sama lain.

Selain itu, dalam HTML, elemen apa pun selalu memiliki satu induk (elemen HTML tempatnya berada). Dalam HTML, sebuah elemen tidak boleh memiliki banyak orang tua. Satu-satunya pengecualian adalah elemen html. Dia tidak memiliki orang tua.

Untuk mendapatkan pohon DOM saat browser membangunnya, Anda hanya perlu “mengatur” semua elemen bergantung pada hubungannya satu sama lain.

Pembuatan pohon DOM dilakukan dari atas ke bawah.

Dalam hal ini, akar pohon DOM selalu merupakan dokumen itu sendiri (simpul dokumen). Selanjutnya, pohon dibangun tergantung pada struktur kode HTML.

Misalnya, kode HTML yang kita lihat di atas akan memiliki pohon DOM berikut:

Di bagian paling atas pohon ini adalah simpul dokumen. Node ini dikaitkan dengan html, itu adalah anaknya. Node html dibentuk oleh elemen html (...). Node head(...) dan body(...) memiliki hubungan induk dengan html. Dalam hubungannya satu sama lain, mereka adalah saudara kandung, karena mempunyai satu orang tua. Node kepala dikaitkan dengan judul (lt;title>...), itu adalah anaknya. Node h1 dan div dikaitkan dengan body , yang merupakan induknya. Node div terhubung ke h2(...) dan p(), mereka adalah turunannya.

Pohon dimulai, seperti disebutkan di atas, dengan objek dokumen (node). Ia pada gilirannya memiliki satu simpul anak yang dibentuk oleh elemen html (...). Elemen head(...) dan body(...) ada dalam html dan oleh karena itu merupakan turunannya. Selanjutnya, simpul kepala adalah induk dari judul (lt;judul>...). Elemen h1 dan div bersarang di dalam tubuh, yang berarti mereka adalah turunannya. Div langsung berisi elemen h2 (...) dan p(). Artinya node div untuk masing-masingnya adalah induknya.

Begitulah mudahnya membangun pohon DOM di browser berdasarkan kode HTML.

Mengapa Anda perlu mengetahui bagaimana pohon DOM dibangun? Pertama, pemahaman tentang lingkungan di mana Anda ingin mengubah sesuatu. Kedua, sebagian besar tindakan saat bekerja dengan DOM adalah mencari (memilih) elemen yang diperlukan. Tanpa mengetahui bagaimana struktur pohon DOM dan hubungan antar node, akan cukup sulit untuk menemukan elemen tertentu di dalamnya.

Latihan

Berdasarkan pohon DOM yang ditunjukkan pada gambar, buatlah kode HTML.

Model Objek Dokumen, atau "DOM", adalah antarmuka pemrograman untuk mengakses elemen halaman web. Pada dasarnya, ini adalah API halaman yang memungkinkan Anda membaca dan memanipulasi konten, struktur, dan gaya halaman. Mari kita cari tahu cara kerjanya dan cara kerjanya.

Bagaimana halaman web dibuat?

Proses mengubah dokumen HTML asli menjadi halaman yang dapat dirender, ditata, dan interaktif disebut “Jalur Rendering Kritis”. Meskipun proses ini dapat dipecah menjadi beberapa langkah, seperti yang saya jelaskan dalam Memahami Jalur Kritis Rendering, langkah-langkah ini secara kasar dapat dikelompokkan menjadi dua langkah. Yang pertama, browser mengurai dokumen untuk menentukan apa yang pada akhirnya akan ditampilkan pada halaman, dan yang kedua, browser melakukan rendering.

Hasil tahap pertama inilah yang disebut dengan “render tree”. Pohon rendering adalah representasi elemen HTML yang akan dirender pada halaman dan gaya terkaitnya. Untuk membangun pohon ini, browser memerlukan dua hal:

CSSOM, mewakili gaya yang terkait dengan elemen

DOM, representasi elemen

DOMnya terdiri dari apa?

DOM adalah representasi objek dari dokumen HTML asli. Ini memiliki beberapa perbedaan, seperti yang akan kita lihat di bawah, tetapi pada dasarnya ini adalah upaya untuk mengubah struktur dan konten dokumen HTML menjadi model objek yang dapat digunakan oleh berbagai program.

Struktur objek DOM diwakili oleh apa yang disebut "pohon simpul". Disebut demikian karena dapat diibaratkan sebagai pohon dengan satu induk yang bercabang menjadi beberapa cabang anak, yang masing-masing dapat mempunyai daun. Dalam hal ini, "elemen" induk adalah elemen akar, "cabang" anak adalah elemen bersarang, dan "daun" adalah konten di dalam elemen.

Mari kita ambil dokumen HTML ini sebagai contoh:

Halaman web pertama saya Halo dunia!

Apa kabarmu?

Dokumen ini dapat direpresentasikan sebagai pohon node berikut:

• html
  • kepala
    • judul
      • Halaman web pertamaku
  • tubuh
    • h1
      • Halo Dunia!
    • P
      • Apa kabarmu?

Apa yang bukan DOM

Pada contoh di atas, terlihat bahwa DOM merupakan pemetaan 1:1 dari dokumen HTML asli. Namun, seperti yang saya katakan sebelumnya, ada perbedaan. Untuk memahami sepenuhnya apa itu DOM, kita perlu melihat apa yang bukan DOM.

DOM bukan salinan HTML asli

Meskipun DOM dibuat dari dokumen HTML, namun tidak selalu sama persis. Ada dua kasus di mana DOM dapat berbeda dari HTML sumber.

1. Ketika HTML mengandung kesalahan markup

DOM adalah antarmuka untuk mengakses elemen dokumen HTML yang sebenarnya (yaitu, sudah dirender). Selama proses pembuatan DOM, browser sendiri dapat memperbaiki beberapa kesalahan pada kode HTML.

Pertimbangkan dokumen HTML ini sebagai contoh:

Halo Dunia!

Dokumen tidak memiliki elemen dan , yang merupakan persyaratan untuk HTML. Namun jika kita melihat pohon DOM yang dihasilkan, kita dapat melihat bahwa masalah ini telah diperbaiki:

• html
  • kepala
  • tubuh
    • Halo Dunia!
  2. Ketika DOM dimodifikasi dengan kode Javascript

  Selain sebagai antarmuka untuk melihat isi dokumen HTML, DOM sendiri juga dapat dimodifikasi.

  Misalnya, kita dapat membuat node tambahan untuk DOM menggunakan Javascript.

  Var newParagraph = dokumen.createElement("p"); var paragrafContent = document.createTextNode("Saya baru!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Kode ini akan mengubah DOM, namun perubahannya tidak akan muncul di dokumen HTML.

  DOM tidak seperti yang Anda lihat di browser (yaitu pohon rendering)

  Di area pandang browser Anda melihat pohon rendering, yang seperti saya katakan adalah kombinasi DOM dan CSSOM. Apa yang berbeda tentang DOM dan pohon render adalah bahwa pohon render hanya terdiri dari apa yang pada akhirnya akan dirender di layar.

  Karena pohon render hanya berkaitan dengan apa yang dirender, pohon ini mengecualikan elemen yang tersembunyi secara visual. Misalnya, elemen yang memiliki gaya dengan display: none .

  Halo Dunia!

  Apa kabarmu?

  DOM akan menyertakan elemen tersebut

  • html
    • kepala
    • tubuh
      • h1
        • Halo Dunia!
      • P
        • Apa kabarmu?

  Namun, pohon render, dan apa yang terlihat di area pandang, tidak akan disertakan dalam elemen ini.

  • html
    • tubuh
      • h1
        • Halo Dunia!
  DOM bukan yang ditampilkan di DevTools

  Perbedaan ini sedikit lebih kecil karena DevTools Element Inspector memberikan perkiraan yang paling mendekati DOM yang kita miliki di browser. Namun, inspektur DevTools berisi informasi tambahan yang tidak ada di DOM.

  Contoh terbaiknya adalah elemen semu CSS. Elemen semu yang dibuat menggunakan pemilih ::before dan ::after adalah bagian dari CSSOM dan pohon rendering, namun secara teknis bukan bagian dari DOM. Hal ini karena DOM dibuat hanya dari dokumen HTML asli, tidak termasuk gaya yang diterapkan pada elemen tersebut.

  Meskipun elemen semu bukan bagian dari DOM, elemen tersebut ada di inspektur elemen devtools kami.

  
  Ringkasan

  DOM adalah antarmuka ke dokumen HTML. Ini digunakan oleh browser sebagai langkah pertama dalam menentukan apa yang akan dirender di area pandang, dan dengan kode Javascript untuk mengubah konten, struktur, atau gaya halaman.

Bekerja dengan model DOM

Setiap objek Window memiliki properti dokumen yang mengacu pada objek Dokumen. Objek Dokumen ini bukan objek yang berdiri sendiri. Ini adalah objek utama dari API ekstensif yang dikenal sebagai Document Object Model (DOM), yang menentukan bagaimana konten dokumen dapat diakses.

Ikhtisar DOM

Model Objek Dokumen (DOM) adalah antarmuka pemrograman aplikasi dasar yang menyediakan kemampuan untuk bekerja dengan konten dokumen HTML dan XML. Antarmuka pemrograman aplikasi (API) DOM tidak terlalu rumit, tetapi ada banyak fitur arsitektur yang harus Anda waspadai.

Pertama, pahami bahwa elemen bersarang dalam dokumen HTML atau XML direpresentasikan sebagai pohon objek DOM. Tampilan hierarki dokumen HTML berisi node yang mewakili elemen atau tag, seperti dan

Dan node mewakili baris teks. Dokumen HTML juga dapat berisi node yang mewakili komentar HTML. Perhatikan dokumen HTML sederhana berikut:

Contoh Dokumen Ini adalah dokumen HTML

Contoh sederhana teks.

Representasi DOM dari dokumen ini ditunjukkan pada diagram berikut:

Bagi mereka yang tidak terbiasa dengan struktur pohon dalam pemrograman komputer, akan sangat membantu jika mengetahui bahwa terminologi untuk mendeskripsikannya dipinjam dari silsilah keluarga. Node yang terletak tepat di atas node ini disebut orang tua sehubungan dengan simpul ini. Node yang terletak satu tingkat di bawah node lainnya adalah anak perusahaan sehubungan dengan simpul ini. Node yang berada pada level yang sama dan mempunyai induk yang sama disebut saudara perempuan. Node yang terletak beberapa tingkat di bawah node lain adalah anak-anaknya. Induk, kakek-nenek, dan node lain di atas node tertentu adalah nenek moyangnya.

Setiap persegi panjang dalam diagram ini adalah node dokumen, yang diwakili oleh objek Node. Perhatikan bahwa gambar tersebut menunjukkan tiga jenis node yang berbeda. Akar pohon adalah node Dokumen, yang mewakili keseluruhan dokumen. Node yang mewakili elemen HTML adalah node bertipe Elemen, dan node yang mewakili teks adalah node bertipe Teks. Dokumen, Elemen dan Teks adalah subkelas dari kelas Node. Dokumen dan Elemen adalah dua kelas terpenting di DOM.

Tipe Node dan subtipenya membentuk hierarki tipe yang ditunjukkan pada diagram di bawah. Perhatikan perbedaan formal antara tipe generik Dokumen dan Elemen, serta tipe HTMLDocument dan HTMLElement. Tipe Dokumen mewakili dokumen HTML dan XML, dan kelas Elemen mewakili elemen dokumen tersebut. Subkelas HTMLDocument dan HTMLElement secara khusus mewakili dokumen HTML dan elemen-elemennya:

Hal lain yang perlu diperhatikan dalam diagram ini adalah terdapat sejumlah besar subtipe kelas HTMLElement yang mewakili tipe elemen HTML tertentu. Masing-masing mendefinisikan properti JavaScript yang mencerminkan atribut HTML dari elemen atau kelompok elemen tertentu. Beberapa kelas khusus ini menentukan properti atau metode tambahan yang tidak mencerminkan sintaks bahasa markup HTML.

Memilih elemen dokumen

Pekerjaan sebagian besar program klien dalam bahasa JavaScript entah bagaimana terkait dengan manipulasi elemen dokumen. Saat runtime, program ini dapat menggunakan variabel global document, yang mengacu pada objek Dokumen. Namun, untuk melakukan manipulasi apa pun pada elemen dokumen, program harus memperoleh, atau memilih, objek Elemen yang merujuk ke elemen dokumen tersebut. DOM mendefinisikan beberapa cara untuk memilih elemen. Anda dapat memilih elemen atau elemen dokumen:

berdasarkan nilai atribut id;

berdasarkan nilai atribut nama;

berdasarkan nama tag;

berdasarkan kelas CSS atau nama kelas;

dengan mencocokkan pemilih CSS tertentu.

Semua teknik pengambilan sampel elemen ini dijelaskan dalam subbagian berikut.

Memilih elemen berdasarkan nilai atribut id

Semua elemen HTML memiliki atribut id. Nilai atribut ini harus unik dalam dokumen—tidak boleh ada dua elemen dalam dokumen yang sama yang memiliki nilai atribut id yang sama. Anda dapat memilih elemen berdasarkan nilai atribut id unik menggunakan metode getElementById() pada objek Dokumen:

Var section1 = dokumen.getElementById("section1");

Ini adalah cara paling sederhana dan paling umum untuk memilih elemen. Jika skrip Anda harus dapat memanipulasi kumpulan elemen dokumen tertentu, tetapkan nilai ke atribut id elemen tersebut dan gunakan kemampuan untuk mencarinya menggunakan nilai tersebut.

Di versi Internet Explorer yang lebih lama dari IE8, metode getElementById() mencari nilai atribut id dengan tidak peka huruf besar-kecil dan juga mengembalikan elemen yang cocok dengan nilai atribut nama.

Memilih elemen berdasarkan nilai atribut nama

Atribut HTML nama awalnya dimaksudkan untuk memberi nama elemen formulir, dan nilai atribut ini digunakan saat data formulir dikirimkan ke server. Seperti atribut id, atribut name memberikan nama pada sebuah elemen. Namun, tidak seperti id, nilai atribut name tidak harus unik: beberapa elemen dapat memiliki nama yang sama, yang cukup umum bila digunakan dalam bentuk tombol radio dan kotak centang. Selain itu, tidak seperti id, atribut nama hanya diperbolehkan pada elemen HTML tertentu, termasuk formulir, elemen formulir, dan .

Anda dapat memilih elemen HTML berdasarkan nilai atribut namanya menggunakan metode getElementsByName() pada objek Dokumen:

Var radiobuttons = document.getElementsByName("favorite_color");

Metode getElementsByName() tidak ditentukan oleh kelas Dokumen, tetapi oleh kelas HTMLDocument, sehingga hanya tersedia dalam dokumen HTML dan tidak tersedia dalam dokumen XML. Ia mengembalikan objek NodeList, yang berperilaku seperti array objek Elemen yang hanya dapat dibaca.

Di IE, metode getElementsByName() juga mengembalikan elemen yang nilai atribut idnya cocok dengan nilai yang ditentukan. Untuk memastikan kompatibilitas lintas browser, Anda harus berhati-hati saat memilih nilai atribut dan jangan menggunakan string yang sama dengan nilai atribut nama dan id.

Pilih item berdasarkan jenisnya

Metode getElementsByTagName() pada objek Dokumen memungkinkan Anda memilih semua elemen HTML atau XML dari tipe tertentu (atau berdasarkan nama tag). Misalnya, Anda bisa mendapatkan objek seperti array read-only yang berisi objek Elemen dari semua elemen dalam dokumen seperti ini:

Var spans = document.getElementsByTagName("span");

Mirip dengan metode getElementsByName(), getElementsByTagName() mengembalikan objek NodeList. Elemen dokumen disertakan dalam array NodeList dengan urutan yang sama dengan kemunculannya di dokumen, yaitu. elemen pertama

Dalam dokumen Anda dapat memilih:

Var firstParagraph = dokumen.getElementsByTagName("p");

Nama tag HTML tidak peka huruf besar-kecil, dan ketika getElementsByTagName() diterapkan ke dokumen HTML, ia melakukan perbandingan peka huruf besar-kecil terhadap nama tag. Variabel spans yang dibuat di atas, misalnya, juga akan menyertakan semua elemen yang ditulis sebagai .

Anda bisa mendapatkan NodeList yang berisi semua elemen dokumen dengan meneruskan karakter wildcard "*" ke metode getElementsByTagName().

Selain itu, kelas Elemen juga mendefinisikan metode getElementsByTagName(). Ini bertindak persis seperti versi metode kelas Dokumen, tetapi hanya memilih elemen yang merupakan turunan dari elemen tempat metode tersebut dipanggil. Artinya, temukan semua elemen di dalam elemen pertama

Anda dapat melakukannya sebagai berikut:

Var firstParagraph = dokumen.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

Untuk alasan historis, kelas HTMLDocument mendefinisikan properti khusus untuk mengakses tipe node tertentu. Properti gambar-gambar, formulir Dan tautan, misalnya, mengacu pada objek yang berperilaku seperti array read-only yang berisi elemen , Dan (tetapi hanya tag itu , yang memiliki atribut href). Properti ini mengacu pada objek HTMLCollection, yang mirip dengan objek NodeList, tetapi juga dapat diindeks berdasarkan nilai atribut id dan name.

Objek HTMLDocument juga mendefinisikan properti sinonim yang disematkan dan plugin, yang merupakan kumpulan elemen HTMLCollection. Properti jangkar tidak standar, tetapi dapat digunakan untuk mengakses elemen , yang memiliki atribut name tetapi tidak memiliki atribut href. Properti skrip ditentukan oleh standar HTML5 dan merupakan kumpulan elemen HTMLCollection.

Selain itu, objek HTMLDocument mendefinisikan dua properti, yang masing-masing merujuk bukan pada koleksi, namun pada satu elemen. Properti document.body mewakili elemen dokumen HTML, dan properti document.head mewakili elemen . Properti ini selalu ditentukan dalam dokumen: meskipun dokumen sumber tidak berisi elemen dan, browser akan membuatnya secara implisit. Properti documentElement dari objek Dokumen mengacu pada elemen akar dokumen. Dalam dokumen HTML itu selalu mewakili .

Memilih elemen berdasarkan kelas CSS

Nilai atribut kelas HTML adalah daftar nol atau lebih pengidentifikasi, dipisahkan dengan spasi. Ini memungkinkan Anda untuk menentukan kumpulan elemen dokumen terkait: elemen apa pun yang memiliki pengidentifikasi yang sama di atribut kelas adalah bagian dari kumpulan yang sama. Kelas kata dicadangkan dalam JavaScript, sehingga JavaScript sisi klien menggunakan properti className untuk menyimpan nilai atribut kelas HTML.

Biasanya atribut class digunakan bersama dengan style sheet cascading CSS untuk menerapkan gaya rendering umum ke semua anggota himpunan. Namun, selain itu, standar HTML5 mendefinisikan metode getElementsByClassName(), yang memungkinkan Anda memilih beberapa elemen dokumen berdasarkan pengidentifikasi di atribut kelasnya.

Seperti metode getElementsByTagName(), metode getElementsByClassName() dapat dipanggil pada dokumen HTML dan elemen HTML, dan mengembalikan objek NodeList langsung yang berisi semua turunan dokumen atau elemen yang cocok dengan kriteria pencarian.

Metode getElementsByClassName() mengambil argumen string tunggal, namun string itu sendiri dapat berisi beberapa pengidentifikasi, dipisahkan oleh spasi. Semua elemen yang atribut kelasnya berisi semua pengidentifikasi yang ditentukan akan dianggap cocok. Urutan pengidentifikasi tidak menjadi masalah. Perhatikan bahwa dalam atribut kelas dan argumen pada metode getElementsByClassName(), pengidentifikasi kelas dipisahkan dengan spasi, bukan koma.

Berikut adalah beberapa contoh penggunaan metode getElementsByClassName():

// Temukan semua elemen dengan kelas "warning" var warnings = document.getElementsByClassName("warning"); // Temukan semua turunan elemen dengan pengidentifikasi "log" // dengan kelas "error" dan "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("kesalahan fatal");

Memilih Elemen Menggunakan Pemilih CSS

CSS Cascading Style Sheets memiliki konstruksi sintaksis yang sangat kuat yang dikenal sebagai penyeleksi yang memungkinkan Anda mendeskripsikan elemen atau kumpulan elemen dalam dokumen. Seiring dengan standarisasi pemilih CSS3, standar W3C lain yang dikenal sebagai Selectors API mendefinisikan metode JavaScript untuk mengambil elemen yang cocok dengan pemilih tertentu.

Kunci API ini adalah metode querySelectorAll() pada objek Dokumen. Dibutuhkan argumen string tunggal dengan pemilih CSS dan mengembalikan objek NodeList yang mewakili semua elemen dokumen yang cocok dengan pemilih.

Selain metode querySelectorAll(), objek dokumen juga mendefinisikan metode querySelector(), yang mirip dengan metode querySelectorAll() kecuali bahwa ia hanya mengembalikan elemen pertama (dalam urutan dokumen) yang cocok, atau null jika tidak ada elemen yang cocok.

Kedua metode ini juga ditentukan oleh kelas Elements. Ketika mereka dipanggil pada suatu elemen, seluruh dokumen dicari kecocokannya dengan pemilih tertentu, dan kemudian hasilnya difilter untuk hanya menyertakan turunan dari elemen yang digunakan. Pendekatan ini mungkin tampak berlawanan dengan intuisi karena ini berarti bahwa string pemilih mungkin menyertakan nenek moyang dari elemen yang dicocokkan.

Struktur dokumen dan navigasi dokumen

Setelah memilih elemen dokumen, terkadang perlu untuk menemukan bagian dokumen yang terkait secara struktural (induk, saudara, anak). Objek Dokumen dapat dianggap sebagai pohon dari objek Node. Tipe Node mendefinisikan properti yang memungkinkan Anda menavigasi pohon tersebut. Ada antarmuka aplikasi lain untuk navigasi dokumen, seperti pohon objek Elemen.

Dokumen sebagai pohon simpul

Objek Dokumen, objek Elemennya, dan objek Teks yang mewakili fragmen teks dalam dokumen semuanya merupakan objek Node. Kelas Node mendefinisikan properti penting berikut:

simpul induk

Node induk dari node ini, atau null untuk node yang tidak memiliki induk, seperti Dokumen.

anakNode

Objek seperti array yang dapat dibaca (NodeList) yang menyediakan representasi node anak.

Anak pertama, Anak terakhir

Node anak pertama dan terakhir, atau null jika node tertentu tidak memiliki node anak.

saudara berikutnya, saudara sebelumnya

Node saudara berikutnya dan sebelumnya. Node saudara adalah dua node yang mempunyai induk yang sama. Urutan kemunculannya sesuai dengan urutan dalam dokumen. Properti ini menghubungkan node ke dalam daftar tertaut ganda.

tipe simpul

Jenis simpul ini. Node bertipe Dokumen memiliki nilai 9 di properti ini. Node bertipe Elemen - nilai 1. Node teks bertipe Teks - nilai 3. Node bertipe Komentar - nilai 8 dan node bertipe DocumentFragment - nilai 11.

nilai simpul

Konten teks dari node Teks dan Komentar.

Nama simpul

Nama tag Elemen dengan semua karakter diubah menjadi huruf besar.

Dengan menggunakan properti kelas Node ini, Anda dapat mereferensikan node anak kedua dari node anak pertama objek Dokumen, seperti yang ditunjukkan di bawah ini:

Dokumen.childNodes.childNodes == dokumen.firstChild.firstChild.nextSibling

Misalkan dokumen yang dimaksud memiliki bentuk sebagai berikut:

TesHalo Dunia!

Maka node anak kedua dari node anak pertama akan menjadi elemennya. Pada properti nodeType berisi nilai 1 dan pada properti nodeName berisi nilai “BODY”.

Namun, perhatikan bahwa API ini sangat sensitif terhadap perubahan teks dokumen. Misalnya, jika Anda menambahkan umpan baris tunggal di antara tag dan dalam dokumen ini, karakter umpan baris tersebut menjadi simpul anak pertama (simpul teks) dari simpul anak pertama, dan simpul anak kedua menjadi elemen, bukan .

Dokumen sebagai pohon elemen

Jika perhatian utama ada pada elemen dokumen itu sendiri, bukan pada teks di dalamnya (dan spasi di antara elemen tersebut), akan jauh lebih mudah menggunakan antarmuka aplikasi yang memungkinkan Anda menafsirkan dokumen sebagai pohon objek Elemen , mengabaikan node Teks dan Komentar yang juga merupakan bagian dari dokumen.

Bagian pertama dari antarmuka aplikasi ini adalah properti anak-anak dari objek Elemen. Seperti properti childNodes, nilainya adalah objek NodeList. Namun, tidak seperti properti childNodes, daftar anak hanya berisi objek Elemen.

Perhatikan bahwa node Teks dan Komentar tidak memiliki node anak. Artinya properti Node.parentNode yang dijelaskan di atas tidak pernah mengembalikan node bertipe Teks atau Komentar. Nilai properti parentNode dari objek Elemen mana pun akan selalu berupa objek Elemen lain atau akar pohon - objek Dokumen atau DocumentFragment.

Bagian kedua dari antarmuka aplikasi untuk menavigasi elemen dokumen adalah properti objek Elemen, mirip dengan properti untuk mengakses node anak dan saudara dari objek Node:

firstElementChild, lastElementChild

Mirip dengan properti firstChild dan lastChild, tetapi mengembalikan elemen turunan.

nextElementSibling, previousElementSibling

Mirip dengan properti nextSibling dan previousSibling, tetapi mengembalikan elemen saudara.

anakElementCount

Jumlah elemen anak. Mengembalikan nilai yang sama dengan properti kids.length.

Properti akses elemen anak dan saudara ini distandarisasi dan diterapkan di semua browser saat ini kecuali IE.