Memanipulasi DOM di WordPress menggunakan JQuery

Berkat platform sumber terbuka WordPress dan komunitas pengembang yang bersemangat, membuat tema untuk platform ini memiliki daya tarik yang cukup luas. Menavigasi semua elemen dan konten yang diperlukan untuk membangun situs WordPress bisa jadi menantang, tergantung pada pengetahuan dan pengalaman pemrograman Anda.

Untungnya, Model Objek Dokumen (DOM) dapat mempermudah manipulasi atau perjalanan melalui kode HTML situs. DOM bekerja dengan memungkinkan Anda membuat pohon yang terdiri dari berbagai node atau objek. Ini membuka peluang untuk mengubah tampilan, struktur, atau fungsi situs, menggunakan pustaka JavaScript seperti jQuery.

Dalam artikel ini, kami akan menjelaskan apa itu DOM dan mengapa Anda mungkin ingin menggunakannya. Kami kemudian akan memberikan beberapa teknik manipulasi jQuery standar untuk menggunakan DOM dengan WordPress. Mari selami!

Apa itu DOM?

Sederhananya, DOM adalah Application Programming Interface (API) untuk HTML. Itu menciptakan pohon objek yang mewakili konten dan struktur halaman web. Ini juga merupakan platform dan skrip bahasa-agnostik, yang membuatnya cukup serbaguna. Ketika DOM merepresentasikan kode sumber HTML dengan cara ini, DOM membuatnya dapat diakses sehingga berbagai bahasa pemrograman dapat terhubung dengannya.

Mengapa Menggunakan DOM?

Sebagai pengguna WordPress, Anda mungkin melihat DOM beraksi setiap kali Anda menemukan interaktivitas dinamis. Ini mungkin termasuk saat kesalahan dikembalikan jika formulir dikirimkan dengan informasi yang hilang. Penggeser konten adalah contoh lain dari DOM yang digunakan:

Pengembang dapat menggunakan DOM untuk memperbarui dan mengubah hampir semua elemen di halaman web. Anda dapat menggunakannya untuk membuat dokumen dan menavigasi strukturnya. DOM juga dapat digunakan untuk menambah, memodifikasi, atau menghapus elemen dan objek.

Manipulasi DOM Dengan JQuery

Untuk lebih jelasnya, DOM dan HTML tidak sama, meskipun harus mengandung elemen yang sama. DOM adalah representasi model kode sumber HTML, dan dapat diubah oleh JavaScript sisi klien.

Di bawah ini, kita akan melihat metode di library jQuery untuk menguji beberapa teknik manipulasi DOM. Perlu diingat bahwa browser yang berbeda menangani DOM dengan caranya sendiri, tetapi Anda tidak perlu melakukan sesuatu yang khusus untuk mulai menggunakannya. Semua browser menggunakan beberapa bentuk DOM untuk membuat halaman dapat diakses oleh JavaScript.

Teknik Manipulasi DOM

DOM dapat digunakan dalam berbagai cara. Untuk mengilustrasikan fleksibilitasnya, mari kita lihat enam teknik yang dapat membantu Anda memulai dengan API yang bermanfaat ini.

1. Metode Sebelum()

Sesuai dengan namanya, metode before() digunakan saat Anda ingin menyisipkan elemen apa pun sebelum elemen target lainnya, seperti yang ditunjukkan dalam kode.

Dalam contoh ini, metode dapat digunakan untuk menambahkan elemen persegi dengan teks di atas elemen yang ditunjuk, seperti tombol, setelah diklik:

 $(this).before( "<div class='square'>Kotak lain</div>" );

Penempatan halaman dan tata letak adalah pertimbangan yang perlu diingat saat menggunakan metode ini. Anda pasti ingin memastikan elemen baru Anda tidak akan merusak tata letak Anda atau menyebabkan masalah secara visual.

2. Metode After()

Dengan cara yang sama seperti metode before() memungkinkan Anda menyisipkan elemen sebelum elemen lain yang ditunjukkan, metode after() memungkinkan sebaliknya. Misalnya, dapat digunakan untuk menambahkan elemen tepat di bawah tombol, setelah tombol dipilih:

 $(this).after( "<div class='square'>Kotak lain</div>" );

Menambahkan konten interaktif dengan memanipulasi DOM dengan jQuery seperti ini adalah cara yang solid untuk mendapatkan interaktivitas, tanpa kehilangan kecepatan dalam prosesnya.

3. Metode Tambahkan()

Alih-alih memunculkan elemen baru satu per satu, Anda mungkin ingin menambahkan elemen baru ke elemen yang sudah ada. Misalnya, mungkin Anda ingin menambahkan teks “Selamat Ulang Tahun!” dalam area berwarna setiap kali tombol tertentu diklik.

Untuk menambahkan elemen baru Anda ke konten elemen target yang sudah ada, Anda akan memasukkan perintah append() jQuery di dalam kode sumber HTML:

 $( ".box" ).append( "<p>Selamat Ulang Tahun!</p>" );

