Anda boleh membuat pengikatan mengikat tersuai yang akan menyemak nilai boolean tertentu yang boleh diperhatikan sebelum menambah atau tidak atribut. Lihat contoh ini:
Ko.bindingHandlers.attrIf = ( kemas kini: fungsi (elemen, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(elemen, valueAccessor, allBindingsAccessor); ) else ( untuk (var k dalam h) ( jika (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(elemen).removeAttr(k); ) ) ) ) ); pautan
Saya harap saya boleh menjawab @gbs, tetapi saya tidak boleh. Penyelesaian saya adalah untuk mempunyai dua elemen HTML yang sama: satu dengan atribut, satu tanpanya, dan syarat kalah mati untuk menambah salah satu daripadanya mengikut elemen. Saya juga menyedari jangkaan biasa ini, tetapi penyelesaian manakah yang lebih cekap?
Dalam artikel ini, kita akan berkenalan dengan sifat dan atribut DOM, pertimbangkan cara ia berbeza dan cara bekerja dengannya dengan betul. Mari lihat kaedah yang JavaScript ada untuk melaksanakan operasi pada atribut.
Apakah perbezaan antara atribut dan sifat DOM?Atribut ialah entiti HTML yang dengannya kita boleh menambah data tertentu pada elemen dalam kod HTML.
Apabila penyemak imbas meminta halaman, ia menerima kod sumber HTMLnya. Selepas itu, ia menghuraikan kod ini dan membina DOM berdasarkannya. Semasa proses ini, atribut HTML elemen diterjemahkan ke dalam sifat DOM yang sepadan.
Sebagai contoh, penyemak imbas, apabila membaca baris kod HTML berikut, akan mencipta sifat DOM berikut untuk elemen ini: id , className , src dan alt .
Sifat ini diakses dalam kod JavaScript sebagai sifat objek. Objek di sini ialah nod DOM (elemen).
Contoh di mana kita mendapat nilai sifat DOM untuk elemen yang diberikan di atas dan mengeluarkan nilainya ke konsol:
// dapatkan elemen var brandImg = document.querySelector("#brand"); // paparkan nilai sifat DOM elemen ke console console.log(brandImg.id); // "jenama" console.log(brandImg.className); // "jenama" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "logo tapak"
Sesetengah nama sifat DOM tidak sepadan dengan nama atribut. Salah satunya ialah atribut kelas. Atribut ini sepadan dengan className sifat DOM. Perbezaan ini disebabkan oleh fakta bahawa kelas ialah kata kunci dalam JavaScript, ia dikhaskan dan tidak boleh digunakan. Oleh sebab itu, pembangun standard memutuskan untuk menggunakan beberapa nama lain untuk pematuhan, yang dipilih sebagai className .
Satu lagi nuansa adalah berkaitan dengan fakta bahawa terjemahan atribut HTML yang dinyatakan dalam kod sumber dokumen ke dalam sifat DOM tidak selalu dilakukan satu sama lain.
Jika elemen mempunyai atribut HTML bukan standard, maka sifat yang sepadan dengannya dalam DOM tidak dibuat.
// dapatkan elemen mydiv = document.querySelector("#mydiv"); // dapatkan nilai sifat alt elemen dan keluarkan ke console console.log(mydiv.alt); // undefined // dapatkan nilai atribut alt elemen dan keluarkan ke console console.log(mydiv.getAttribute("alt")); // "..."
Perbezaan lain ialah nilai atribut HTML tertentu dan sifat DOM yang sepadan boleh berbeza. Itu. atribut boleh mempunyai satu nilai dan sifat DOM yang dibuat berdasarkannya boleh mempunyai nilai lain.
Salah satu atribut ini disemak.
Nilai atribut HTML yang disemak dalam kes ini ialah rentetan kosong. Tetapi, sifat yang sepadan dengan atribut ini dalam DOM akan mempunyai nilai true . Kerana mengikut peraturan standard, untuk menetapkan benar, cukup untuk menyebut atribut ini dalam kod HTML, dan tidak kira apa nilai yang akan ada.
Lebih-lebih lagi, walaupun kami tidak menentukan atribut yang disemak dalam kod HTML untuk elemen input dengan kotak semak jenis, maka sifat yang ditandakan masih akan dibuat untuknya dalam DOM, tetapi ia akan sama dengan palsu.
Di samping itu, JavaScript juga membolehkan anda bekerja dengan atribut. Terdapat kaedah khas untuk ini dalam API DOM. Tetapi dinasihatkan untuk menggunakannya hanya apabila anda benar-benar perlu bekerja dengan data dengan cara ini.
Pada masa yang sama, anda perlu tahu bahawa apabila kami menukar sifat DOM sesuatu elemen, atribut yang sepadan juga berubah, dan begitu juga sebaliknya. Tetapi proses dalam penyemak imbas ini tidak selalu dilakukan satu lawan satu.
Perbezaan utama antara sifat dan atribut DOM ialah:
- nilai atribut sentiasa rentetan, dan nilai sifat DOM ialah jenis data tertentu (tidak semestinya rentetan);
- Nama atribut adalah tidak peka huruf besar-besaran dan sifat DOM adalah sensitif huruf besar-besaran. Itu. dalam kod HTML kita boleh, sebagai contoh, menulis atribut id HTML sebagai Id , ID , dsb. Perkara yang sama berlaku untuk nama atribut, yang kami tentukan dalam kaedah JavaScript khas untuk bekerja dengannya. Tetapi kita boleh mengakses sifat DOM yang sepadan hanya dengan id dan tiada yang lain.
Bekerja dengan sifat elemen dalam JavaScript, seperti yang dinyatakan di atas, dijalankan seperti dengan sifat objek.
Tetapi untuk mengakses sifat sesuatu elemen, ia mesti diperolehi terlebih dahulu. Anda boleh mendapatkan elemen DOM dalam JavaScript, contohnya, menggunakan kaedah querySelector universal dan koleksi elemen DOM, contohnya, menggunakan querySelectorAll .
Sebagai contoh pertama, pertimbangkan elemen HTML berikut:
Teks mesej maklumat... var alert = document.querySelector("#alert"); // dapatkan elemen
Berdasarkan itu, kami akan menganalisis cara mendapatkan sifat DOM, menukarnya dan menambah yang baharu.
Membaca nilai sifat DOM:
// dapatkan nilai id sifat DOM var alertId = alert.id; // "alert" // dapatkan nilai sifat DOM className var alertClass = alert.className; // "maklumat amaran makluman" // dapatkan nilai tajuk sifat DOM var alertId = alert.title; // "Teks bantuan..."
Menukar nilai sifat DOM:
// untuk menukar nilai sifat DOM, anda hanya perlu menetapkan nilai baharu padanya alert.title = "Teks petua alat baharu"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}
Menambah sifat DOM:
Alert.lang = "ru"; // tetapkan sifat lang kepada "ru" alert.dir = "ltr"; // tetapkan harta dir kepada "ltr"
Contoh di mana kami akan mengeluarkan kepada konsol semua nilai kelas yang terdapat pada elemen p pada halaman:
Var perenggan = document.querySelectorAll("p"); untuk (var i = 0, panjang = perenggan.panjang ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }
Contoh di mana kami menetapkan sifat lang kepada semua elemen dengan kelas kandungan dengan nilai "ru":
Kandungan Var = document.querySelectorAll(".content"); untuk (var i = 0, panjang = kandungan.panjang; i< length; i++) { contents[i].lang = "ru"; }
Atribut elemen dan kaedah untuk bekerja dengan merekaAtribut pada mulanya ditetapkan dalam kod HTML. Walaupun mereka disambungkan, dalam beberapa cara, dengan sifat, mereka bukan perkara yang sama. Dalam kebanyakan kes, anda harus bekerja dengan sifat dan mengakses atribut hanya apabila anda benar-benar memerlukannya.
Nilai atribut, tidak seperti sifat DOM, seperti yang dinyatakan di atas, sentiasa rentetan.
JavaScript mempunyai empat kaedah untuk melaksanakan operasi yang berkaitan dengan atribut:
- .hasAttribute("attribute_name") – menyemak sama ada elemen mempunyai atribut yang ditentukan. Jika elemen mempunyai atribut yang sedang diperiksa, maka kaedah ini mengembalikan benar, jika tidak - palsu.
- .getAttribute("attribute_name") – mendapat nilai atribut. Jika elemen tidak mempunyai atribut yang ditentukan, maka kaedah ini mengembalikan rentetan kosong ("") atau null .
- .setAttribute("attribute_name", "attribute_value") – menetapkan atribut yang ditentukan dengan nilai yang ditentukan kepada elemen. Jika elemen mempunyai atribut yang ditentukan, maka kaedah ini kemudiannya akan menukar nilainya.
- .removeAttribute("attribute_name") - mengalih keluar atribut yang ditentukan daripada elemen.
Mari lihat contoh.
Contoh yang sangat menarik dengan atribut nilai.
Contoh dengan atribut nilai var name = document.querySelector("input"); // dapatkan elemenMari dapatkan nilai atribut nilai dan nilai sifat DOM:
// dapatkan nilai atribut nilai nama elemen.getAttribute("value"); // "Bob" // dapatkan nilai nama nilai sifat DOM.value; // "Bob" // kemas kini nilai atribut nilai, tetapkannya kepada nama nilai baharu.setAttribute("value", "Tom"); // "Tom" // dapatkan nilai nama nilai sifat DOM.value; // "Tom"
Contoh ini menunjukkan bahawa apabila atribut nilai berubah, penyemak imbas secara automatik menukar sifat nilai DOM sewajarnya.
Sekarang mari kita lakukan sebaliknya, iaitu, tukar nilai sifat DOM dan semak sama ada nilai atribut berubah:
// tetapkan nilai baharu untuk nama nilai sifat DOM.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}
Contoh ini menunjukkan bahawa menukar sifat DOM tidak selalu membawa kepada perubahan yang sepadan dalam atribut. Itu. dalam kes ini, menukar sifat DOM nilai tidak mengubah atributnya yang sepadan.
Perkara yang sama akan berlaku apabila pengguna memasukkan teks ke dalam medan ini. Nilai sifat DOM akan mengandungi nilai sebenar dan atribut yang sepadan akan mengandungi nilai asal atau nilai yang kami tetapkan, contohnya, menggunakan kaedah setAttribute.
Contoh ini menunjukkan bahawa adalah lebih tepat untuk sentiasa bekerja dengan sifat DOM dan anda perlu mengakses atribut hanya apabila ia benar-benar perlu.
Walaupun dalam kes di mana anda perlu mendapatkan nilai awal yang kami tetapkan dalam HTML, anda boleh menggunakan harta tersebut. Harta yang mengandungi nilai awal atribut nilai dipanggil defaultValue .
Name.defaultValue; //Tom
Satu lagi contoh yang sangat menarik, tetapi kini dengan atribut href.
Contoh dengan atribut hrefContoh di mana kita perlu mendapatkan nilai pautan seperti yang ditetapkan dalam HTML.
var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // URL penuh, contohnya: http://localhost/page2.html
Dalam contoh ini, atribut href dan sifat DOM href mengandungi nilai yang berbeza. Atribut href ialah apa yang kami tetapkan dalam kod dan sifat DOM ialah URL penuh. Perbezaan ini ditentukan oleh standard bahawa penyemak imbas mesti menyelesaikan nilai href ke URL penuh.
Oleh itu, jika kita perlu mendapatkan apa yang ada dalam atribut, maka dalam kes ini kita tidak boleh melakukannya tanpa kaedah getAttribute.
Akhir sekali, mari kita lihat pada atribut yang dipilih.
Contoh dengan atribut yang dipilihContoh yang menunjukkan cara anda boleh mendapatkan nilai pilihan pilihan yang dipilih:
tiada penarafan 1 2 3 4 5 // dapatkan elemen pilih var mark = document.querySelector("#mark"); // 1 way mark.querySelector("option:checked").value; // Kaedah 2 mark.value;
Contoh yang menunjukkan bagaimana anda boleh mendapatkan nilai pilihan yang dipilih dalam elemen pilihan:
tiada penarafan 1 2 3 4 5 // dapatkan elemen pilih var mark = document.querySelector("#mark"); // Kaedah 1 (dengan mencipta tatasusunan dan mengisinya dengan nilai pilihan yang dipilih) var arr = ; untuk (var i = 0, panjang = markah.pilihan.panjang; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)
Cara lain untuk bekerja dengan atribut (sifat atribut)Dalam JavaScript, setiap elemen mempunyai sifat atribut, yang boleh digunakan untuk mendapatkan semua atributnya sebagai objek NamedNodeMap.
Kaedah ini boleh digunakan apabila anda perlu, sebagai contoh, untuk melelaran melalui semua atribut unsur.
Atribut dalam koleksi ini diakses oleh indeksnya atau dengan menggunakan kaedah item. Atribut dalam koleksi ini dikira daripada 0.
Sebagai contoh, mari kita paparkan semua atribut elemen tertentu pada konsol:
SAYA SUKA JAVASCRIPT
// dapatkan elemen dengan mesej pengecamnya var message = document.querySelector("#message"); // dapatkan atributnya var attrs = message.attributes; // pergi melalui semua atribut menggunakan gelung (attrs.length – bilangan atribut) untuk (var i = 0, length = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "info"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;Selain itu, anda juga boleh bekerja dengan koleksi ini menggunakan kaedah berikut:
- .getNamedItem("attribute_name") – mendapat nilai atribut yang ditentukan (jika atribut yang ditentukan tidak terdapat pada elemen, maka hasilnya akan menjadi batal).
- .setNamedItem("attribute_node") – menambah atribut baharu pada elemen atau mengemas kini nilai yang sedia ada. Untuk mencipta atribut, anda mesti menggunakan kaedah document.createAttribute(), yang mesti dihantar nama atribut sebagai parameter. Atribut yang dibuat kemudiannya mesti diberikan nilai menggunakan sifat nilai.
- .removeNamedItem("attribute_name") – mengalih keluar atribut yang ditentukan daripada elemen (mengembalikan atribut yang dialih keluar sebagai hasilnya).
Contoh bekerja dengan atribut melalui kaedah getNamedItem, setNamedItem dan removeNamedItem:
SAYA SUKA JAVASCRIPT
// dapatkan elemen dengan mesej pengecamnya var message = document.querySelector("#message"); // dapatkan atributnya var attrs = message.attributes; // Tugasan No. 1. Dapatkan nilai atribut id console.log(attrs.getNamedItem("id")); // Tugasan No. 2. Tetapkan atribut (jika wujud, kemudian ubah nilainya, jika tidak tambahkan yang baharu) // cipta atribut gaya dan simpan pada pembolehubah attrStyle var attrStyle = document.createAttribute("style"); // tetapkan nilai kepada atribut menggunakan sifat nilai attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !} Tugasan- Cetak ke konsol semua elemen dokumen yang mempunyai atribut id.
- Tambahkan atribut tajuk pada semua imej pada halaman jika mereka tidak mempunyai atribut ini. Tetapkan nilai atribut sama dengan nilai atribut alt.
Tutorial ini adalah mengenai membaca dan menukar atribut elemen dalam jQuery.
Atribut ialah pasangan nama/nilai yang diberikan kepada elemen dalam teg. Contoh atribut ( href, tajuk, src, kelas):
Berikut ialah teks ringkasan
- attr() untuk membaca, menambah dan menukar atribut
- removeAttr() untuk mengalih keluar atribut
Pelajaran ini merangkumi penggunaan kaedah attr() dan removeAttr().
Terdapat kaedah jQuery khas untuk bekerja dengan kelas CSS, yang diterangkan dalam pelajaran lain. Apabila mengerjakan projek dalam jQuery, anda perlu banyak memanipulasi kelas CSS, dan atribut kelas boleh mengandungi berbilang nama kelas, yang menjadikan kerja dengannya lebih kompleks daripada atribut lain.
Jika anda akan bekerja dengan nilai medan input, maka lebih baik menggunakan kaedah val(), yang bukan sahaja menyediakan cara mudah untuk bekerja dengan atribut nilai, tetapi juga boleh membaca dan menetapkan nilai dalam elemen terpilih senarai pilih.
Membaca nilai atributMembaca nilai atribut elemen adalah mudah. Anda hanya perlu memanggil kaedah attr() pada objek jQuery yang mengandungi elemen, memberikannya nama atribut untuk dibaca. Kaedah mengembalikan nilai atribut:
// Cetak nilai atribut "href" bagi amaran elemen #myLink ($("a#myLink").attr("href"));
Jika objek jQuery anda mengandungi berbilang elemen, kaedah attr() membaca nilai atribut hanya untuk elemen pertama dalam set.
Menetapkan nilai atributKaedah attr() juga boleh digunakan untuk menambah atau menukar nilai atribut:
- Jika atribut tidak wujud dalam elemen, ia akan menjadi tambah dan ia akan diberikan nilai yang ditentukan.
- Jika atribut sudah wujud, nilainya ialah dikemas kini nilai yang diberi.
Terdapat tiga cara untuk menggunakan kaedah attr() untuk menambah atau menukar atribut:
Untuk menetapkan atau menukar atribut elemen, anda perlu memanggil kaedah attr() yang menyatakan nama dan nilai atribut. Sebagai contoh:
// Tukar nilai atribut "href" elemen #myLink kepada nilai "http://www.example.com/" // (jika atribut "href" tidak wujud, ia akan dibuat secara automatik) $("a#myLink"). attr("href", "http://www.example.com/");
Ia juga mungkin untuk menetapkan atribut yang sama untuk berbilang elemen:
Menetapkan beberapa atribut menggunakan petaAnda boleh menetapkan berbilang atribut serentak pada satu atau lebih elemen menggunakan peta. Ini ialah senarai pasangan nama/nilai yang kelihatan seperti ini:
( nama1: nilai1, nama2: nilai2, ... )
Contoh berikut menetapkan dua atribut pada elemen img pada masa yang sama:
// Tetapkan atribut "src" dan "alt" untuk elemen img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;
Anda juga boleh menetapkan atribut untuk berbilang elemen:
// Tetapkan atribut "src" dan "alt" untuk semua elemen img $("img").attr(( "src": "mypic.jpg", "alt": "Foto Saya" ));
Menetapkan atribut menggunakan fungsi panggil balikDaripada menghantar nilai atribut ke kaedah attr(), anda boleh menghantar nama fungsi panggil balik. Dengan cara ini anda boleh menetapkan nilai atribut secara dinamik untuk berbilang elemen berdasarkan kedudukan elemen, nilai atribut sedia ada atau sifat lain.
Fungsi pulangan mesti mengambil dua hujah:
- Indeks kedudukan elemen yang dipilih pada masa ini dalam set (bermula pada sifar)
- nilai atribut lama untuk elemen yang dipilih pada masa ini
Nilai yang dikembalikan oleh fungsi digunakan untuk menggantikan nilai atribut.
Selain kedudukan semasa elemen dan nilai lama atribut, fungsi anda boleh mengakses elemen itu sendiri menggunakan kata kunci ini. Dengan cara ini, anda boleh mengakses sebarang sifat atau kaedah elemen daripada fungsi panggil balik.
Contoh menggunakan fungsi panggil balik untuk menambah atribut alt pada setiap imej pada halaman berdasarkan kedudukan imej dan atribut srcnya:
$(init); function init() ( // Tetapkan atribut "alt" untuk semua elemen "img" $("img").attr("alt", setAltText); function setAltText(index, attributeValue) ( return ("Rajah " + (indeks +1) + ": " + this.src); ) ) 
Selepas menjalankan kod, imej pertama akan mempunyai atribut alt dengan nilai "Rajah 1: myphoto.jpg" dan imej kedua akan mempunyai atribut alt dengan nilai "Rajah 2: yourphoto.jpg" .
Mengalih keluar atributUntuk mengalih keluar atribut daripada elemen, anda perlu memanggil kaedah removeAttr(), dengan memberikannya nama atribut untuk dialih keluar. Sebagai contoh:
// Alih keluar atribut "title" daripada elemen #myLink $("a#myLink").removeAttr("title");
Anda juga boleh memanggil kaedah removeAttr() pada objek jQuery yang mengandungi berbilang elemen. Kaedah removeAttr() akan mengalih keluar atribut yang ditentukan daripada semua elemen:
// Alih keluar atribut "title" daripada semua pautan $("a").removeAttr("title");
RingkasanPelajaran ini merangkumi isu bekerja dengan atribut elemen dalam jQuery:
- Membaca Nilai Atribut
- Menetapkan satu atribut
- Menetapkan beberapa atribut yang berbeza sekaligus
- Menggunakan fungsi panggil balik untuk menetapkan nilai atribut secara dinamik pada set elemen
- Mengalih keluar atribut daripada elemen
Pelajaran akan merangkumi permulaan topik: model objek dokumen (javaScript DOM) adalah asas HTML dinamik, kaedah capaian objek akan dikaji dan kaedah pemprosesan peristiwa javascript akan dipertimbangkan.
- Secara umum, objek ialah jenis data komposit yang menggabungkan banyak nilai ke dalam unit biasa dan membolehkan nilai disimpan dan diambil semula dengan nama mereka atas permintaan.
- Dalam javascript terdapat perkara seperti DOM - Model Objek Dokumen— model objek halaman web (halaman html).
- Tag dokumen atau, seperti yang mereka katakan, nod dokumen adalah objeknya.
Terdahulu kita sudah mula berkenalan dengan konsep dalam javascript.
Mari lihat gambar rajah hierarki objek dalam JavaScript, dan di mana dalam hierarki objek dokumen yang dibincangkan dalam topik ini terletak.
Elemen skrip mempunyai atribut berikut:
Contoh:
/* Membenarkan fail js dimuatkan secara selari dan dilaksanakan serta-merta selepas dimuatkan, tanpa menunggu halaman selebihnya diproses */ /* Membenarkan penyemak imbas mula memuatkan fail js secara selari tanpa menghentikan pemprosesan selanjutnya halaman. Pelaksanaannya berlaku selepas penghuraian lengkap model objek dokumen */
Sifat dan atribut objek dokumen dalam JavaScriptObjek dokumen mewakili halaman web.
Penting: Untuk mengakses sifat dan kaedah objek dalam javaScript, seperti semasa bekerja dengan objek lain, notasi titik digunakan:
mereka. mula-mula objek itu sendiri ditulis, kemudian sifat, atribut atau kaedahnya ditunjukkan melalui titik dan tanpa ruang
object.property object.attribute object.method()Mari lihat contoh:
Contoh: biar ada tag dalam dokumen html
elemen saya
dan gaya css yang ditakrifkan untuknya (walaupun dua gaya, yang kedua akan berguna untuk tugas itu):
| .kecil( warna : merah ; saiz fon : kecil ; ) .besar( warna : biru ; saiz fon : besar; ) |
.kecil( warna:merah; saiz fon:kecil; ) .besar(warna:biru; saiz fon:besar; )
Perlu:
Mari selesaikan tugas mengikut urutan:
✍ Penyelesaian:
Memandangkan ini adalah bahasa javascript, anda boleh membuat dan menetapkan sebarang harta dengan sebarang nilai pada objek. Tetapi pertama, mari dapatkan akses kepada objek (akses kepada objek akan dibincangkan secara terperinci kemudian dalam pelajaran ini):
// akses objek dengan id var elemen = document.getElementById("MyElem"); element.myProperty = 5; // tetapkan amaran harta (element.myProperty); // paparan dalam kotak dialog
Tugas seterusnya adalah berkaitan dengan atribut objek. Atribut objek ialah atribut tag. Itu. dalam kes kami terdapat dua daripadanya: atribut kelas dengan nilai kecil dan atribut id. Kami akan bekerja dengan atribut kelas.
Sekarang mari tambah kod javascript untuk memaparkan nilai atribut objek kita. Kod mestilah selepas tag utama:
// akses objek dengan id var elemen = document.getElementById("MyElem"); alert(element.getAttribute("class")); // paparan dalam kotak dialog
Dan tugas terakhir: menukar nilai atribut. Kami mempunyai gaya untuk ini. "besar". Mari gantikan nilai atribut kelas dengan gaya ini:
// akses objek dengan id var elemen = document.getElementById("MyElem"); element.setAttribute("class","big");
Akibatnya, elemen kita akan menjadi lebih besar dan berwarna biru (kelas besar).
Sekarang mari kita lihat lebih dekat kaedah yang digunakan dalam contoh untuk bekerja dengan atribut.
Atribut boleh ditambah, dipadam dan diubah suai. Terdapat kaedah khas untuk ini:
- Menambah atribut (menetapkan nilai baharu untuknya):
- Menyemak kehadiran atribut ini:
getAttribute(attr)
removeAttribute(attr)
Cara yang berbeza untuk bekerja dengan atribut
Contoh: Cetak nilai atribut nilai bagi blok teks.
✍ Penyelesaian:
- Biarkan ada blok teks:
- Mari lihat beberapa cara untuk mendapatkan nilai atribut (gunakan kaedah alert() untuk output):
var elem = document.getElementById("MyElem"); var x = "nilai";
| elem.getAttribute("nilai") |
elem.getAttribute("nilai")
2. tatatanda titik:
| elem.atribut.nilai |
elem.atribut.nilai
3. notasi kurungan:
var element = document.getElementById("t1"); alert(...) element.setAttribute(...);
Anda juga boleh menetapkan nilai atribut dalam beberapa cara:
var x = "kunci"; // kunci - nama atribut, val - nilai untuk atribut // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " kunci"] = "val" // 4. elem.setAttribute(x, "val")
Sifat unsur badanMelalui objek dokumen, anda boleh mengakses badan dokumen - teg badan - dengan beberapa sifat berguna.
Sebagai contoh, teg badan mempunyai dua sifat: lebar dan tinggi tetingkap klien:
document.body.clientHeight — ketinggian tetingkap klien
document.body.clientWidth — lebar tetingkap klien
Tetapi perkara yang paling penting, seperti yang telah kita pelajari, ialah melalui objek dokumen, melalui kaedah khas, akses disediakan kepada semua elemen halaman, iaitu tag.
Penting: Apabila mengakses teg halaman dengan cara ini, skrip mesti berada di hujung pepohon elemen, sebelum menutup badan ! Memandangkan pada masa skrip dilaksanakan, semua elemen sepatutnya sudah "dilukis" oleh penyemak imbas pada skrin
Kerja js8_1 . Tunjukkan mesej tentang saiz tetingkap penyemak imbas: contohnya, "dimensi tetingkap penyemak imbas 600 x 400"
Mengakses Elemen Dokumen dalam JavaScriptTerdapat beberapa pilihan untuk mengakses atau mencari objek:
Mari kita pertimbangkan setiap pilihan dengan lebih terperinci.
Sintaks: document.getElementById(id)
Kaedah getElementById() mengembalikan elemen itu sendiri, yang kemudiannya boleh digunakan untuk mengakses data
Contoh: Halaman mempunyai medan teks dengan atribut id="cake":
...
Perlu
✍ Penyelesaian:
alert(document.getElementById("cake").value); // mengembalikan "bilangan kek"
Anda boleh melakukan perkara yang sama dengan mengakses objek melalui pembolehubah:
var a=document.getElementById("kek"); makluman(a.value); // memaparkan nilai atribut nilai, i.e. teks "bilangan kek"
Penting: Skrip mesti terletak selepas tag!
Sintaks:
document.getElementsByTagName(nama);
Contoh: Halaman mempunyai medan teks (teg input) dengan atribut nilai:
...
Diperlukan: paparkan nilai atribut nilainya
Kaedah getElementsByTagName menyediakan akses melalui pembolehubah kepada semua elemen input (iaitu, tatasusunan elemen input), walaupun jika elemen ini adalah satu-satunya pada halaman. Untuk mengakses elemen tertentu, contohnya yang pertama, kami menunjukkan indeksnya (tatasusunan bermula pada indeks sifar).
✍ Penyelesaian:
- Kami mengakses elemen tertentu mengikut indeks:
var a =document.getElementsByTagName("input"); makluman(a.value); // mengembalikan "bilangan kek"
Sintaks:
document.getElementsByName(nama);
Kaedah getElementsByName("...") mengembalikan tatasusunan objek yang atribut namanya sama dengan nilai yang ditentukan sebagai parameter kaedah. Jika terdapat hanya satu elemen sedemikian pada halaman, maka kaedah itu masih mengembalikan tatasusunan (dengan hanya satu elemen tunggal).
Contoh: katakan ada elemen dalam dokumen:
var element = document.getElementsByName("MyElem"); makluman(elemen.nilai);
Dalam contoh ini, terdapat satu elemen, tetapi rujukannya adalah kepada elemen sifar tatasusunan.
Penting: Kaedah ini hanya berfungsi dengan unsur-unsur yang mana atribut nama diberikan secara eksplisit dalam spesifikasi: ini adalah form , input , a , select , textarea dan beberapa teg lain yang lebih jarang berlaku.
Kaedah document.getElementsByName tidak akan berfungsi dengan elemen lain seperti div , p , dsb.
Kanak-kanak diakses dalam javascript melalui sifat childNodes. Harta kepunyaan objek induk.
| document.getElementById(roditel).childNodes; |
document.getElementById(roditel).childNodes;
Mari lihat contoh di mana teg imej diletakkan dalam bekas yang dipanggil teg div. Oleh itu, teg div ialah induk kepada data imej, dan tag img itu sendiri, oleh itu, adalah anak kepada teg div:
Sekarang mari kita paparkan nilai elemen tatasusunan dengan keturunan dalam tetingkap modal, i.e. tag img:
var myDiv=document.getElementById("div_for_img"); // akses bekas induk var childMas=myDiv.childNodes; // tatasusunan keturunan untuk (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }
Ambil perhatian bahawa ia adalah mudah untuk menggunakan gelung untuk lelaran melalui elemen tatasusunan keturunan. Itu. dalam contoh kami, kami mendapat kitaran:
| ... untuk (var a dalam childMas) ( alert(childMas[ a].src ) ; ) |
Untuk (var a dalam childMas)( alert(childMas[a].src); )
Mari lihat kaedah lain menggunakan contoh:
| 1 3 4 |
1 3 4
Akses:
| ... // pengakses elemen yang tidak diingini dan tidak digunakan lagi: alert(document.forms [ 0 ] .name ); // f alert(document.forms [ 0 ] .elements [ 0 ] .type ); // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ); // o2 alert(document.f .b .type ); // button alert(document.f .s .name ); // ss alert(document.f .s .options [ 1 ] .id ); // o2 // kaedah pilihan untuk mengakses elemen alert(document.getElementById ("t" ) .type ) ; // text alert(document.getElementById ("s" ) .name ); // ss alert(document.getElementById ("s") .options [ 1 ] .id ); // 02 alert(document.getElementById ("o3" ) .text ); // 4 ... |
... // kaedah capaian elemen yang tidak diingini dan tidak digunakan: alert(document.forms.name); // f alert(document.forms.elements.type); // amaran teks(document.forms.elements.options.id); // o2 alert(document.f.b.type); // Butang amaran(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // kaedah pilihan untuk mengakses elemen alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...
Contoh: Dalam dokumen HTML, buat butang dan medan teks. Menggunakan skrip, warnakan latar belakang butang (style.backgroundColor property butang) dan paparkan inskripsi "Hello!" dalam medan teks (atribut nilai).
Kod HTML:
document.getElementById("t1").value = "Hello!"; document.getElementById("b1").style.backgroundColor = "red";!}
Pilihan 2:
| document.getElementById ("t1" ) .setAttribute ( "nilai" , "Hello!"); document.getElementById("b1" ) .style .backgroundColor = "merah" ; |
document.getElementById("t1").setAttribute("value","Hello!"); document.getElementById("b1").style.backgroundColor = "merah";
Tugasan Js8_2. Buat teg medan teks seperti yang ditunjukkan dalam imej. Beri mereka nilai atribut id yang sepadan (ditunjukkan dalam rajah). Menggunakan skrip, tambah nilai "0" pada semua medan angka (dengan mengandaikan nilai angka) 
Adakah medan dibiarkan kosong?
Input pengguna tidak boleh dipercayai. Adalah tidak munasabah untuk menganggap bahawa pengguna akan menyemak data apabila memasukkan data. Ini bermakna anda perlu menggunakan javascript untuk ini.
Untuk menyemak sama ada medan teks dibiarkan kosong (contohnya, selepas pengguna mengisi data soal selidik), anda harus merujuk kepada sifat nilai. Jika nilai harta ialah rentetan kosong (""), maka anda perlu memberitahu pengguna tentang perkara ini.
if(document.getElementById("name").value=="") (beberapa tindakan, contohnya, memaparkan mesej yang meminta anda mengisi medan);
Di samping itu, anda boleh melakukannya tanpa skrip. Teg input medan teks mempunyai atribut corak. nilainya menentukan ungkapan biasa untuk menyemak data dalam medan teks yang diberikan dalam borang. Jika atribut itu ada corak, maka borang tidak akan diserahkan sehingga medan teks ini diisi dengan betul.
Sebagai contoh, untuk menyemak sama ada medan dibiarkan kosong:
Teks dan bukannya nilai berangka: fungsi isNaN
Jika medan memerlukan memasukkan nilai berangka, tetapi sebaliknya pengguna memasukkan teks, maka fungsi isNaN mesti digunakan. "bukan nombor?"), yang menyemak jenis data input dan mengembalikan benar jika data teks dimasukkan dan bukannya data berangka.
Itu. jika benar dikembalikan, maka pengguna mesti dimaklumkan untuk memasukkan format yang betul, i.e. nombor.
if(isNaN(document.getElementById("minit").value))( makluman yang memerlukan anda memasukkan data berangka);
Diberi halaman dengan elemen untuk diisi: 
Coretan kod HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 | nama: Bilangan donat: minit: Ringkasan: Cukai: Keputusan: ... |
nama:
Bilangan donat:
minit:
Ringkasan:
Cukai:
Keputusan:
...
Perlu:
Lengkapkan tempat kosong dalam coretan kod di bawah yang menyemak bahawa dua medan teks diisi dengan betul: Nama(id="name") dan minit(id="minit"). Gunakan semakan untuk memastikan bahawa medan dibiarkan kosong ("") dan medan berangka diisi dengan betul (isNaN).
* Laksanakan tugas juga dengan atribut corak medan teks menggunakan .
Serpihan skrip:
Kod menggunakan syarat yang dipelajari sebelum ini untuk membina keadaan yang kompleks.
Konsep baharu untuk anda ialah memanggil fungsi sebagai pengendali acara butang:
onclick="placeOrder();"
Apabila butang diklik, fungsi placeOrder() akan dipanggil
Menetapkan nilai atribut pada elemen yang ditentukan. Jika atribut sudah wujud, nilai dikemas kini; sebaliknya atribut baharu ditambah dengan nama dan nilai yang ditentukan.
Sintaks unsur.setAttribute( nama, nilai); Nama parameter A DOMString menyatakan nama atribut yang nilainya akan ditetapkan. Nama atribut ditukar secara automatik kepada semua huruf kecil apabila setAttribute() dipanggil pada elemen HTML dalam dokumen HTML. nilai DOMString yang mengandungi nilai untuk diberikan kepada atribut. Sebarang nilai bukan rentetan yang ditentukan ditukar secara automatik menjadi rentetan.Atribut Boolean dianggap benar jika ia hadir pada elemen sama sekali, tanpa mengira nilai sebenar mereka; sebagai peraturan, anda harus menentukan rentetan kosong ("") dalam nilai (sesetengah orang menggunakan nama atribut; ini berfungsi tetapi tidak standard). Lihat di bawah untuk demonstrasi praktikal.
Memandangkan nilai yang ditentukan akan ditukar kepada rentetan, menyatakan null tidak semestinya melakukan apa yang anda harapkan. Daripada mengalih keluar atribut atau menetapkan nilainya menjadi null , ia sebaliknya menetapkan nilai atribut kepada rentetan "null" . Jika anda ingin mengalih keluar atribut, panggil removeAttribute() .
Nilai pengembalian Pengecualian InvalidCharacterError Nama atribut yang ditentukan mengandungi satu atau lebih aksara yang tidak sah dalam nama atribut. ContohDalam contoh berikut, setAttribute() digunakan untuk menetapkan atribut pada .
HTML Hello World JavaScript var b = document.querySelector("butang"); b.setAttribute("nama", "helloButton"); b.setAttribute("disabled", "");Ini menunjukkan dua perkara:
- Panggilan pertama untuk setAttribute() di atas menunjukkan menukar nilai atribut nama kepada "helloButton". Anda boleh melihatnya menggunakan pemeriksa halaman penyemak imbas anda (Chrome, Edge, Firefox, Safari).
- Untuk menetapkan nilai atribut Boolean, seperti disabled , anda boleh menentukan sebarang nilai. Rentetan kosong atau nama atribut ialah nilai yang disyorkan. Apa yang penting ialah jika atribut itu ada sama sekali, tanpa mengira nilai sebenar, nilainya dianggap benar. Ketiadaan atribut bermakna nilainya adalah palsu. Dengan menetapkan nilai atribut disabled kepada rentetan kosong (""), kami menetapkan disabled kepada true , yang mengakibatkan butang dilumpuhkan.
Kaedah DOM berurusan dengan atribut elemen:
| setAttribute(DOM 1) | setAttributeNS | setAttributeNode | setAttributeNodeNS |
| getAttribute(DOM 1) | getAttributeNS | getAttributeNode | getAttributeNodeNS |
| hasAttribute(DOM2) | hasAttributeNS | - | - |
| removeAttribute(DOM 1) | removeAttributeNS | removeAttributeNode | - |
- Teras Tahap 2 DOM: setAttribute (diperkenalkan dalam Teras Tahap 1 DOM)
Jadual keserasian pada halaman ini dijana daripada data berstruktur. Jika anda ingin menyumbang kepada data, sila semak https://github.com/mdn/browser-compat-data dan hantarkan permintaan tarik kepada kami.
Kemas kini data keserasian pada GitHub
| Mudah Alih Desktop | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Paparan web Android Chrome untuk Android Firefox untuk Android Opera untuk Android Safari pada iOS Samsung Internet | |||||||||||
| Chrome Sokongan penuh Ya | Sokongan penuh Edge 12 | Firefox Sokongan penuh Ya | IE Sokongan penuh 5 Nota Sokongan penuh 5Nota Nota Dalam Internet Explorer 7 dan lebih awal, setAttribute tidak menetapkan gaya dan mengalih keluar acara apabila anda cuba menetapkannya. | Opera Sokongan penuh Ya | Safari Sokongan penuh 6 | WebView Android Sokongan penuh Ya | Chrome Android Sokongan penuh Ya | Firefox Android Sokongan penuh Ya | Opera Android Sokongan penuh Ya | Safari iOS Sokongan penuh Ya | Samsung Internet Android Sokongan penuh Ya |
Menggunakan setAttribute() untuk mengubah suai atribut tertentu, terutamanya nilai dalam XUL, berfungsi secara tidak konsisten, kerana atribut menentukan nilai lalai. Untuk mengakses atau mengubah suai nilai semasa, anda harus menggunakan sifat. Contohnya, gunakan Element.value dan bukannya Element.setAttribute() .
