Doug LLOYD: Dalam video ini, kita ingin untuk memanggil perhatian terpisah untuk yang sangat khusus unsur JavaScript Anda mungkin menemukan berguna ketika Anda mulai untuk bekerja pada memanipulasi halaman web dan mengubah isi halaman web Anda dengan cepat. Dan itulah gagasan Object Model Dokumen. Jadi seperti yang kita lihat dalam video kami di JavaScript, objek yang sangat fleksibel. Dan mereka dapat berisi berbagai bidang. Dan meskipun kami tidak pergi ke banyak detail, bidang-bidang atau properti, bahwa kita akan mungkin lebih tepat menyebutnya dalam konteks objek, bahkan properti-properti dapat menjadi objek lain. Dan di dalam benda-benda bisa benda lainnya. 

Anda memiliki objek yang sangat besar ini dengan banyak objek lain di dalamnya, yang semacam menciptakan ide ini dari sebuah pohon besar. Sekarang, objek dokumen adalah objek yang sangat istimewa dalam JavaScript yang mengatur seluruh web Anda Halaman di bawah ini semacam payung dari sebuah objek. Dan di dalam dokumen objek adalah objek menyajikan kepala dan tubuh dari halaman web Anda. 

Di dalam dari mereka adalah lain benda, dan sebagainya, dan sebagainya, sampai seluruh halaman web Anda memiliki diselenggarakan di objek besar ini. Apa terbalik di sini, kan? Nah, kita tahu bagaimana bekerja dengan benda-benda di JavaScript. 

Jadi jika kita memiliki sebuah benda yang mengacu ke halaman web seluruh kami, yang berarti dengan memanggil yang benar metode untuk memanipulasi objek yang atau memodifikasi tertentu dari sifat-sifatnya, kita dapat mengubah unsur halaman kami pemrograman menggunakan JavaScript daripada harus kode hal dengan, katakanlah, HTML. Jadi di sini adalah contoh dari sangat sederhana halaman web, kan? Itu punya tag HTML, kepala. 

Di dalam ada judul, halo dunia. Lalu aku memiliki tubuh. Di dalam itu, saya memiliki tiga hal yang berbeda. Saya memiliki sebuah header tag h2, paragraf, dan link. Ini adalah halaman web yang sangat sederhana. 

Nah, apa mungkin dokumen keberatan untuk tampilan ini seperti? Nah, itu sedikit menakutkan mungkin pada awalnya. Tapi itu benar-benar hanya sebuah pohon besar. Dan di bagian akar itu adalah dokumen. 

Di dalam dokumen yang lain objek mengacu pada HTML halaman saya. Dan HTML halaman saya adalah semua ini. Dan kemudian dalam HTML objek, saya memiliki objek kepala, yang mengacu pada segala sesuatu yang ada. 

Dan dalam sana, Saya memiliki objek judul. Dan dalam sana, saya memiliki lain keberatan itu hanya hello world. Aku bisa memiliki tubuh saya diwakili seperti ini. 

Dalam tubuh saya, saya memiliki h2 objek dan objek p untuk ayat dan objek untuk link. Dan seluruh hirarki ini dapat direpresentasikan sebagai pohon besar dengan banyak sedikit lebih kecil hal yang keluar dari itu. Sekarang, tentu saja, ketika kita pemrograman, kita tidak memikirkan hal-hal seperti pohon besar. Kami ingin melihat yang sebenarnya kode hal yang berkaitan. 

Dan untungnya, kita bisa menggunakan alat pengembang kami untuk benar-benar kita lihat objek dokumen situs ini. Dan mari kita melakukan itu. Jadi saya sudah membuka tab browser. 

Dan aku sudah membuka Developer Tools. Dan di video saya di JavaScript, saya menyebutkan bahwa konsol tidak hanya tempat di mana kami mencetak informasi, itu juga tempat di mana kita dapat memasukkan informasi. Dalam konteks ini, apa yang Aku akan katakan adalah Saya ingin mendapatkan kembali objek dokumen, jadi saya bisa mulai untuk melihat itu. Jadi bagaimana mungkin saya melakukan ini? Nah, jika saya ingin mengatur itu benar-benar baik, Aku akan mengatakan console.dir, D-I-R. Sekarang, saya menggunakan console.log hanya cetak sesuatu yang sangat sederhana. Tapi jika saya ingin mengatur ini hierarkis seperti sebuah objek, Saya ingin semacam terstruktur seperti struktur direktori. 

