15 Metode JavaScript Untuk Manipulasi DOM untuk Pengembang Web

var ele = document.querySelector (selector);

dipilih dengan querySelector () metode dan warnanya diubah menjadi merah.

 
paragraf satu
 
paragraf dua
 
satu div
 
paragraf tiga
 
div dua
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; 

Demo Interaktif

Uji querySelector () metode dalam demo interaktif berikut. Ketikkan pemilih yang cocok dengan yang dapat Anda temukan di dalam kotak biru (mis. #tiga), dan klik tombol Pilih. Perhatikan bahwa jika Anda mengetik .blok, hanya contoh pertama akan dipilih.

2. querySelectorAll ()

Tidak seperti itu querySelector () yang mengembalikan hanya instance pertama dari semua elemen yang cocok, querySelectorAll () mengembalikan semua elemen yang cocok dengan pemilih CSS yang ditentukan.

Elemen yang cocok dikembalikan sebagai a NodeList objek yang akan menjadi objek kosong jika tidak ditemukan elemen yang cocok.

Sintaksis

var eles = document.querySelectorAll (selector);

• Eles - SEBUAH NodeList objek dengan semua elemen yang cocok sebagai nilai properti. Objek kosong jika tidak ada kecocokan yang ditemukan.
• pemilih - satu atau lebih penyeleksi CSS, seperti "#fooId", ".fooClassName", ".class1.class2", atau ".class1, .class2"

Contoh Kode

Contoh di bawah ini menggunakan HTML yang sama dengan yang sebelumnya. Namun, dalam contoh ini, semua paragraf dipilih dengan querySelectorAll (), dan berwarna biru.

 
paragraf satu
 
paragraf dua
 
satu div
 
paragraf tiga
 
div dua
 

 paragraf var = document.querySelectorAll ('p'); untuk (var p paragraf) p.style.color = 'biru'; 

3. addEventListener ()

Acara lihat apa yang terjadi pada elemen HTML, seperti mengklik, fokus, atau memuat, yang dapat kami bereaksi dengan JavaScript. Kami dapat menetapkan fungsi JS ke mendengarkan untuk acara ini dalam elemen dan melakukan sesuatu ketika acara itu terjadi.

Ada tiga cara yang bisa Anda lakukan menetapkan fungsi ke acara tertentu.

Jika foo () adalah fungsi khusus, Anda dapat mendaftarkannya sebagai pendengar acara klik (panggil ketika elemen tombol diklik) dengan tiga cara:

1.  Waspada

2.  var btn = document.querySelector ('button'); btn.onclick = foo;

3.  var btn = document.querySelector ('button'); btn.addEventListener ('click', foo);

Metode addEventListener () (solusi ketiga) memiliki beberapa pro; itu adalah standar terbaru - memungkinkan penugasan lebih dari satu fungsi sebagai pendengar acara untuk satu acara - dan dilengkapi dengan serangkaian opsi yang bermanfaat.

Sintaksis

ele.addEventListener (evt, listener, [options]);

• ele - Elemen HTML yang akan didengar pendengar acara.
• evt - Acara yang ditargetkan.
• pendengar - Biasanya, fungsi JavaScript.
• pilihan - (opsional) Objek dengan sekumpulan properti boolean (tercantum di bawah).

Pilihan	Apa yang terjadi, ketika diatur ke benar?
menangkap	Menghentikan peristiwa yang menggelegak, yaitu mencegah panggilan dari setiap pendengar acara untuk jenis acara yang sama di leluhur elemen. Untuk menggunakan fitur ini, Anda dapat menggunakan 2 sintaks: ele.addEventListener (evt, listener, true) ele.addEventListener (evt, listener, capture: true);
sekali	Pendengar disebut hanya saat pertama kali peristiwa itu terjadi, maka ia akan terlepas secara otomatis dari acara tersebut, dan tidak akan dipicu olehnya lagi.
pasif	Tindakan default acara tidak dapat dihentikan dengan metode preventDefault ().

Contoh Kode

Dalam contoh ini, kami menambahkan pendengar acara klik bernama foo, ke Tag HTML.

Klik saya

 var btn = document.querySelector ('button'); btn.addEventListener ('click', foo); function foo () alert ('hello'); 

Demo Interaktif

Tetapkan foo () fungsi kustom sebagai pendengar acara ke salah satu dari tiga acara berikut: memasukkan, klik atau mouseover & picu acara yang dipilih di bidang input bawah dengan mengarahkan, mengklik, atau mengetiknya.

4. removeEventListener ()

Itu removeEventListener () metode melepaskan pendengar acara sebelumnya ditambahkan dengan addEventListener () metode dari acara itu sedang mendengarkan.

Sintaksis

ele.removeEventListener (evt, listener, [options]);

Menggunakan sintaksis yang sama dengan yang disebutkan di atas addEventListener () metode (kecuali untuk sekali opsi yang dikecualikan). Opsi ini digunakan untuk sangat spesifik dalam mengidentifikasi pendengar yang akan dilepaskan.

Contoh Kode

Mengikuti Contoh Kode yang kami gunakan di addEventListener (), di sini kita menghapus klik event listener yang disebut foo dari elemen.

 btn.removeEventListener ('klik', foo);

5. createElement ()

Itu createElement () metode menciptakan elemen HTML baru menggunakan nama tag HTML dibuat, seperti 'p' atau 'div'.

Anda nanti dapat menambahkan elemen ini ke halaman web dengan menggunakan yang berbeda metode untuk penyisipan DOM, seperti AppendChild () (lihat nanti di posting ini).

Sintaksis

document.createElement (tagName);

• tagName - Nama tag HTML yang ingin Anda buat.

Contoh Kode

Dengan contoh berikut, Anda bisa membuat elemen paragraf baru:

var pEle = document.createElement ('p')

6. appendChild ()

Itu appendChild () metode menambahkan elemen sebagai anak terakhir ke elemen HTML yang memanggil metode ini.

Anak yang akan dimasukkan dapat berupa a elemen yang baru dibuat, atau sebuah sudah ada. Dalam kasus terakhir, ia akan dipindahkan dari posisi sebelumnya ke posisi anak terakhir.

Sintaksis

ele.appendChild (childEle)

• ele - Elemen HTML yang digunakan childEle ditambahkan sebagai anak terakhir.
• childEle - Elemen HTML ditambahkan sebagai anak terakhir dari ele.

Contoh Kode

Dalam contoh ini, kami menyisipkan elemen adalah sebagai anak dari a

elemen menggunakan appendChild () dan yang disebutkan di atas createElement () metode.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Halo'; div.appendChild (kuat);

Demo Interaktif

Dalam demo interaktif berikut, surat-surat dari #Sebuah untuk #r adalah elemen anak dari # parent-one, # parent-two, dan # parent-three pemilih id.

Lihat bagaimana caranya appendChild () metode bekerja oleh mengetikkan satu nama pemilih orang tua dan satu anak ke dalam kolom input di bawah ini. Anda dapat memilih anak-anak yang termasuk orang tua lain.

7. removeChild ()

Itu removeChild () metode menghapus elemen anak tertentu dari elemen HTML yang memanggil metode ini.

Sintaksis

ele.removeChild (childEle)

• ele - Elemen induk dari childEle.
• childEle - Elemen anak dari ele.

Contoh Kode

Dalam contoh ini, kami menghapus elemen yang kami tambahkan sebagai anak ke

tag di Contoh Kode untuk sebelumnya appendChild () metode.

div.removeChild (kuat);

8. gantiChild ()

Itu gantiChild () metode mengganti elemen anak dengan yang lain milik elemen induk yang memanggil metode ini.

Sintaksis

ele.replaceChild (newChildEle, oldChileEle)

• ele - Elemen induk yang anak-anak harus diganti.
• newChildEle - Elemen anak dari ele itu akan menggantikan oldChildEle.
• oldChildEle - Elemen anak dari ele, yang akan diganti oleh newChildEle.

Contoh Kode

Dalam contoh ini elemen anak milik

elemen induk diganti dengan yang baru dibuat menandai.

 
 Halo 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, strong);

