DOUG LLOYD: Dalam video ini, kami mahu untuk memanggil perhatian berasingan kepada yang tertentu unsur JavaScript yang anda mungkin dapati berguna apabila anda memulakan untuk bekerja pada memanipulasi laman web dan mengubah kandungan laman web anda dengan cepat. Dan itulah tanggapan Document Object Model. Jadi seperti yang kita lihat dalam video kami di JavaScript, objek adalah sangat fleksibel. Dan mereka boleh mengandungi pelbagai bidang. Dan walaupun kita tidak pergi ke dalam banyak terperinci, bidang-bidang atau harta, yang kita lakukan mungkin lebih sewajarnya memanggil mereka dalam konteks objek, walaupun mereka sifat-sifat boleh menjadi objek lain. Dan di dalam objek boleh menjadi objek lain. 

Anda mempunyai objek yang sangat besar ini dengan banyak objek lain di dalamnya, yang semacam mencipta idea ini pokok besar. Sekarang, objek dokumen itu ialah suatu objek yang sangat istimewa dalam JavaScript yang menganjurkan keseluruhan web anda halaman di bawah ini jenis payung objek. Dan sebagainya dalam dokumen objek objek menyampaikan kepala dan badan atas laman web anda. 

Dalam orang-orang yang lain objek, dan sebagainya, dan sebagainya, sehingga halaman web keseluruhan anda mempunyai dianjurkan dalam objek ini besar. Apa yang terbalik di sini, bukan? Baik, kita tahu bagaimana untuk bekerja dengan objek dalam JavaScript. 

Jadi, jika kita mempunyai objek yang merujuk ke laman web keseluruhan kami, yang bermakna dengan memanggil yang betul kaedah untuk memanipulasi objek yang atau mengubah suai tertentu hartanah, kami boleh menukar unsur-unsur halaman kami pengaturcaraan menggunakan JavaScript daripada harus untuk kod perkara dengan, katakan, HTML. Jadi di sini adalah satu contoh sangat mudah laman web, bukan? Ia mempunyai tag HTML, kepala. 

Di dalam terdapat tajuk, hello dunia. Kemudian saya mempunyai badan yang. Di dalam itu, saya mempunyai tiga perkara yang berbeza. Saya mempunyai tag header h2, perenggan, dan pautan. Ini adalah halaman web yang sangat mudah. 

Nah, apa yang mungkin dokumen membantah untuk melihat ini seperti? Nah, ia sedikit menakutkan mungkin pada mulanya. Tetapi ia adalah benar-benar hanya pokok besar. Dan pada akar yang sangat ia adalah dokumen. 

Di dalam dokumen itu adalah satu lagi objek merujuk kepada HTML halaman saya. Dan HTML halaman saya ialah semua ini. Dan kemudian di dalam HTML objek, saya mempunyai objek kepala, yang merujuk kepada segala-galanya ada. 

Dan di dalam sana, Saya mempunyai objek tajuk. Dan di dalam sana, saya mempunyai satu lagi membantah itu hanya dunia hello. Saya boleh mempunyai badan saya diwakili seperti ini. 

Di dalam badan saya, saya mempunyai h2 yang objek dan p objek perenggan dan objek untuk pautan. Dan sebagainya keseluruhan hierarki ini boleh diwakili sebagai pokok besar dengan banyak lebih kecil perkara-perkara yang keluar daripadanya. Kini, sudah tentu, apabila kita pengaturcaraan, kita tidak memikirkan perkara-perkara seperti pokok besar. Kita mahu melihat yang sebenar perkara yang berkaitan kod. 

Dan nasib baik, kita boleh menggunakan alat pemaju kami untuk benar-benar mengambil lihat objek dokumen laman web ini. Dan mari kita berbuat demikian. Jadi saya telah membuka tab penyemak imbas. 

Dan saya telah membuka Alat Pembangun. Dan dalam video saya JavaScript, saya menyebut bahawa konsol tidak hanya kurang lebih di mana kita mencetak maklumat, ia juga tempat di mana kita boleh maklumat input. Dalam konteks ini, apa yang Saya akan katakan adalah Saya ingin kembali objek dokumen, jadi saya boleh mula kita lihat ia. Jadi bagaimana saya boleh melakukan ini? Nah, jika saya mahu menganjurkan ia benar-benar baik, Saya akan mengatakan console.dir, D-I-R. Sekarang, saya menggunakan console.log hanya cetak sesuatu yang sangat mudah. Tetapi jika saya ingin menganjurkan ini hierarki seperti objek, Saya mahu ia semacam berstruktur seperti struktur direktori. 