Jadi saya ingin console.dir dokumen. Aku akan tekan Enter. Dan tepat di bawah sekarang, dan saya akan memperbesar sini, Saya punya dokumen respon ini dengan panah kecil di sebelahnya. Sekarang, ketika saya membuka panah ini, ada akan menjadi banyak hal. 

Tapi kami akan mengabaikan banyak itu dan hanya jenis fokus pada bagian yang paling penting, jadi kami dapat mulai untuk menavigasi dokumen ini. Ada lebih banyak untuk DOM dari hanya orang tua node dan node anak. Ada banyak hal tambahan. 

Jadi aku akan membuka hal ini. Dan ada banyak seluruh hal yang muncul. Tapi semua yang saya pedulikan adalah di sini, node anak. Mari kita membuka bahwa sampai. 

Di dalam sana aku melihat sesuatu yang akrab, HTML. Jadi di dalam dokumen kami satu tingkat ke bawah, HTML. Saya membuka bahwa sampai. Apa yang kita harapkan? 

Jika Anda ingat dari diagram kita, apa yang harus kita menemukan dalam HTML? Apa dua node berada dibawahnya dalam pohon? Mari kita cari tahu. Kami membuka HTML. Kami pergi ke node anaknya. 

Pop yang terbuka. Ada kepala dan tubuh. Dan kita dapat membuka kepala. Pergi ke node anaknya. Nah, ada judul. 

Dan kita bisa terus dan seperti ini selamanya. Kita bisa melakukan ini dengan tubuh juga. Tapi ada cara bagi kita untuk melihat dokumen diselenggarakan sebagai objek besar. Dan jika kita melihat adalah besar objek yang terlihat banyak seperti kode, itu berarti bahwa kita dapat mulai untuk memanipulasi objek besar ini menggunakan kode untuk mengubah apa yang kami situs terlihat dan terasa seperti. 

Jadi itu alat yang cukup ampuh kami miliki kami sekarang. Jadi seperti yang kita hanya melihat, yang Dokumen obyek itu sendiri dan semua objek di dalamnya memiliki sifat dan metode, hanya seperti objek lain yang kita sudah telah bekerja dengan di JavaScript. Tapi kita bisa menggunakan properti-properti dan menggunakan metode-metode untuk semacam menelusuri dari dokumen besar dan mendapatkan lebih rendah dan lebih rendah dan lebih rendah, halus dan lebih halus butir detail, sampai kita mendapatkan bagian yang sangat spesifik kami Halaman web yang ingin kita ubah. 

Dan ketika kita update properti dari Dokumen Object atau hubungi metode-metode, hal yang mungkin terjadi pada halaman web kami. Dan kita tidak perlu melakukan refreshing untuk memiliki perubahan tersebut berlaku. 

Dan itu kemampuan yang cukup keren untuk memiliki ketika kami bekerja dengan kode. Jadi apa adalah beberapa sifat ini yang merupakan bagian dari objek dokumen? Nah, Anda mungkin melihat beberapa dari mereka benar-benar cepat seperti yang kita zipping melalui dokumen raksasa objek kita hanya melihat di web browser. 

Tapi beberapa sifat ini mungkin hal-hal seperti HTML batin. Dan Anda bahkan mungkin ingat saya menggunakan ini dalam video JavaScript di akhir ketika saya berbicara tentang peristiwa. Apa HTML batin ini? Nah, itu hanya apa yang di antara tag. 

Dan HTML batin, misalnya, dari judul tag, jika kita terus berjalan di bahwa contoh beberapa saat yang lalu, akan hello world. Itu adalah judul dari halaman kami. Sifat-sifat lainnya termasuk nama node, yang adalah nama dari sebuah HTML elemen seperti judul. ID, yang merupakan ID atribut dari elemen HTML. 

