Salah satu kemampuan JavaScript yang paling unik dan berguna adalah kemampuannya untuk memanipulasi DOM. Tapi apa itu DOM, dan bagaimana kita mengubahnya?
Bagian ini berisi gambaran umum tentang topik yang akan Anda pelajari dalam pelajaran ini
- Jelaskan apa itu DOM dalam kaitannya dengan halaman web
- Jelaskan perbedaan antara "simpul" dan "elemen"
- Jelaskan cara menargetkan node dengan "penyeleksi"
- Jelaskan metode dasar untuk menemukan/menambahkan/menghapus dan mengubah node DOM
- Jelaskan perbedaan antara "nodelist" dan "array of nodes"
- Jelaskan apa itu "bubbling" dan bagaimana cara kerjanya
DOM (atau Model Objek Dokumen) adalah representasi seperti pohon dari konten halaman web - pohon "simpul" dengan hubungan yang berbeda tergantung pada bagaimana mereka diatur dalam dokumen HTML
<div id="container"> <div class="display"></div> <div class="controls"></div> </div>Dalam contoh di atas, const div = document.createElement('div'); _6 adalah “anak” dari const div = document.createElement('div'); 7 dan saudara dari const div = document.createElement('div'); 8. Anggap saja seperti silsilah keluarga. const div = document.createElement('div'); _7 adalah orang tua, dengan anak-anaknya di tingkat berikutnya, masing-masing di "cabang" mereka sendiri
Saat bekerja dengan DOM, Anda menggunakan "penyeleksi" untuk menargetkan node yang ingin Anda kerjakan. Anda dapat menggunakan kombinasi pemilih gaya CSS dan properti hubungan untuk menargetkan node yang Anda inginkan. Mari kita mulai dengan pemilih gaya CSS. Dalam contoh di atas, Anda dapat menggunakan pemilih berikut untuk merujuk ke const div = document.createElement('div'); 6
- div. menampilkan
- menampilkan
- #wadah >. menampilkan
- div#wadah > div. menampilkan
Anda juga dapat menggunakan pemilih relasional (mis. e. const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 1 atau const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 2 dll. ) dengan properti khusus yang dimiliki oleh node
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display _Jadi, Anda mengidentifikasi simpul tertentu berdasarkan hubungannya dengan simpul di sekitarnya
Saat kode HTML Anda diuraikan oleh browser web, kode tersebut diubah menjadi DOM seperti yang disebutkan di atas. Salah satu perbedaan utamanya adalah node ini adalah objek yang memiliki banyak properti dan metode yang melekat padanya. Properti dan metode ini adalah alat utama yang akan kita gunakan untuk memanipulasi halaman web kita dengan JavaScript. Kami akan mulai dengan pemilih kueri - yang membantu Anda menargetkan node
Pemilih Kueri
- elemen. querySelector(selector) mengembalikan referensi ke pertandingan pertama pemilih
- elemen. querySelectorAll(selectors) mengembalikan "nodelist" yang berisi referensi ke semua kecocokan pemilih
*Ada beberapa kueri lain yang lebih spesifik, yang menawarkan potensi manfaat kinerja (marjinal), tetapi kami tidak akan membahasnya sekarang
Penting untuk diperhatikan bahwa saat menggunakan querySelectorAll, nilai yang dikembalikan bukanlah larik. Ini terlihat seperti larik, dan agak bertindak seperti larik, tetapi ini benar-benar sebuah "nodelist". Perbedaan besar adalah bahwa beberapa metode array hilang dari nodelists. Salah satu solusinya, jika muncul masalah, adalah mengubah nodelist menjadi array. Anda dapat melakukan ini dengan Array. from() atau operator spread
Penciptaan Elemen
- dokumen. createElement(tagName, [opsi]) membuat elemen baru dari tagName jenis tag. const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 3 dalam hal ini berarti Anda dapat menambahkan beberapa parameter opsional ke fungsi. Jangan khawatir tentang ini pada saat ini
Fungsi ini TIDAK memasukkan elemen baru Anda ke dalam DOM - ini hanya membuatnya di memori. Ini agar Anda dapat memanipulasi elemen (dengan menambahkan gaya, kelas, id, teks, dll. ) sebelum meletakkannya di halaman. Anda dapat menempatkan elemen ke dalam DOM dengan salah satu metode berikut
Tambahkan Elemen
- parentNode. appendChild(childNode) menambahkan childNode sebagai anak terakhir dari parentNode
- parentNode. insertBefore(newNode, referenceNode) menyisipkan newNode ke parentNode sebelum referenceNode
Hapus Elemen
- parentNode. removeChild(child) menghapus anak dari parentNode di DOM dan mengembalikan referensi ke anak
Mengubah Elemen
Saat Anda memiliki referensi ke suatu elemen, Anda dapat menggunakan referensi tersebut untuk mengubah properti elemen itu sendiri. Ini memungkinkan Anda melakukan banyak perubahan yang berguna, seperti menambah/menghapus dan mengubah atribut, mengubah kelas, menambahkan informasi gaya sebaris, dan lainnya
Menambahkan Gaya Inline
div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rulesLihat Pencerahan DOM untuk info selengkapnya tentang gaya sebaris
Perhatikan bahwa jika Anda mengakses aturan CSS dengan huruf kebab dari JS, Anda harus menggunakan camelCase atau Anda harus menggunakan notasi braket alih-alih notasi titik
div.style.background-color // doesn't work - attempts to subtract color from div.style.background div.style.backgroundColor // accesses the div's background-color style div.style['background-color'] // also works div.style.cssText = "background-color: white;" // ok in a stringMengedit Atribut
div.setAttribute('id', 'theDiv'); // if id exists, update it to 'theDiv', else create an id // with value "theDiv" div.getAttribute('id'); // returns value of specified attribute, in this case // "theDiv" div.removeAttribute('id'); // removes specified attributeLihat bagian MDN tentang Atribut HTML untuk info lebih lanjut tentang atribut yang tersedia
Bekerja dengan Kelas
div.classList.add('new'); // adds class "new" to your new div div.classList.remove('new'); // removes "new" class from div div.classList.toggle('active'); // if div doesn't have class "active" then add it, or if // it does, then remove itSeringkali standar (dan lebih bersih) untuk mengganti gaya CSS daripada menambah dan menghapus CSS sebaris
Menambahkan Konten Teks
div.textContent = 'Hello World!' // creates a text node containing "Hello World!" and // inserts it in divMenambahkan Konten HTML
div.innerHTML = '<span>Hello World!</span>'; // renders the HTML inside div*Perhatikan bahwa textContent lebih disukai untuk menambahkan teks, dan innerHTML harus digunakan dengan hemat karena dapat menimbulkan risiko keamanan jika disalahgunakan. Lihat video ini jika Anda ingin melihat contoh caranya
Mari luangkan waktu sebentar untuk meninjau apa yang telah kita bahas dan memberi Anda kesempatan untuk mempraktikkan hal ini sebelum melanjutkan. Lihat contoh membuat dan menambahkan elemen DOM ini ke halaman web
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 0const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 1Di file JavaScript, pertama-tama kita mendapatkan referensi ke div const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 4 yang sudah ada di HTML kita. Kemudian kita membuat div baru dan menyimpannya dalam variabel const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 5. Kami menambahkan kelas dan beberapa teks ke const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 5 div dan akhirnya menambahkan div itu ke const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 4. Semua dalam semua itu adalah proses yang sederhana. Setelah kode JavaScript dijalankan, pohon DOM kita akan terlihat seperti ini
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display _2Ingatlah bahwa JavaScript tidak mengubah HTML Anda, tetapi DOM - file HTML Anda akan terlihat sama, tetapi JavaScript mengubah apa yang dirender oleh browser
JavaScript Anda, sebagian besar, dijalankan setiap kali file JS dijalankan, atau ketika tag skrip ditemukan di HTML. Jika Anda menyertakan JavaScript di bagian atas file, banyak dari metode manipulasi DOM ini tidak akan berfungsi karena kode JS dijalankan sebelum node dibuat di DOM. Cara termudah untuk memperbaikinya adalah dengan memasukkan JavaScript Anda di bagian bawah file HTML Anda sehingga dapat dijalankan setelah node DOM diuraikan dan dibuat
Atau, Anda dapat menautkan file JavaScript di const div = document.createElement('div'); // creates a new div referenced in the variable 'div' 8 dokumen HTML Anda. Gunakan tag const div = document.createElement('div'); // creates a new div referenced in the variable 'div' _9 dengan atribut div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules 0 yang berisi jalur ke file JS, dan sertakan kata kunci div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules 1 untuk memuat file setelah HTML diuraikan, seperti itu
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display _3Baca poin kedua untuk informasi lebih lanjut, yang juga menyertakan tautan ke strategi pemuatan skrip tambahan
Salin contoh di atas ke dalam file di komputer Anda sendiri. Untuk membuatnya berfungsi, Anda harus menyediakan kerangka HTML lainnya dan menautkan file JavaScript Anda, atau memasukkan JavaScript ke dalam tag skrip di laman. Pastikan semuanya berfungsi sebelum melanjutkan
Tambahkan elemen berikut ke wadah HANYA menggunakan JavaScript dan metode DOM yang ditampilkan di atas
- a div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules _2 dengan teks merah bertuliskan “Hei, saya merah. ”
- sebuah div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules _3 dengan teks biru bertuliskan “Saya h3 biru. ”
- a div.style.color = 'blue';
// adds the indicated style rule
div.style.cssText = 'color: blue; background: white;';
// adds several style rules
div.setAttribute('style', 'color: blue; background: white;');
// adds several style rules
_4 dengan batas hitam dan warna latar merah muda dengan elemen berikut di dalamnya
- div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules _5 lain yang mengatakan "Saya di div"
- a div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules _2 yang mengatakan “AKU TERLALU. ”
- Petunjuk untuk yang satu ini. setelah membuat div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules _4 dengan createElement, tambahkan div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules 5 dan div.style.color = 'blue'; // adds the indicated style rule div.style.cssText = 'color: blue; background: white;'; // adds several style rules div.setAttribute('style', 'color: blue; background: white;'); // adds several style rules 2 ke dalamnya sebelum menambahkannya ke wadah
Sekarang kita memiliki pegangan untuk memanipulasi DOM dengan JavaScript, langkah selanjutnya adalah belajar bagaimana mewujudkannya secara dinamis, atau sesuai permintaan. Acara adalah cara Anda membuat keajaiban itu terjadi di halaman Anda. Peristiwa adalah tindakan yang terjadi di laman web Anda seperti klik mouse atau penekanan tombol, dan dengan menggunakan JavaScript, kami dapat membuat laman web kami mendengarkan dan bereaksi terhadap peristiwa ini
Ada tiga cara utama untuk melakukannya. Anda dapat melampirkan atribut fungsi langsung pada elemen HTML Anda, Anda dapat menyetel properti "on_event_" pada objek DOM di JavaScript Anda, atau Anda dapat melampirkan pendengar acara ke node di JavaScript Anda. Pendengar acara jelas merupakan metode yang disukai, tetapi Anda akan sering melihat yang lain digunakan, jadi kami akan membahas ketiganya
Kami akan membuat 3 tombol yang semuanya mengingatkan "Halo Dunia" saat diklik. Cobalah semuanya menggunakan file HTML Anda sendiri, atau gunakan sesuatu seperti CodePen
Metode 1
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display _4Solusi ini kurang ideal karena kami mengacaukan HTML kami dengan JavaScript. Selain itu, kami hanya dapat memiliki 1 acara " title" per elemen
Metode 2
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 5const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 6(Perlu meninjau fungsi panah?)
Ini sedikit lebih baik. Kami telah memindahkan JS dari HTML ke file JS, tetapi kami masih memiliki masalah bahwa elemen DOM hanya dapat memiliki 1 properti " title"
Metode 3
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 7const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display 8Sekarang, kami mempertahankan pemisahan masalah, dan kami juga mengizinkan beberapa pendengar acara jika diperlukan. Metode 3 jauh lebih fleksibel dan kuat, meskipun sedikit lebih rumit untuk disiapkan
Perhatikan bahwa ketiga metode ini dapat digunakan dengan fungsi bernama seperti itu
const container = document.querySelector('#container'); // selects the #container div (don't worry about the syntax, we'll get there) console.dir(container.firstElementChild); // selects the first child of #container => .display const controls = document.querySelector('.controls'); // selects the .controls div console.dir(controls.previousElementSibling); // selects the prior sibling => .display _9const div = document.createElement('div'); 0Menggunakan fungsi bernama dapat sangat membersihkan kode Anda, dan merupakan ide yang sangat bagus jika fungsi tersebut adalah sesuatu yang ingin Anda lakukan di banyak tempat
Dengan ketiga metode tersebut, kita dapat mengakses lebih banyak informasi tentang peristiwa tersebut dengan meneruskan parameter ke fungsi yang kita panggil. Coba ini di mesin Anda sendiri
const div = document.createElement('div'); _1*Perhatikan bahwa div.style.background-color // doesn't work - attempts to subtract color from div.style.background div.style.backgroundColor // accesses the div's background-color style div.style['background-color'] // also works div.style.cssText = "background-color: white;" // ok in a string _0 adalah panggilan balik dari addEventListener. Penjelasan lebih lanjut tentang panggilan balik dapat ditemukan DI SINI
div.style.background-color // doesn't work - attempts to subtract color from div.style.background div.style.backgroundColor // accesses the div's background-color style div.style['background-color'] // also works div.style.cssText = "background-color: white;" // ok in a string _1 dalam fungsi itu adalah objek yang mereferensikan peristiwa itu sendiri. Di dalam objek itu Anda memiliki akses ke banyak properti dan fungsi yang berguna seperti tombol atau tombol mouse mana yang ditekan, atau informasi tentang target acara - simpul DOM yang diklik
Coba ini
const div = document.createElement('div'); _2dan sekarang ini
const div = document.createElement('div'); _3Cukup keren, ya?
Melampirkan Pendengar ke Grup Node
Ini mungkin tampak seperti banyak kode jika Anda melampirkan banyak pendengar acara serupa ke banyak elemen. Ada beberapa cara untuk melakukannya dengan lebih efisien. Kami belajar di atas bahwa kami bisa mendapatkan nodelist dari semua item yang cocok dengan pemilih tertentu dengan div.style.background-color // doesn't work - attempts to subtract color from div.style.background div.style.backgroundColor // accesses the div's background-color style div.style['background-color'] // also works div.style.cssText = "background-color: white;" // ok in a string 2. Untuk menambahkan pendengar ke masing-masing, kita hanya perlu mengulangi seluruh daftar seperti itu
const div = document.createElement('div'); _4const div = document.createElement('div'); 5Ini hanyalah puncak gunung es dalam hal manipulasi DOM dan penanganan event, tetapi ini cukup untuk membantu Anda memulai dengan beberapa latihan. Dalam contoh kami sejauh ini kami telah menggunakan acara 'klik' secara eksklusif, tetapi masih banyak lagi yang tersedia untuk Anda
Beberapa acara bermanfaat termasuk
- klik
- dblclick
- keydown
- keyup
Anda dapat menemukan daftar yang lebih lengkap dengan penjelasan setiap acara di halaman ini
Memanipulasi halaman web adalah manfaat utama dari bahasa JavaScript. Teknik-teknik ini adalah hal-hal yang kemungkinan besar akan Anda mainkan setiap hari sebagai pengembang front-end, jadi mari berlatih
- Raih latihan pertama dalam program JavaScript30 Wes Bos dengan mengkloning repo di https. //github. com/webbos/JavaScript30. Kode bersama dengan Video Tutorial untuk membangun sisa latihan
- Tonton video Event Capture, Propagasi, dan Bubbling dari program JavaScript30 milik Wes Bos. Jika Anda ingin kode bersama dengan video, Anda dapat menggunakan isi folder #25 dari repo yang Anda kloning di atas
Bagian ini berisi pertanyaan bagi Anda untuk memeriksa sendiri pemahaman Anda tentang pelajaran ini. Jika Anda kesulitan menjawab pertanyaan, klik dan tinjau materi yang ditautkan
- Saat menambahkan teks ke elemen DOM, haruskah Anda menggunakan textContent atau innerHTML?
- Jelaskan perbedaan antara "tangkap" dan "gelembung"
Bagian ini berisi tautan bermanfaat ke konten terkait. Itu tidak wajib, jadi anggap itu tambahan