Metode getAttribute ()
Sejauh ini, kami telah memperkenalkan dua cara untuk mengambil node elemen spesifik: satu adalah menggunakan metode getElementById (), dan yang lainnya adalah menggunakan metode GetElementsByTagname (). Setelah menemukan elemen itu, kita dapat menggunakan metode getAttribute () untuk menanyakan nilai dari berbagai atributnya.
Metode getAttribute () adalah fungsi. Ini hanya memiliki satu parameter - nama atribut yang Anda rencanakan untuk diminta:
objek.getAttribute (atribut)
Namun, metode getAttribute () tidak dapat dipanggil melalui objek dokumen, yang berbeda dari metode lain yang telah kami perkenalkan sebelumnya. Kita hanya bisa menyebutnya melalui satu objek node elemen.
Misalnya, Anda dapat menggabungkannya dengan metode GetElementsByTagname () untuk menanyakan atribut judul masing -masing elemen <p> seperti yang ditunjukkan di bawah ini:
var text = document.geteLementsbyTagname ("p") untuk (var i = 0; i <text.length; i ++) {alert (teks [i] .getAttribute ("title"));}Jika Anda memasukkan kode di atas di akhir dokumen sampel "Daftar Belanja" yang diberikan sebelumnya dan muat ulang halaman di browser web, kotak dialog Alter dengan pesan teks "Pengingat lembut" akan muncul di layar.
Hanya ada satu elemen <p> dengan atribut judul dalam dokumen daftar belanja. Jika dokumen memiliki satu atau lebih elemen <p> tanpa atribut judul, panggilan GetAttribute ("title") yang sesuai akan mengembalikan nol. Null adalah nilai nol dalam bahasa JavaScript, dan artinya adalah "hal yang Anda katakan tidak ada." Jika Anda ingin memverifikasi ini secara pribadi, silakan masukkan teks berikut ke dalam paragraf teks yang ada di dokumen daftar belanja:
<p> Ini hanya tes </p>
Kemudian muat ulang halaman. Kali ini, Anda akan melihat dua dialog Alter, dan dialog kedua akan kosong atau hanya menampilkan kata "null" - situasi spesifik tergantung pada bagaimana browser web Anda akan menampilkan nilai nol.
Kami dapat memodifikasi skrip kami sehingga akan memunculkan pesan hanya ketika properti judul ada. Kami akan menambahkan pernyataan IF untuk memeriksa apakah nilai pengembalian metode getAttribute () adalah nol. Mengambil keuntungan dari peluang ini, kami juga menambahkan beberapa variabel untuk meningkatkan keterbacaan skrip:
var ts = document.geteLementsbyTagname ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text! = null) {waspada)}}Sekarang, jika Anda memuat ulang halaman ini, Anda hanya akan melihat kotak dialog Alter yang menampilkan pesan "Pengingat Lembut", seperti yang ditunjukkan di bawah ini.
Kami bahkan dapat mengurangi kode ini menjadi yang lebih pendek. Saat memeriksa apakah data tertentu adalah nilai nol, kami sebenarnya memeriksa apakah ada. Pemeriksaan semacam ini dapat disederhanakan untuk secara langsung menggunakan data yang diperiksa sebagai syarat untuk pernyataan IF. Jika (sesuatu) sama sekali setara dengan jika (sesuatu! = NULL), tetapi yang pertama jelas lebih ringkas. Pada saat ini, jika ada sesuatu, kondisi pernyataan IF akan benar; Jika ada sesuatu yang tidak ada, kondisi pernyataan IF akan salah.
Untuk contoh ini, selama kita mengganti if (title_text! = Null) dengan if (title_text), kita bisa mendapatkan lebih banyak kode ringkas. Selain itu, untuk lebih meningkatkan keterbacaan kode, kami juga dapat mengambil kesempatan ini untuk menulis pernyataan alter dan jika pernyataan pada baris yang sama, yang dapat membuat mereka lebih dekat dengan kalimat bahasa Inggris dalam kehidupan sehari -hari kita:
var ts = document.geteLementsbyTagname ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text) alert (teks)}3.4.2 Metode setAttribute ()
Semua metode yang kami perkenalkan kepada Anda sebelumnya hanya dapat digunakan untuk mengambil informasi. Metode setAttribute () memiliki perbedaan penting dari mereka: memungkinkan kita untuk membuat modifikasi pada nilai node atribut.
Mirip dengan metode getAttribute (), metode setAttribute () juga merupakan fungsi yang hanya dapat dipanggil melalui objek node elemen, tetapi metode setAttribute () mengharuskan kita untuk meneruskan dua parameter ke dalamnya:
Obect.setAttribute (atribut, nilai)
Dalam contoh berikut, pernyataan pertama akan mengambil elemen yang nilai atribut ID adalah pembelian, dan pernyataan kedua akan menetapkan nilai atribut judul elemen ini ke daftar barang:
var shopping = document.geteLementById ("pembelian") shopping.setAttribute ("judul", "daftar barang")Kita dapat menggunakan metode getAttribute () untuk membuktikan bahwa nilai atribut judul elemen ini memang telah berubah:
var shopping = document.geteLementById ("pembelian"); alert (shopping.getAttribute ("title")); shopping.setAttribute ("title", "A List of Goods"); alert (shopping.getAttribute ("title"));Pernyataan di atas akan memunculkan dua dialog peringatan di layar: Dialog Alter pertama muncul sebelum metode setAttribute () disebut, itu akan kosong atau kata "null" ditampilkan; Yang kedua muncul setelah nilai atribut judul diatur, itu akan menampilkan pesan "daftar barang".
Dalam contoh di atas, kami mengatur atribut judul dari node yang ada, tetapi atribut ini tidak ada di tempat pertama. Ini berarti bahwa panggilan setAttribute () yang kami terbitkan sebenarnya melengkapi dua operasi: Pertama buat atribut ini, dan kemudian atur nilainya. Jika kami menggunakan metode setAttribute () pada atribut yang ada dari node elemen, nilai saat ini dari atribut ini akan ditimpa.
Dalam dokumen sampel "Daftar Belanja", elemen <p> sudah memiliki atribut judul, dan nilai atribut ini adalah pengingat yang lembut. Kita dapat menggunakan metode setAttribute () untuk mengubah nilai saat ini:
<script type = "text/javaScript"> var ts = document.geteLementsbyTagname ("li"); for (var i = 0; i <ts.length; i ++) {var text = ts [i] .getattribute ("judul"); judul "); title) .getattribute (" title ") (" iF ("iF (TEPP) {title). SUCCECED! ") ALERT (ts [i] .getAttribute (" title "))}}Kode di atas pertama -tama akan mengambil semua elemen <p> yang sudah memiliki atribut judul dari dokumen, dan kemudian memodifikasi semua nilai atribut judulnya menjadi teks judul baru. Khususnya untuk dokumen "Daftar Belanja", nilai properti yang dihargai oleh pengingat lembut.
Berikut ini adalah detail yang sangat penting: modifikasi dokumen melalui metode setAttribute () akan menyebabkan dokumen tersebut menampilkan efek dan/atau perilaku di jendela browser untuk mengubahnya, tetapi ketika kami melihat kode sumber dokumen melalui opsi sumber browser, kami masih akan melihat nilai atribut asli - yaitu, modifikasi yang dibuat oleh setattribute. Fenomena "tidak konsisten di dalam dan di luar" ini berasal dari mode kerja DOM: Pertama memuat konten statis dari dokumen, dan kemudian menyegarkannya secara dinamis. Refresh dinamis tidak mempengaruhi kandungan statis dari dokumen. Ini adalah kekuatan nyata dan godaan DOM: Konten halaman yang menyegarkan tidak mengharuskan pengguna akhir untuk melakukan operasi penyegaran halaman di browser mereka.