Ingat bahwa kami khusus dapat menunjukkan elemen spesifik HTML kami dengan ID atribut, yang biasanya sangat berguna dalam konteks CSS, secara khusus. Node induk, yang merupakan referensi untuk apa hanya sampai di atas saya di DOM. Dan node anak, yang merupakan referensi untuk apa di bawah saya. Dan kami melihat banyak yang hanya melihat melalui. Node anak, itulah cara kami mendapat lebih rendah dan lebih rendah ke pohon. 

Atribut, itu hanya sebuah array dari atribut dari elemen HTML. Jadi contoh dari atribut mungkin jika Anda memiliki tag gambar, biasanya memiliki atribut sumber, mungkin tinggi dan atribut lebar. Dan itu hanya akan menjadi sebuah array semua atribut yang terkait dengan elemen HTML. 

Gaya adalah satu lagi yang tidak mewakili CSS styling dari elemen tertentu. Dan kemudian di ini video, kita akan secara khusus gaya leverage untuk membuat pasangan perubahan ke website kami. Jadi mereka adalah beberapa properti. 

Dan ada juga beberapa metode yang kita bisa gunakan untuk juga lebih cepat mungkin mengisolasi elemen dari Document Object. Mungkin, yang paling serbaguna ini menjadi getElementById. Jadi saya mungkin mengatakan sesuatu seperti, karena ingat itu metode Dokumen Obyek, document.getElementById. 

Dan dalam kurung tersebut, tentukan elemen HTML dengan ID tertentu atribut bahwa saya telah sebelumnya mengatur, dan saya segera akan pergi ke kanan ke elemen yang dari website secara keseluruhan. Jadi saya tidak perlu mungkin bor turun melalui setiap lapisan tunggal. Aku hanya bisa menggunakan metode ini untuk menemukan itu, semacam seperti rudal mencari panas, kanan? Hanya pergi dan menemukan persis apa yang sedang mencari. 

Buka menu adalah sangat mirip dalam roh. Mungkin ini akan menemukan semua tag tebal atau semua tag p dan memberikan saya sebuah array dari segala sesuatu bahwa saya kemudian bisa bekerja dengan. appendChild menambahkan sesuatu satu tingkat ke bawah di pohon. 

Jadi saya dapat menambahkan seluruh baru Elemen satu tingkat lebih rendah. Atau aku dapat menghapus elemen yang satu tingkat lebih rendah juga jika saya ingin menghapus sesuatu dari halaman web saya. Sekarang, coding catatan singkat dan cepat sakit kepala menyimpan catatan, mudah-mudahan. 

getElementById-- d adalah huruf kecil. Saya tidak bisa mengatakan berapa kali saya harus digunakan getElementById dan dikapitalisasi d sana. Karena itu benar-benar umum. Jika kita menulis ID kata, itu biasanya modal Aku modal D. Dan kode saya hanya tidak bekerja. Dan aku tidak tahu mengapa. Ini adalah benar-benar, benar-benar, benar-benar bug umum bahwa setiap orang membuat, bahkan para ahli yang memiliki telah melakukan ini selamanya. Jadi hanya akan menyadari, getElementById, bahwa d adalah huruf kecil. Dan mudah-mudahan, yang menyelamatkan Anda beberapa menit setidaknya dari sakit hati. 

Jadi, apa semua ini memberitahu kita? Kami memiliki metode ini. Kami memiliki sifat ini. Sekarang, jika kita mulai dari dokumen, dokumen. apapun, kita sekarang bisa mendapatkan untuk setiap satu bagian dari halaman web kami bahwa kita ingin menggunakan JavaScript hanya dengan menelepon ini metode dan memanfaatkan sifat yang kita temukan di berbagai lokasi. 

Ini bisa mendapatkan bertele-tele, ini document.getElementById, mungkin memiliki nama tag yang panjang, mungkin Anda lakukan panggilan lebih di kemudian hari. Hal bisa mendapatkan sedikit bertele-tele. Dan sebagai programmer, Anda sudah mungkin terlihat di banyak dari video ini, kita tidak suka hal-hal bertele-tele. 

Kami ingin dapat melakukan hal-hal dengan cepat. Jadi kami ingin lebih cara ringkas untuk mengatakan sesuatu. Jadi semacam ini mengarah ke Gagasan sesuatu yang disebut jQuery. Sekarang jQuery tidak JavaScript. Ini bukan bagian dari JavaScript. 