Jadi saya mahu console.dir dokumen. Saya akan tekan Enter. Dan kanan di bawah sekarang, dan saya akan zum masuk sini, Saya telah mendapat dokumen sambutan ini dengan anak panah kecil di sebelahnya. Kini, apabila saya membuka anak panah ini, ada akan menjadi banyak perkara. 

Tetapi kita akan mengabaikan banyak daripadanya dan hanya jenis tumpuan pada bahagian yang paling penting, jadi kami boleh mula mengemudi dokumen ini. Ada banyak lagi untuk DOM daripada nod dan nod kanak-kanak hanya ibu bapa. Ada banyak perkara sampingan. 

Jadi saya akan membuka ini. Dan ada banyak keseluruhan barangan yang timbul. Tetapi apa yang saya mengambil berat tentang adalah di sini, nod kanak-kanak. Mari kita membuka bahawa sehingga. 

Dalam sana saya melihat sesuatu yang biasa, HTML. Jadi di dalam dokumen kami satu tahap ke bawah, HTML. Saya membuka bahawa sehingga. Apa yang kita jangkakan? 

Jika anda ingat dari gambarajah kami, apa yang patut kita dapati di dalam HTML? Apakah dua nod adalah di bawah dalam pokok itu? Mari kita mengetahui. Kita membuka HTML. Kami turun ke nod kanak-kanak itu. 

Pop yang boleh dibuka. Ada kepala dan badan. Dan kita boleh membuka kepala. Pergi ke nod kanak-kanak itu. Nah, ada tajuk. 

Dan kita boleh pergi pada dan seperti ini selama-lamanya. Kita boleh melakukan ini dengan badan juga. Tetapi ada satu cara bagi kita untuk melihat dokumen itu dianjurkan sebagai objek besar. Dan jika kita melihat adalah besar objek yang kelihatan banyak seperti kod, ini bermakna bahawa kita boleh mula untuk memanipulasi objek ini besar menggunakan kod untuk mengubah apa yang kami laman web kelihatan dan berasa seperti. 

Jadi itulah alat yang cukup kuat kita ada di tangan kita sekarang. Jadi seperti yang kita hanya melihat, yang objek dokumen itu sendiri dan semua objek di dalamnya mempunyai ciri-ciri dan kaedah, hanya seperti mana-mana objek lain yang kami telah telah bekerja dengan dalam JavaScript. Tetapi kita boleh menggunakan sifat-sifat dan menggunakan orang-orang kaedah untuk jenis mengesan daripada dokumen besar dan mendapatkan rendah dan lebih rendah dan lebih rendah, lebih halus dan lebih halus bijirin terperinci, sehingga kita sampai ke bahagian yang sangat khusus kami Laman web yang kita mahu tukar. 

Dan apabila kita mengemaskini sifat-sifat Dokumen Objek atau memanggil orang-orang kaedah, perkara yang mungkin berlaku di laman web kami. Dan kita tidak perlu melakukan apa-apa yang menyegarkan untuk mempunyai perubahan tersebut berkuat kuasa. 

Dan itulah kemampuan yang cukup sejuk untuk ada apabila kita bekerja dengan kod. Jadi apa yang adalah beberapa sifat-sifat ini yang merupakan sebahagian daripada objek dokumen? Nah, anda mungkin melihat seorang beberapa daripada mereka benar-benar cepat seperti yang kita telah zipping melalui dokumen gergasi objek kita hanya melihat dalam pelayar web. 

Tetapi beberapa sifat-sifat ini mungkin perkara seperti HTML dalam. Dan anda juga mungkin ingat saya menggunakan ini dalam video JavaScript pada akhir sangat apabila saya bercakap tentang peristiwa. Apakah HTML dalaman ini? Nah, ia hanya apa yang di antara tag. 

Dan sebagainya HTML dalam, sebagai contoh, tajuk tag, jika kita terus berjalan di bahawa contoh masa yang lalu, akan menjadi hello dunia. Itu adalah tajuk laman kami. Harta-harta lain termasuk nama nod, yang adalah nama HTML elemen seperti tajuk. ID, yang merupakan ID sifat suatu elemen HTML. 