9. cloneNode ()

Ketika Anda harus membuat elemen baru yang perlu menjadi sama dengan elemen yang sudah ada di halaman web, Anda bisa buat salinan elemen yang sudah ada menggunakan cloneNode () metode.

Sintaksis

var dupeEle = ele.cloneNode ([mendalam])

• dupeEle - Salinan ele elemen.
• ele - Elemen HTML yang akan disalin.
• dalam - (opsional) Nilai boolean. Jika diatur ke benar, dupeEle akan memiliki semua elemen anak ele telah, jika diatur ke Salah itu akan dikloning tanpa anak-anaknya.

Contoh Kode

Dalam contoh ini, kami membuat salinan untuk elemen dengan cloneNode (), lalu kita tambahkan ke

tag sebagai elemen anak dengan yang disebutkan di atas appendChild () metode.

Hasil dari,

akan berisi dua elemen, keduanya dengan Halo string sebagai konten.

 
 Halo 

 var strong = document.querySelector ('strong'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (copy); 

10. insertBefore ()

Itu insertBefore () metode menambahkan elemen anak tertentu sebelum elemen anak lain. Metode ini dipanggil oleh elemen induk.

Jika elemen anak yang dirujuk tidak ada atau Anda lulus secara eksplisit batal sebagai gantinya, elemen anak yang akan dimasukkan ditambahkan sebagai anak terakhir dari orang tua (mirip dengan appendChild ()).

Sintaksis

ele.insertBefore (newEle, refEle);

• ele - Elemen induk.
• baruEle - Elemen HTML baru yang akan dimasukkan.
• refEle - Elemen anak dari ele sebelum itu baruEle akan dimasukkan.

Contoh Kode

Dalam contoh ini, kami membuat yang baru elemen dengan beberapa teks di dalamnya, dan tambahkan sebelum itu elemen di dalam

elemen induk.

 
 Halo 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, strong); 

