[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Ini adalah CS50.] [CS50.TV]
Dalam video ini kita akan melihat di DOM.
Ketika browser mendownload sebuah halaman web, perlu diwakili dalam memori entah bagaimana.
Obyek model dokumen, atau DOM,
menjelaskan bagaimana browser merupakan halaman web dalam memori.
Dalam video ini, kita akan melihat di DOM dalam konteks JavaScript,
tapi DOM adalah konsep bahasa-independen.
Misalnya, PHP memiliki implementasi DOM sendiri juga.
Namun, DOM sering dimanfaatkan oleh JavaScript
sejak JavaScript memungkinkan kita untuk mengubah isi halaman web dengan cepat,
dan DOM memungkinkan kita untuk mengakses bagian dari sebuah halaman web.
Mari kita lihat contoh halaman web.
Oke, sekarang mari kita lihat bagaimana halaman ini akan diwakili dalam DOM.
Dan setiap pohon harus memiliki akar di atas.
Untuk dokumen ini, elemen HTML adalah simpul akar
karena itu adalah elemen pertama yang muncul.
Mari menambahkan simpul akar ke pohon kami.
Mari kita lihat pada dokumen HTML lagi.
Perhatikan bahwa tag tubuh bersarang dalam tag HTML.
Ini berarti bahwa elemen body adalah anak dari elemen HTML.
Kita bisa mewakili ini dalam pohon DOM kami dengan membuat tubuh daun
turun dari HTML.
Mari kita lakukan itu.
Kami memiliki tubuh bawah HTML.
Sekarang kita dapat melihat tubuh yang memiliki 2 anak sendiri,
elemen h1 dan elemen ul.
Ini berarti bahwa kita dapat menghubungkan kedua elemen-elemen
untuk elemen body, jadi mari kita lakukan itu.
Kami memiliki h1 dan ul a.
Akhirnya, elemen ul memiliki 3 anak lagi,
dan ini akan menyelesaikan pohon DOM kami, jadi mari kita tambahkan li, li, li.
Ini melengkapi pohon DOM kami, dan ini adalah bagaimana browser menyimpan halaman web Anda.
Sekarang mari kita lihat bagaimana kita dapat melintasi pohon ini menggunakan JavaScript.
Kita dapat mengakses pohon ini menggunakan variabel JavaScript khusus yang disebut dokumen.
Salah satu properti dari objek dokumen ini
adalah milik tubuh, dan obyek ini merupakan
elemen body dalam contoh situs kami.
Jika kita ingin mendapatkan semua anak dari elemen body,
yang jika Anda ingat adalah bahwa tag h1 dan tag ul,
kita dapat mengatakan document.body.childNodes.
Dan ini akan memberi kita kembali array yang berisi baik elemen h1
dan elemen ul karena mereka berdua anak langsung tubuh.
Jika kita ingin membuat variabel yang mewakili elemen ul
kita dapat mengatakan VRR ul = maka kode ini di sini,
dan sekarang karena childNodes hanyalah sebuah array
kita dapat mengindeks ke dalamnya dengan [1] untuk mendapatkan elemen kedua dari array.
Dengan obyek ul baru kita dapat mengakses berbagai properti dari elemen seperti ID.
Jika kita mengatakan ul.id itu akan sama dengan daftar string
karena itulah apa yang kita miliki di halaman HTML kita.
Kita juga bisa mendapatkan TagName, yang dalam hal ini akan menjadi
apa jenis elemen itu, dalam hal ini, sebuah ul.
Kita juga bisa mendapatkan induknya atau node di atasnya, yang dalam hal ini
akan menjadi elemen body.
Jika kita berkata. ParentNode, itu akan menjadi sama seperti document.body.
Tentu saja, ul ini memiliki anak sendiri,
jadi kita masih bisa mengatakan. childNodes pada elemen ini,
dan array ini sekarang harus memiliki panjang 3 karena ada 3 item dalam daftar kami.
Akhirnya, mungkin properti yang paling berguna akan menjadi. InnerHTML,
dan ini akan menjadi isi sebenarnya dari daftar, yang pada halaman contoh kita
adalah mereka 3 li tag.
Tentu saja, jika kita memiliki sebuah dokumen yang besar, mengakses elemen
dengan cara ini akan sangat rumit karena
akhirnya kita harus mengatakan hal-hal seperti document.body.childNodes
braket sesuatu. childNodes braket sesuatu yang lain,
dan itu akan benar-benar rumit.
Sebaliknya apa yang kita benar-benar ingin lakukan adalah bisa query dokumen,
jadi seperti kita mencari hal-hal di internet menggunakan kata kunci
kita benar-benar membutuhkan beberapa cara untuk mencari dokumen ini singkat
kembali hanya unsur kita peduli tentang tanpa melintasi
atas pohon seluruh ke bawah.
Untungnya, browser modern memungkinkan kita untuk melakukan hal ini
dengan fungsi khusus yang disebut querySelectorAll,
dan fungsi ini mengambil satu argumen
yang merupakan pemilih CSS, dan itu akan kembali kepada kita
semua elemen yang cocok dengan pemilih.
Itu berarti Anda tidak perlu mempelajari sintaks baru untuk query DOM.
Sebaliknya Anda dapat menerapkan pengetahuan yang Anda sudah tahu
tentang CSS penyeleksi.
Mari kita lihat beberapa contoh query dokumen.
Jika kita berkata querySelectorAll dan menyebarkannya string ini # foo
itu akan memberikan kami kembali elemen dengan ID foo.
Anda juga dapat mengatakan document.getElementById
dan menyebarkannya string foo tanpa hashtag itu.
Anda akan mendapatkan kembali obyek yang sama persis.
Jika bukan kita melewati string. Bar untuk document.querySelectorAll
kita akan mendapatkan kembali semua elemen dengan kelas bar.
Kita juga dapat menggabungkan CSS penyeleksi.
Jika kita lulus dalam string # foo img
itu akan memberikan kami kembali semua elemen gambar
yang adalah anak-anak dari elemen dengan ID foo.
Seperti yang Anda lihat, dengan menggabungkan penyeleksi kami memiliki beberapa kemampuan pencarian benar-benar kuat.
Tapi di bawah tenda, DOM benar-benar hanya sebuah pohon,
dan penyeleksi ini memungkinkan kita untuk abstrak yang jauh untuk beberapa derajat
karena kita tidak selalu peduli tentang seluruh struktur pohon DOM.
Itu adalah gambaran singkat dari DOM, dan terima kasih untuk bergabung dengan kami.
[CS50.TV]