Ingat bahawa kita khas boleh menunjukkan unsur khusus HTML kami dengan sifat ID, yang biasanya amat berguna dalam konteks CSS, secara khusus. Nod induk, iaitu merujuk kepada apa yang hanya sehingga atas saya dalam DOM. Dan nodus kanak-kanak, yang merupakan merujuk kepada apa yang turun di bawah saya. Dan kita melihat banyak yang hanya melihat melalui. Nod Anak, itulah bagaimana kita mendapat rendah dan lebih rendah ke dalam pokok itu. 

Sifat-sifat, itu hanya array daripada sifat-sifat unsur HTML. Jadi satu contoh sifat-sifat yang mungkin menjadi jika anda mempunyai tag imej, ia biasanya mempunyai sifat sumber, mungkin ketinggian dan satu sifat yang lebar. Dan sebagainya yang hanya akan menjadi array semua sifat-sifat yang berkaitan dengan elemen HTML. 

Gaya adalah perasaan yang terdapat tidak mewakili CSS gaya elemen tertentu. Dan kemudian di dalam ini video, kami akan secara khusus gaya pengaruh untuk membuat pasangan perubahan kepada laman web kami. Jadi mereka adalah beberapa ciri-ciri. 

Dan terdapat juga beberapa kaedah yang kita boleh gunakan untuk juga lebih cepat mungkin mengasingkan unsur-unsur Objek Dokumen. Mungkin, yang paling serba boleh ini menjadi getElementById. Jadi saya boleh berkata sesuatu seperti, kerana ingat ia adalah satu kaedah Dokumen Membantah, document.getElementByID. 

Dan di dalam orang-orang kurungan, menentukan elemen HTML ID tertentu sifat yang saya ada sebelum ini ditetapkan, dan saya akan segera pergi hak untuk elemen yang laman web secara keseluruhan. Jadi, saya tidak perlu mungkin menggerudi ke bawah melalui setiap lapisan tunggal. Saya hanya boleh menggunakan kaedah ini untuk mencari, jenis seperti peluru berpandu seeking haba, bukan? Ia hanya pergi dan mendapati apa yang ia cari. 

GetElementsByTagName adalah hampir sama dalam semangat. Mungkin ini akan mendapati semua tag berani atau semua p tag dan memberikan saya pelbagai segala-galanya bahawa saya kemudiannya boleh bekerja dengan. appendChild menambah sesuatu satu tahap ke bawah di pokok itu. 

Jadi saya boleh menambah keseluruhan baru elemen satu tahap yang lebih rendah. Atau saya boleh mengeluarkan unsur itulah satu tahap yang lebih rendah dan juga jika saya mahu untuk memadam sesuatu dari laman web saya. Sekarang, komen pengekodan yang cepat dan cepat sakit kepala penjimatan nota, mudah-mudahan. 

getElementById-- d adalah huruf kecil. Saya tidak boleh memberitahu anda berapa banyak kali saya mempunyai digunakan getElementById dan modal yang mencukupi d di sana. Oleh kerana ia benar-benar sama. Jika kita menulis ID perkataan, ia biasanya ibu saya modal D. Dan kod saya hanya tidak berfungsi. Dan saya tidak dapat memikirkan mengapa. Ini adalah benar-benar, benar-benar, benar-benar bug umum bahawa semua orang membuat, juga pakar-pakar yang mempunyai telah melakukan ini selama-lamanya. Jadi hanya sedar, getElementById, d yang kecil. Dan mudah-mudahan, yang menjimatkan anda beberapa minit sekurang-kurangnya sakit hati. 

Jadi, apa yang semua ini kepada kita? Kami mempunyai kaedah ini. Kami mempunyai sifat-sifat ini. Sekarang, jika kita bermula dari dokumen, dokumen. apa sahaja, kita kini boleh ke mana-mana sekeping laman web kami yang kita mahu menggunakan JavaScript hanya dengan memanggil ini kaedah dan menggunakan sifat-sifat yang kita dapati di pelbagai lokasi. 

Ini boleh mendapatkan panjang lebar, ini document.getElementByID, mungkin mempunyai tag nama yang panjang, mungkin anda melakukan lebih banyak panggilan di kemudian hari. Perkara yang boleh mendapatkan sedikit panjang lebar. Dan sebagai pengatur cara, seperti yang anda telah mungkin dilihat dalam banyak video ini, kita tidak suka perkara yang panjang lebar. 

