Struktur tempat kita akan bekerja pada sisi klien adalah pohon DOM dari dokumen HTML, struktur ini adalah struktur hierarki di mana setiap elemen yang kita lihat di web diwakili oleh label masing-masing.
Pentingnya mengetahui struktur ini adalah bahwa hal itu akan memungkinkan kita untuk menemukan elemen yang berbeda, dengan ini kita dapat mengambil nilai yang mengandung atau menyertakan teks, konten dari halaman lain, kita dapat memproses pengontrol aplikasi kita dan menghasilkan tampilan dalam halaman tanpa harus mengisi ulang, dll.
Referensi Item
Seperti yang telah kami sebutkan sebelumnya, HTML memiliki struktur yang berisi elemen-elemennya, untuk memanipulasi elemen-elemen ini kita harus belajar membuat referensi, dengan referensi kita dapat memastikan bahwa kita akan mengambil elemen atau elemen yang diinginkan dan dapat memodifikasinya.
Cara paling efektif
Salah satu cara paling populer dan efektif adalah dengan pemilih id, karena kita tahu bahwa tag dapat memiliki pengidentifikasi unik untuk membedakan elemen-elemen dari HTML .
Mari kita lihat pada gambar berikut kode di mana kita dapat mengambil berkat Javascript elemen menggunakan properti id-nya:
Dalam kode yang kami lihat, kami memiliki tag div HTML, ini memiliki id, properti ini adalah yang kami sebutkan yang akan membantu kami menemukan dan memilih elemen dalam DOM, dalam blok Javascript berkat objek dokumen, kami dapat menggunakan salah satu dari metodenya untuk mendapatkan elemen dengan id dan dalam hal ini kita menempatkan yang sama dari div dan akhirnya dengan metode innerText, kita menetapkan teks baru.
Seperti yang kita lihat ini membuat halaman telah diperkaya, meskipun contoh yang cukup sederhana adalah hal yang paling mendasar yang harus kita ketahui untuk dapat membangun fondasi yang kuat.
Memperbaiki dengan jQuery
Seperti yang kita ketahui, Javascript terkadang dapat menyebabkan Anda harus menulis banyak kode untuk melakukan beberapa hal, pada titik ini jQuery memasukkan pengemasan fungsi-fungsi dan kode-kode ini, memungkinkan kami untuk menyelesaikan fungsi yang sama dengan pintasan dan lebih sedikit kode, itu masih Javascript tetapi ditulis dengan cara yang lebih sederhana .
Dalam contoh berikut kita akan melihat bagaimana kita menulis ulang contoh sebelumnya menggunakan jQuery:
Seperti yang dapat kita lihat, kita telah merangkum jumlah pemanggilan metode hanya menggunakan metode .text () yang diterapkan pada pemilih $ (), tergantung pada bagaimana kita memanggil elemen kita. JQuery memungkinkan kita untuk mengakses id, kelas, termasuk menurut jenis elemen, anak-anak dari sama, dll.
Sebagai contoh jika kita ingin melakukan contoh yang sama di atas tetapi untuk kasus ini label
alih-alih memiliki id, ia memiliki kelas:
Halo dunia!
$ (". myDiv"). teks ("Halo ASP.NET!");
Di sini kita melihat bahwa alih-alih memanggil pemilih dengan $ ("# selector"), kita melakukannya dengan $ (". Selector"), masalahnya adalah jika kita memiliki lebih dari satu elemen dengan kelas yang sama, kita akan mempengaruhinya.
Dengan ini kita menyimpulkan tutorial ini di mana kita telah menggali sedikit lebih dalam ke dalam konsep penyeleksi dan bagaimana menggunakannya dengan Javascript dan jQuery normal sehingga mengurangi jumlah kode yang kita tulis.
- 0
Pasal