Ini adalah perpustakaan yang ditulis oleh beberapa programmer JavaScript sekitar 10 tahun yang lalu. Dan tujuannya adalah untuk menyederhanakan ini apa disebut client side scripting, yang pada dasarnya adalah apa yang kita hanya berbicara tentang dengan manipulasi DOM. Dan jadi jika saya ingin memodifikasi warna latar belakang dari halaman web saya, mungkin sebuah Div tertentu. 

Di sini, aku ternyata mendapatkan ElementById colorDiv. Dan saya ingin mengatur warna latar belakang. Jika saya hanya menggunakan murni JavaScript menggunakan Document Object Model, itu banyak hal, kan? document.getElementById colorDiv.style.backgroundColor = hijau. 

Wah. Itu banyak untuk mengatakan. Ini banyak untuk mengetik, juga. Dan di jQuery, kita mungkin bisa mengatakan ini sedikit lebih ringkas. Trade off yang itu mungkin sedikit Sedikit lebih samar tiba-tiba, kanan? 

Setidaknya panjang adalah sedikit lebih explanatory untuk apa yang kita lakukan. Tanda dolar ini, kurung, kutip tunggal, hash, colorDiv, kan? Maksudnya itu apa? Nah, itu pada dasarnya hanya document.getElementById colorDiv. 

Tapi itu semacam ini singkatan cara melakukannya menggunakan jQuery. Mari kita lihat sekarang di beberapa cara yang berbeda bahwa saya mungkin benar-benar menggunakan Document Object ini Model untuk memanipulasi potongan situs saya. Secara khusus, kita akan untuk dapat bekerja pada memanipulasi warna tertentu Div, colorDiv, pada halaman web. Jadi mari kita lihat itu. Baiklah. Jadi aku pada halaman. Ini disebut test.html ketika Anda men-download ini jika Anda ingin bermain-main dengan ini. Dan aku punya banyak tombol pada halaman ini. Dan saya katakan fungsi individu untuk warna latar belakang, ungu, hijau, oranye, merah, biru, satu fungsi tunggal untuk warna latar belakang, event handler untuk warna latar belakang, dan menggunakan jQuery. Apa yang saya bicarakan ketika aku melakukan ini? Jadi kita telah melihat tombol. Sekarang, mari kita lihat beberapa kode sumber di sini. Kita akan mulai dengan test.html. Fungsi sehingga individu untuk background warna apa yang telah saya ketik di sini. Mari saya gulir sedikit. 

Dan Anda akan melihat bahwa saya telah didefinisikan tombol ini mengatakan ketika tombol ini diklik, memanggil fungsi berubah ungu. Ketika tombol ini klik, lebih tepatnya, memanggil fungsi berubah menjadi hijau, mengubah oranye, berubah menjadi merah, berubah menjadi biru. Anda mungkin bisa menebak bahwa ini mungkin bukan desain terbaik akal, kan? 

Akan lebih baik jika aku bisa memiliki pendekatan yang lebih umum. Yah, pertama kita akan melihat-lihat apa lima fungsi yang document.getElementById colorDiv.style.background = ungu, hijau, oranye, merah, dan biru, masing-masing. Jadi, tidak terlalu desain terbaik. 

Set berikutnya tombol Saya telah yang saya tulis fungsi tunggal yang disebut mengubah warna yang tampaknya menerima string sebagai argumen. Jadi ini adalah sedikit lebih baik. Ungu, hijau, oranye, merah, biru sekarang argumen. Jadi saya telah menulis lebih umum kasus fungsi JavaScript, yang mungkin terlihat seperti ini. Aku lewat di. Berubah warna Fungsi ini mengharapkan argumen yang disebut warna. Dan saya katakan mengatur warna latar belakang warna. Jadi di sini mewakili apa yang aku punya di sini. Jadi itu sedikit lebih baik. 

Tapi aku mungkin bisa melakukan lebih baik dari itu. Jika kita pergi ke kita lihat situasi event handler, sekarang semua panggilan ini terlihat sama. Jika Anda ingat untuk kami diskusi tentang event, Saya bisa mendapatkan informasi tentang yang mana dari tombol ini diklik dan menggunakannya. 

