[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Universiti Harvard]
[Ini adalah CS50.] [CS50.TV]
Dalam video ini kita akan mengambil melihat DOM.
Apabila pelayar memuat turun laman web, ia perlu diwakili dalam ingatan entah bagaimana.
Model objek dokumen, atau DOM,
menerangkan bagaimana pelayar merupakan laman web dalam ingatan.
Dalam video ini, kita akan melihat DOM dalam konteks JavaScript,
tetapi DOM adalah satu konsep bahasa bebas.
Sebagai contoh, PHP mempunyai pelaksanaan DOM sendiri juga.
Walau bagaimanapun, DOM sering digunakan oleh JavaScript
sejak JavaScript membolehkan kita untuk menukar kandungan laman web dengan cepat,
DOM dan membolehkan kita mengakses bahagian-bahagian laman web.
Mari kita lihat pada laman web contoh.
Baiklah, sekarang mari kita lihat bagaimana halaman ini akan diwakili dalam DOM.
Dan setiap pokok perlu mempunyai nod akar di atas.
Untuk dokumen ini, elemen HTML adalah nod akar
kerana ia adalah elemen pertama yang muncul.
Mari menambah nod akar kepada pokok kita.
Mari kita lihat pada dokumen HTML lagi.
Perhatikan bahawa tag badan bersarang di dalam tag HTML.
Ini bermakna bahawa unsur badan adalah kanak-kanak elemen HTML.
Kita boleh mewakili ini dalam pokok DOM kita dengan membuat badan daun
turun dari HTML.
Mari kita buat itu.
Kami mempunyai badan di bawah HTML.
Sekarang kita boleh melihat badan yang mempunyai 2 anak-anak sendiri,
elemen h1 dan elemen ul.
Ini bermakna bahawa kita boleh menyambung kedua-dua unsur-unsur
kepada unsur badan, jadi mari kita berbuat demikian.
Kami mempunyai h1 dan ul a.
Akhirnya, unsur ul mempunyai 3 lagi kanak-kanak,
dan ini akan menyelesaikan pokok DOM kami, jadi mari kita menambah li, li, li.
Ini melengkapkan pokok DOM kita, dan ini adalah bagaimana pelayar tidak menyimpan laman web anda.
Sekarang mari kita lihat bagaimana kita boleh merentasi pokok ini menggunakan JavaScript.
Kami boleh mengakses pokok ini menggunakan JavaScript ubah khas yang dipanggil dokumen.
Satu harta objek dokumen ini
adalah harta badan, dan objek ini mewakili
unsur badan dalam contoh laman web kami.
Jika kita mahu untuk mendapatkan semua anak-anak unsur badan,
yang jika anda ingat adalah bahawa tag h1 dan tag ul,
kita boleh mengatakan document.body.childNodes.
Dan ini akan memberikan kita kembali pelbagai yang mengandungi kedua-dua elemen yang h1
dan elemen ul sejak mereka kanak-kanak langsung badan.
Jika kita mahu mencipta pembolehubah yang mewakili unsur ul
kita boleh mengatakan vrr ul = kemudian kod ini di sini,
dan sekarang kerana childNodes hanya array
kita boleh indeks ke dalamnya dengan [1] untuk mendapatkan elemen kedua array itu.
Dengan objek ul baru ini, kita boleh mengakses pelbagai sifat unsur seperti ID itu.
Jika kita mengatakan ul.id itu akan sama dengan senarai rentetan
kerana itulah apa yang kita ada di laman HTML kami.
Kita juga boleh mendapatkan tagName, yang dalam kes ini akan menjadi
apa jenis elemen itu, dalam kes ini, ul a.
Kita juga boleh mendapatkan ibu bapa atau nod di atasnya, yang dalam kes ini
akan menjadi elemen badan.
Jika kita katakan. ParentNode, itu akan menjadi sama seperti document.body.
Sudah tentu, ul ini mempunyai anak-anak sendiri,
jadi kita masih boleh katakan. childNodes pada unsur ini,
dan mudah ini sekarang harus mempunyai panjang 3 kerana terdapat 3 item dalam senarai kami.
Akhirnya, mungkin harta yang paling berguna akan menjadi. InnerHTML,
dan ini akan menjadi kandungan sebenar senarai, yang di halaman contoh kita
adalah mereka 3 li tag.
Sudah tentu, jika kita mempunyai dokumen besar, mengakses elemen
dengan cara ini akan menjadi benar-benar rumit kerana
akhirnya kita akan mempunyai untuk mengatakan perkara-perkara seperti document.body.childNodes
sesuatu golongan. childNodes sesuatu golongan yang lain,
dan ia akan mendapat benar-benar rumit.
Namun apa yang kita benar-benar mahu lakukan adalah dapat query dokumen itu,
jadi hanya seperti kita mencari perkara-perkara di internet menggunakan kata kunci
kita benar-benar memerlukan beberapa cara untuk mencari dokumen ini untuk ringkas
mendapatkan kembali hanya unsur-unsur yang kita sayangi tanpa menyeberangi
keseluruhan atas pokok ke bawah.
Nasib baik, pelayar moden membolehkan kita untuk melakukan ini
dengan fungsi khas yang dipanggil querySelectorAll,
dan fungsi ini mengambil hujah tunggal
yang merupakan CSS pemilih, dan ia akan kembali kepada kami
semua unsur-unsur yang sesuai dengan yang pemilih.
Ini bermakna anda tidak perlu belajar sintaks baru untuk menyoal DOM.
Sebaliknya, anda boleh menggunakan pengetahuan yang anda sudah tahu
mengenai pemilih CSS.
Mari kita lihat beberapa contoh pertanyaan dokumen itu.
Jika kita mengatakan querySelectorAll dan lulus ini rentetan # foo
itu akan memberikan kita kembali unsur dengan ID foo.
Anda juga boleh mengatakan document.getElementByID
dan lulus rentetan foo tanpa hashtag itu.
Anda akan mendapatkan kembali objek yang sama.
Jika sebaliknya kita lulus tali. Bar untuk document.querySelectorAll
kita akan kembali semua unsur-unsur dengan bar kelas.
Kami juga boleh menggabungkan pemilih CSS.
Jika kita lulus dalam rentetan # foo img
itu akan memberikan kita kembali semua unsur-unsur imej
kanak-kanak yang unsur dengan ID foo.
Seperti yang anda lihat, dengan menggabungkan selectors kita mempunyai beberapa kemampuan carian benar-benar kuat.
Tetapi di bawah hud itu, DOM adalah benar-benar hanya pokok,
dan ini selectors membolehkan kita untuk abstrak yang jauh ke tahap yang tertentu
kerana kita tidak sentiasa mengambil berat tentang struktur keseluruhan pokok DOM itu.
Itu adalah gambaran keseluruhan cepat daripada DOM, dan terima kasih kerana menyertai kami.
[CS50.TV]