Kami suka untuk dapat melakukan sesuatu dengan cepat. Oleh itu, kita mahu yang lebih cara ringkas untuk mengatakan sesuatu. Jadi seperti ini membawa kepada tanggapan sesuatu yang dipanggil jQuery. Sekarang jQuery tidak JavaScript. Ia bukan sebahagian daripada JavaScript. 

Ia adalah perpustakaan yang ditulis oleh beberapa pengaturcara JavaScript kira-kira 10 tahun yang lalu. Dan matlamatnya adalah untuk memudahkan ini apa yang dipanggil pelanggan skrip sampingan, yang pada asasnya apa yang kami cuba bercakap mengenai dengan manipulasi DOM. Dan jadi jika saya mahu mengubah suai warna latar belakang laman web saya, mungkin yang Div tertentu. 

Di sini, saya nampaknya semakin ElementById colorDiv. Dan saya mahu untuk menetapkan warna latar belakang. Jika saya hanya menggunakan tulen JavaScript menggunakan Document Object Model, itulah banyak perkara, bukan? document.getElementByID colorDiv.style.backgroundColor = hijau. 

Huh. Itu adalah banyak untuk mengatakan. Ia banyak menaip, juga. Dan sebagainya dalam jQuery, kita mungkin boleh mengatakan ini sedikit lebih ringkas. Perdagangan luar yang ia mungkin sedikit sedikit lebih samar tiba-tiba, bukan? 

Sekurang-kurangnya masa panjang adalah sedikit lebih Penjelasan tentang apa yang kami lakukan. Ini tanda dolar, kurungan, petikan tunggal, hash, colorDiv, bukan? Apa maksudnya? Nah, itu pada dasarnya hanya document.getElementByID colorDiv. 

Tetapi ia seperti ini trengkas cara melakukannya menggunakan jQuery. Mari kita lihat sekarang pada beberapa cara yang berbeza sehingga aku dapat sebenarnya menggunakan Document Object ini Model untuk memanipulasi keping laman saya. Khususnya, kita akan untuk bekerja pada memanipulasi warna tertentu Div, colorDiv, pada laman web. Jadi mari kita lihat itu. Baiklah. Jadi saya pada halaman. Ia dipanggil test.html apabila anda memuat turun ini jika anda mahu untuk bermain-main dengan ini. Dan saya telah mendapat sekumpulan butang pada halaman ini. Dan saya katakan fungsi individu untuk warna latar belakang, ungu, hijau, oren, merah, biru, satu fungsi tunggal untuk warna latar belakang, pengendali acara untuk warna latar belakang, dan menggunakan jQuery. Apa yang saya bercakap tentang apabila saya melakukan ini? Oleh itu, kita telah melihat butang. Sekarang, mari kita lihat pada beberapa kod sumber di sini. Kami akan bermula dengan test.html. Fungsi yang individu untuk latar belakang warna adalah apa yang saya telah ditaip di sini. Biar saya tatal sedikit. 

Dan anda akan melihat bahawa saya telah ditakrifkan butang ini untuk mengatakan apabila butang ini diklik, memanggil fungsi menghidupkan ungu. Apabila butang ini klik, sebaliknya, memanggil fungsi yang bertukar hijau, bertukar oren, menjadi merah, bertukar menjadi biru. Anda mungkin boleh meneka bahawa ini mungkin tidak reka bentuk yang terbaik rasa, bukan? 

Akan lebih baik jika saya boleh mempunyai pendekatan yang lebih umum. Well, pertama kita akan melihat dengan apa yang mereka lima fungsi adalah document.getElementByID colorDiv.style.background = ungu, hijau, oren, merah, dan biru, masing-masing. Jadi, tidak terutamanya reka bentuk yang terbaik. 

Set seterusnya butang Saya adalah saya telah menulis fungsi tunggal dipanggil menukar warna yang nampaknya menerima rentetan sebagai hujah. Jadi ini adalah sedikit lebih baik. Ungu, hijau, oren, merah, biru kini pertengkaran. Oleh itu, saya telah menulis yang lebih umum kes JavaScript fungsi, yang mungkin kelihatan seperti ini. Saya lulus dalam. Ini perubahan warna berfungsi menjangkakan hujah dipanggil warna. Dan saya katakan menetapkan warna latar belakang untuk warna. Jadi di sini mewakili apa yang saya dapat di sini. Jadi itu sedikit lebih baik. 

Tetapi saya mungkin dapat melakukan lebih baik daripada itu. Jika kita turun untuk melihat dengan pada keadaan pengendali peristiwa, kini semua panggilan ini kelihatan sama. Jika anda masih ingat untuk kami perbincangan mengenai pengendali acara, Saya boleh mendapatkan maklumat tentang mana-mana butang ini diklik dan menggunakannya. 