Dan di event.JavaScript, saya sudah ditulis acara berubah warna, yang angka keluar tombol yang diklik. Itulah garis objek pemicu. Dan kemudian di sini, itu akan benar-benar bertele-tele. Tapi apa yang saya lakukan adalah saya pengaturan latar belakang warna triggerObject inner.HTML. Itulah teks dalam antara tag tombol. 

Dan kemudian saya tampaknya memiliki untuk mengatur ke huruf kecil. Dan itulah bagaimana saya bisa mengkonversi seluruh string untuk huruf kecil dalam JavaScript menggunakan Metode yang menjadi huruf kecil. Karena ketika saya mengatur warna, karena saya coba lakukan di sini, warna harus huruf kecil semua. 

Tapi tombol yang saya punya, jika kita melihat lagi, melihat bahwa teks ada ditulis dengan P modal untuk ungu. Dan kemudian di bagian paling bawah sini, saya rupanya mencoba dan melakukannya dengan menggunakan jQuery juga. Dan dalam hal ini, aku tidak benar-benar memanggil fungsi sama sekali. Aku baru saja mengatakan kelas bahwa aku menggunakan untuk tombol ini adalah tombol JQ. Itu dia. 

Jadi bagaimana jQuery tahu apa yang saya lakukan? Nah, ini adalah salah satu keuntungan memangkas kerugian dari jQuery. Hal ini dapat memungkinkan saya untuk melakukan hal-hal sangat singkat, tapi mungkin tidak sebagai intuitif. Mungkin tiga lainnya membuat Sedikit lebih merasakan apa yang saya lakukan. Di sini, meskipun, apa yang terjadi? 

Rupanya, menciptakan fungsi anonim bahwa beban setiap kali dokumen saya siap, jadi document.ready, beberapa fungsi yang akan terjadi. Pada dasarnya, kapan dokumen siap? Justru ketika halaman saya telah dimuat. 

Jadi, segera setelah halaman saya telah dimuat, fungsi berikut selalu siap. Ia mengatakan, jika sebuah objek dari tipe jQButton, atau jika kelas jQButton telah diklik, melaksanakan fungsi ini. Jadi, inilah dua fungsi anonim, salah didefinisikan di dalam yang lain. 

Jadi seluruh konteks saya di sini sejauh ini adalah halaman saya ketika beban itu panggilan fungsi ini. Dan fungsi ini menunggu untuk tombol untuk diklik. Dan ketika tombol diklik, JQ Tombol khusus diklik, panggilan ini lainnya fungsi, yang akan untuk mengatur latar belakang warna colorDiv menjadi teks apa yang ada di antara tag. 

Ini adalah gagasan tombol yang diklik. Tapi sebaliknya, ini adalah semacam berperilaku mirip dengan sebuah acara. Ini hanya cara yang sama saya akan mengungkapkan ini dalam jQuery. Sekali lagi, itu mungkin banyak lebih menakutkan. Ini tidak sejelas sesuatu seperti event.js, yang mungkin sedikit lebih verbose, tapi sedikit kurang mengintimidasi. 

Tetapi jika kita pop kembali ke browser saya window, jika saya mulai clicking-- baik, yang berubah menjadi ungu. Ini adalah hijau dengan menggunakan metode tali. Ini adalah oranye menggunakan event handler. 

Ini adalah merah menggunakan jQuery, kan? Mereka semua berperilaku persis sama. Mereka hanya melakukannya dengan menggunakan berbagai pendekatan untuk memecahkan masalah. Ada lebih banyak untuk jQuery maka kami pasti akan berbicara tentang dalam video ini. Tetapi jika Anda ingin mempelajari lebih lanjut, Anda dapat pergi ke jQuery semacam dokumentasi dan belajar sedikit tentang perpustakaan ini sangat fleksibel, yang sangat bagus untuk melakukan sisi klien scripting seperti apa yang kami lakukan untuk memanipulasi tampilan dan nuansa halaman web kami dengan Document Object Model. Aku Doug Lloyd. Ini adalah CS50.