Demo Interaktif

Demo interaktif ini bekerja mirip dengan demo kami sebelumnya milik appendChild () metode. Di sini Anda hanya perlu mengetikkan pemilih id dari dua elemen anak (dari #Sebuah untuk #r) ke dalam kotak input, dan Anda dapat melihat caranya insertBefore () Metode memindahkan anak yang ditentukan pertama sebelum kedua.

11. createDocumentFragment ()

Itu createDocumentFragment () Metode mungkin tidak seterkenal yang lain dalam daftar ini, namun merupakan metode yang penting, terutama jika Anda menginginkannya masukkan beberapa elemen secara massal, seperti menambahkan beberapa baris ke tabel.

Saya t menciptakan a DocumentFragment obyek, yang pada dasarnya adalah simpul DOM yang bukan bagian dari pohon DOM. Ini seperti buffer tempat kami dapat menambahkan dan menyimpan elemen lain (mis. Beberapa baris) terlebih dahulu, sebelum menambahkannya ke simpul yang diinginkan di pohon DOM (mis. Ke tabel).

Mengapa kita tidak langsung menambahkan elemen ke pohon DOM? Karena penyisipan DOM menyebabkan perubahan tata letak, dan ini adalah proses browser yang mahal karena beberapa penyisipan elemen konsekuensi akan menyebabkan lebih banyak perubahan tata letak.

Di sisi lain, menambahkan elemen ke a DocumentFragment obyek tidak menyebabkan perubahan tata letak, jadi Anda bisa menambahkan elemen sebanyak yang Anda inginkan sebelum melewati mereka ke pohon DOM, menyebabkan perubahan tata letak hanya pada titik ini.

Sintaksis

document.createDocumentFragment ()

Contoh Kode

Dalam contoh ini, kami membuat beberapa baris dan sel tabel dengan createElement () metode, lalu tambahkan ke a DocumentFragment objek, akhirnya menambahkan fragmen dokumen ke HTML

menggunakan appendChild () metode.

Akibatnya, lima baris - masing-masing berisi satu sel dengan angka dari 1 hingga 5 sebagai konten - akan dimasukkan ke dalam tabel.

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); untuk (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Terkadang kamu mau periksa nilai properti CSS elemen sebelum melakukan perubahan. Anda dapat menggunakan gaya properti untuk melakukan hal yang sama, namun getComputedStyle () Metode telah dibuat hanya untuk tujuan ini, itu mengembalikan nilai yang dihitung hanya baca semua properti CSS dari elemen HTML yang ditentukan.

Sintaksis

var style = getComputedStyle (ele, [pseudoEle])

• gaya - SEBUAH CSSStyleDeclaration objek yang dikembalikan oleh metode. Ini memegang semua properti CSS dan nilai-nilai mereka dari ele elemen.
• ele - Elemen HTML yang nilai properti CSS diambil.
• pseudoEle - (opsional) Suatu string yang mewakili elemen pseudo (misalnya, ':setelah'). Jika ini disebutkan, maka properti CSS dari pseudo-elemen yang ditentukan terkait dengan ele akan dikembalikan.

Contoh Kode

Dalam contoh ini, kami mendapatkan dan mengingatkan penghitungan lebar nilai a

elemen dengan menggunakan getComputedStyle () metode.

 var style = getComputedStyle (document.querySelector ('div')); waspada (style.width); 

13. setAttribute ()

Itu setAttribute () metode baik menambahkan atribut baru ke elemen HTML, atau memperbarui nilai atribut yang sudah ada.

Sintaksis

ele.setAttribute (nama, nilai);

• ele - Elemen HTML yang ditambahkan atribut, atau atribut yang diperbarui.
• nama - Nama atribut.
• nilai - Nilai atribut.

Contoh Kode

Dalam contoh ini, kami menambahkan dapat diedit atribut ke a

dengan memanfaatkan setAttribute () metode, yang akan mengubah kontennya dapat diedit.

Halo

 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', ") 

14. getAttribute ()

Itu getAttribute () metode mengembalikan nilai atribut yang ditentukan milik elemen HTML tertentu.

Sintaksis

ele.getAttribute (nama);

• ele - Elemen HTML dari atribut yang diminta.
• nama - Nama atribut.

Contoh Kode

Dalam contoh ini, kami memberitahukan nilai dapat diedit atribut milik

elemen dengan bantuan getAttribute () metode.

Halo

 var div = document.querySelector ('div'); lansiran (div.getAttribute ('contenteditable')) 

15. removeAttribute ()

Itu removeAttribute () metode menghapus atribut yang diberikan dari elemen HTML tertentu.

Sintaksis

ele.removeAttribute (nama);

• ele - Elemen HTML yang atributnya akan dihapus.
• nama - Nama atribut.

Contoh Kode

Dalam contoh ini, kami menghapus dapat diedit atribut dari

elemen. Akibatnya,

tidak akan dapat diedit lagi.

Halo

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

15 Pelajaran “Seni Perang” Mengajari Anda Tentang Memenangkan Pertarungan Kehidupan

15 Perpustakaan Lightbox Untuk Responsif Seluler

15 Ide untuk Membeli atau Membangun Meja Berdiri Sempurna Anda

Artikel selanjutnya

15 jQuery Plugins Untuk Membuat Elemen Sticky Cerdas

Artikel sebelumnya

15 Video Presentasi Startup yang Menginspirasi untuk Pengusaha