Contoh penggunaan kaedah getAttribute dalam kemahiran js_javascript

kaedah getAttribute()

Setakat ini, kami telah memperkenalkan kepada anda dua cara untuk mendapatkan semula nod elemen tertentu: satu ialah menggunakan kaedah getElementById() dan satu lagi ialah menggunakan kaedah getElementsByTagName(). Selepas mencari elemen itu, kita boleh menggunakan kaedah getAttribute() untuk menanyakan nilai pelbagai atributnya.
Kaedah getAttribute() ialah fungsi. Ia hanya mempunyai satu parameter - nama atribut yang ingin anda tanyakan:
object.getAttribute(attribute)
Walau bagaimanapun, kaedah getAttribute() tidak boleh dipanggil melalui objek dokumen, tidak seperti kaedah lain yang telah kami perkenalkan sebelum ini. Kami hanya boleh memanggilnya melalui objek nod elemen.
Sebagai contoh, anda boleh menggabungkannya dengan kaedah getElementsByTagName() untuk menanyakan atribut tajuk bagi setiap elemen

var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}

Jika anda memasukkan kod di atas pada penghujung dokumen contoh "Senarai Beli-belah" yang diberikan sebelum ini, dan memuatkan semula halaman dalam penyemak imbas web, mesej teks "peringatan lembut" akan muncul pada skrin kotak dialog .
Terdapat hanya satu elemen

dengan atribut tajuk dalam dokumen "Senarai Beli-belah". Jika dokumen ini juga mempunyai satu atau lebih elemen

tanpa atribut tajuk, panggilan getAttribute("title") yang sepadan akan mengembalikan nol. Null ialah nilai nol dalam bahasa JavaScript, yang bermaksud "perkara yang anda bincangkan tidak wujud." Jika anda ingin mengesahkan ini untuk diri sendiri, masukkan teks berikut ke dalam dokumen Senarai Beli-belah anda dahulu selepas perenggan teks sedia ada:

Ini hanyalah ujian

Kemudian muat semula halaman. Kali ini, anda akan melihat dua kotak dialog alter, dan kotak dialog kedua akan kosong atau hanya memaparkan perkataan "null" - bergantung pada cara pelayar web anda memaparkan nilai nol.
Kami boleh mengubah suai skrip kami supaya ia hanya muncul mesej apabila atribut tajuk wujud. Kami akan menambah pernyataan if untuk menyemak sama ada nilai pulangan kaedah getAttribute() adalah batal. Mengambil kesempatan daripada peluang ini, kami turut menambah beberapa pembolehubah untuk meningkatkan kebolehbacaan skrip:

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}

Kini, jika anda memuat semula halaman ini, anda hanya akan melihat kotak dialog ubah dengan mesej "peringatan lembut" seperti yang ditunjukkan di bawah.
Kita juga boleh membuat kod ini lebih pendek. Apabila menyemak sama ada item data adalah batal, kami sebenarnya menyemak sama ada ia wujud. Semakan ini boleh dipermudahkan dengan terus menggunakan data yang disemak sebagai syarat pernyataan if. jika (sesuatu) adalah sama sepenuhnya dengan if (sesuatu!= null), tetapi yang pertama jelas lebih ringkas. Pada masa ini, jika sesuatu wujud, keadaan pernyataan if akan menjadi benar jika sesuatu tidak wujud, syarat pernyataan if akan menjadi palsu.
Khusus untuk contoh ini, selagi kita menggantikan if (title_text != null) dengan if (title_text), kita boleh mendapatkan kod yang lebih ringkas. Di samping itu, untuk meningkatkan lagi kebolehbacaan kod, kami juga boleh mengambil peluang ini untuk menulis pernyataan alter dan pernyataan if pada baris yang sama, yang boleh menjadikannya lebih dekat dengan ayat bahasa Inggeris dalam kehidupan seharian kita:

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text) alert(text)
}

3.4.2 setAttribute() kaedah
Semua kaedah yang kami perkenalkan kepada anda sebelum ini hanya boleh digunakan untuk mendapatkan maklumat. Kaedah setAttribute() mempunyai perbezaan penting daripada mereka: ia membolehkan kami mengubah suai nilai nod atribut.
Sama seperti kaedah getAttribute(), kaedah setAttribute() juga merupakan fungsi yang hanya boleh dipanggil melalui objek nod elemen, tetapi kaedah setAttribute() memerlukan kita menghantar dua parameter:
obiect.setAttribute(atribut,nilai)
Dalam contoh berikut, pernyataan pertama akan mendapatkan semula elemen yang nilai atribut idnya ialah pembelian dan pernyataan kedua akan menetapkan nilai atribut tajuk elemen ini kepada senarai barangan:

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

Kita boleh menggunakan kaedah getAttribute() untuk membuktikan bahawa nilai atribut tajuk elemen ini sememangnya telah berubah:

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

Pernyataan di atas akan muncul dua kotak dialog amaran pada skrin: kotak dialog alter pertama muncul sebelum kaedah setAttribute() dipanggil, ia akan kosong atau memaparkan perkataan "null"; nilai atribut tajuk ditetapkan, ia akan memaparkan mesej "senarai barangan".
Dalam contoh di atas, kami menetapkan atribut tajuk nod sedia ada, tetapi atribut ini tidak wujud pada asalnya. Ini bermakna bahawa panggilan setAttribute() yang kami keluarkan sebenarnya telah menyelesaikan dua operasi: mula-mula mencipta atribut, dan kemudian menetapkan nilainya. Jika kita menggunakan kaedah setAttribute() pada atribut sedia ada bagi nod elemen, nilai semasa atribut ini akan ditimpa.
Dalam dokumen contoh "Senarai Beli-belah", elemen

sudah mempunyai atribut tajuk yang nilainya adalah peringatan yang lembut. Kita boleh menggunakan kaedah setAttribute() untuk menukar nilai semasanya:

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功！")
alert(ts[i].getAttribute("title"))
}
}

Kod di atas akan mendapatkan semula semua

elemen dengan atribut tajuk daripada dokumen, dan kemudian mengubah suai semua nilai atribut tajuknya kepada teks tajuk baharu. Khusus kepada dokumen "Senarai Beli-belah", nilai atribut peringatan lembut akan ditindih.
Terdapat butiran yang patut diberi perhatian di sini: pengubahsuaian pada dokumen melalui kaedah setAttribute() akan menyebabkan perubahan yang sepadan dalam kesan paparan dan/atau kelakuan dokumen dalam tetingkap penyemak imbas, tetapi apabila kami menggunakan paparan penyemak imbas Apabila anda melihat kod sumber dokumen menggunakan pilihan sumber, anda masih akan melihat nilai atribut asal - iaitu, perubahan yang dibuat oleh kaedah setAttribute() tidak akan ditunjukkan dalam kod sumber dokumen itu sendiri. Fenomena "ketidakkonsistenan antara penampilan dan bahagian dalam" ini datang daripada mod kerja DOM: mula-mula memuatkan kandungan statik dokumen, dan kemudian segarkannya secara dinamik tidak menjejaskan kandungan statik dokumen. Inilah kuasa dan daya tarikan sebenar DOM: kandungan halaman yang menyegarkan tidak memerlukan pengguna akhir untuk melakukan operasi muat semula halaman dalam penyemak imbas mereka.