Apa manfaat utama menggunakan createelement dibandingkan innerhtml?

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');

const div = document.createElement('div');

const div = document.createElement('div');

const div = document.createElement('div');

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');

• 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'

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

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

const div = document.createElement('div');

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

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

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 rules

Lihat 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 string

Mengedit 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 attribute

Lihat 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 it

Seringkali 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 div

Menambahkan 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

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

Di file JavaScript, pertama-tama kita mendapatkan referensi ke div

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

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

Ingatlah 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'

const div = document.createElement('div');                     
// creates a new div referenced in the variable 'div'

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

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

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

Baca 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

1. 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. ”
2. 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. ”
3. 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

   1. 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"
   2. 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. ”
   3. 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

Solusi ini kurang ideal karena kami mengacaukan HTML kami dengan JavaScript. Selain itu, kami hanya dapat memiliki 1 acara "onclick" 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

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

(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 "onclick"

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

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

Sekarang, 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

const div = document.createElement('div');

Menggunakan 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');

*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

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

Coba ini

const div = document.createElement('div');

dan sekarang ini

const div = document.createElement('div');

Cukup 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

const div = document.createElement('div');

const div = document.createElement('div');

Ini 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

1. 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
2. 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

Mengapa menggunakan createElement alih-alih innerHTML?

Mengapa menggunakan createElement di JavaScript?

Apa kerugian utama menggunakan innerHTML dalam JavaScript?

Apa yang lebih baik dari innerHTML?