Dan sebagainya dalam event.JavaScript, saya telah ditulis peristiwa perubahan warna, yang angka butang yang diklik. Itulah garis pencetus objek. Dan kemudian di sini, ia akan benar-benar panjang lebar. Tetapi apa yang saya lakukan ialah saya menetapkan latar belakang warna untuk triggerObject inner.HTML. Itulah teks dalam antara tag butang. 

Dan kemudian saya nampaknya mempunyai untuk menetapkan ia kepada huruf kecil. Dan itulah bagaimana saya boleh menukar keseluruhan yang rentetan kepada huruf kecil dalam JavaScript menggunakan kaedah yang kepada huruf kecil. Kerana apabila saya menetapkan warna, kerana saya cuba lakukan di sini, warna yang telah menjadi semua huruf kecil. 

Tetapi butang yang saya, jika kita lihat satu lagi, melihat bahawa teks yang ada ditulis dengan modal P secara ungu. Dan kemudian sekurang- bawah di sini, saya nampaknya mencuba dan melakukan ini dengan menggunakan jQuery juga. Dan dalam kes ini, saya tidak benar-benar memanggil fungsi sama sekali. Saya baru sahaja berkata kelas bahawa saya menggunakan untuk butang ini butang JQ. Itu sahaja. 

Jadi bagaimana jQuery tahu apa yang saya buat? Nah, ini adalah salah satu kelebihan mengurangkan keburukan jQuery. Ia boleh membenarkan saya untuk melakukan perkara-perkara sangat ringkas, tetapi mungkin tidak sebagai gerak hati. Mungkin ketiga-tiga yang lain membuat sedikit lebih rasa apa yang saya lakukan. Di sini, walaupun, apa yang berlaku? 

Rupa-rupanya, mewujudkan fungsi tanpa nama yang beban apabila dokumen saya bersedia, jadi document.ready, beberapa fungsi yang akan berlaku. Pada asasnya, apabila adalah dokumen yang bersedia? Ia adalah apabila halaman saya telah dimuatkan. 

Jadi sebaik sahaja halaman saya telah dimuatkan, berikut fungsi sentiasa bersedia. Ia mengatakan, jika suatu objek jenis jQButton, atau jika kelas jQButton telah diklik, melaksanakan fungsi ini. Jadi di sini adalah dua fungsi tanpa nama, salah ditakrifkan dalam yang lain. 

Maka segenap konteks saya di sini setakat ini adalah halaman saya apabila ia memuatkan ia memerlukan fungsi ini. Dan fungsi ini sedang menunggu untuk butang yang akan diklik. Dan apabila butang diklik, JQ butang khusus diklik, ia memerlukan ini lain fungsi, yang akan untuk menetapkan latar belakang warna colorDiv menjadi apa sahaja teks adalah di antara tag. 

Ini adalah tanggapan butang yang diklik. Tetapi jika tidak, ini adalah jenis berkelakuan serupa dengan peristiwa. Ia hanya cara yang sama saya akan menyatakan ini dalam jQuery. Sekali lagi, ia mungkin banyak lagi menakutkan. Ia bukan seperti yang jelas sesuatu seperti event.js, yang mungkin sedikit lebih banyak cakap, tetapi sedikit kurang menakutkan. 

Tetapi jika kita pop kembali ke penyemak imbas saya tingkap, jika saya mula clicking-- baik, yang ditukar kepada ungu. Ini adalah hijau menggunakan kaedah tali. Ini adalah oren menggunakan pengendali acara tersebut. 

Ini adalah merah menggunakan jQuery, bukan? Mereka semua berkelakuan sama. Mereka hanya melakukannya menggunakan berbeza pendekatan untuk menyelesaikan masalah tersebut. Ada banyak lagi yang jQuery maka kita pasti akan bercakap tentang dalam video ini. Tetapi jika anda ingin mengetahui lebih lanjut, anda boleh pergi ke jenis jQuery dokumentasi dan belajar agak sedikit lebih lanjut mengenai perpustakaan sangat fleksibel ini, yang besar untuk melakukan sebelah pelanggan skrip seperti apa yang kami lakukan untuk memanipulasi rupa dan rasa laman web kami dengan Document Object Model. Saya Doug Lloyd. Ini adalah CS50.