Metode ini menambahkan manipulasi ke akhir elemen yang Anda tunjukkan dalam string, bukan meletakkannya sebelum atau sesudah. Dalam konteks dokumen HTML lengkap, Anda dapat melihat bagaimana manipulasi terjadi:

 <!doctype html>
 <title>Contoh</title>
 <gaya>
 .kotak {
 latar belakang: oranye;
 warna putih;
 warna putih;
 lebar: 150px;
 padding: 20px;
 margin: 10px;
 }
 </ gaya>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <skrip>
 $( fungsi() {
 $( "tombol" ).klik( function() {
 $(ini).setelah( "<div class='box'>Selamat Ulang Tahun!</div>" );
 });
 });
 </skrip>
 <button>Buat kotak</button>

Teknik ini memberi Anda opsi sederhana untuk membuat interaktivitas dalam ruang terbatas. Ingatlah, dengan metode khusus ini, manipulasi akan muncul sebagai perpanjangan dari elemen yang Anda tunjukkan, bukan sebagai elemen individual baru.

4. Metode Prepend()

Sebagai penyeimbang untuk metode append() , prepend() akan menambahkan elemen di akhir elemen target apa pun yang Anda tunjukkan dalam perintah jQuery:

 $( ".banner" ).prepend( "<p>Selamat Ulang Tahun!</p>" );

Dalam contoh ini, teks “Selamat Ulang Tahun!” akan muncul di awal spanduk yang ditunjukkan dalam string kode.

Perlu dicatat bahwa metode ini (termasuk before() , after() , dan append() ) semuanya merupakan pendekatan yang dapat diterima untuk penggunaan sederhana. Namun, kami merekomendasikan teknik lain untuk penyisipan yang lebih kompleks.

5. Metode Klon ().

Selanjutnya, metode clone() adalah opsi yang cukup ampuh dalam hal memanipulasi DOM dengan jQuery. Sementara empat teknik sebelumnya memungkinkan Anda untuk memasukkan elemen dan memindahkannya, clone() memungkinkan untuk menyalin elemen, menghapusnya dari tempat asalnya, dan memasukkan kembali atau menambahkannya di tempat lain.

Misalnya, baris ini berarti bahwa elemen kotak asli akan tetap berada di tempatnya, sedangkan tiruannya akan ditambahkan ke elemen segitiga:

 $( ".box" ).clone().appendTo( ".triangle" );

Kelemahan dari metode ini adalah dapat menyebabkan duplikasi atribut id elemen. Atribut ini dimaksudkan untuk menjadi unik. Anda dapat menghindari masalah ini dengan menggunakan atribut kelas sebagai pengidentifikasi, dan menggunakan metode klon dengan hemat.

6. Metode Bungkus()

Terakhir, metode wrap() berguna jika Anda ingin membungkus elemen di sekitar string yang sudah ada. Misalnya, Anda dapat membungkus beberapa paragraf dalam struktur HTML baru dengan mengidentifikasi kelas dan menunjukkan struktur apa yang diterapkan:

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

Dengan teknik ini, Anda membuat <div> di sekitar elemen apa pun yang cocok dengan kelas target dalam string wrap() . Meskipun Anda dapat membuat pembungkus dengan kedalaman beberapa tingkat, namun, Anda harus memastikan hanya ada satu elemen terdalam.

Memecahkan masalah DOM

Saat bekerja dengan DOM, kami ingin menyoroti satu aspek utama yang ingin Anda perhatikan. Agar halaman Anda dimuat dengan cepat dan menghindari kode yang tidak perlu (terutama jika Anda sedang mengembangkan tema), Anda harus berhati-hati untuk tidak menggunakan elemen apa pun yang bukan bagian dari pohon DOM.

Jika Anda tidak yakin apakah suatu elemen merupakan bagian dari DOM atau bukan, Anda dapat memeriksa setiap elemen melalui browser di bagian depan situs Anda. Anda dapat memeriksa elemen di halaman, dan menentukan di mana mereka disertakan dalam pohon DOM.

Ini sangat membantu ketika skrip lain telah mengubah HTML asli situs Anda. Jika tidak, HTML dan DOM Anda terkadang tampak persis sama.

Jelajahi Sumber Daya dan Alat Mesin WP Lainnya

Jika Anda menganggap DOM sebagai bagian organik dari situs Anda, sumber hidup yang merespons kode sumber HTML, kekuatan aksesibilitasnya cukup mencengangkan. Itulah mengapa memahami DOM dan bagaimana DOM dapat digunakan untuk menyempurnakan proyek Anda dapat membantu membawa situs Anda ke level berikutnya.

Memanipulasi DOM dengan jQuery menyoroti keindahan platform sumber terbuka WordPress. Di sini, di WP Engine, kami memahami bagaimana sumber daya pengembang berkualitas tinggi dapat membuat perbedaan. Itu sebabnya kami menawarkan banyak bantuan untuk pengguna WordPres, bersama dengan paket hosting terbaik!