Rumah > hujung hadapan web > tutorial js > setAttribute (kaedah teras dom w3c)

setAttribute (kaedah teras dom w3c)

Lisa Kudrow
Lepaskan: 2025-02-21 09:58:10
asal
453 orang telah melayarinya

3

pulangan setAttribute (W3C DOM Core method)

void

setAttribute (kaedah teras dom w3c) melemparkan

invalid_character_err, no_modification_allowed_err
Takeaways Key
Kaedah SetAttribute dalam JavaScript membolehkan pemaju menambah, menukar, atau mengemas kini atribut dan nilai mereka dalam elemen HTML. Ia adalah sebahagian daripada Model Objek Dokumen (DOM) dan memerlukan dua parameter: nama atribut dan nilainya.
Kaedah setAttribute adalah sensitif kes dan boleh digunakan untuk mengubahsuai gaya CSS dan atribut data tersuai. Walau bagaimanapun, untuk pengendali acara, disarankan untuk menggunakan kaedah AddEventListener dan bukannya setAttribute.

Berhati-hati apabila menggunakan nama-nama unta dalam setAttribute, kerana ini boleh menyebabkan ketidakkonsistenan dalam pelayar yang berbeza. Juga, apabila menetapkan nilai, nilai tidak dihuraikan, yang bermaksud rujukan entiti atau markup lain akan dianggap sebagai teks literal.
  • Contoh
  • Contoh di atas menetapkan atribut REL dengan nilai saya pada elemen.
jadi jika elemen yang dipersoalkan adalah html ini:

element.setAttribute('rel', 'me');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
maka operasi di atas akan mengakibatkan ini:

Argumen

<a href="http://www.brothercake.com/">brothercake</a>
Salin selepas log masuk

name
<a href="http://www.brothercake.com/" rel="me">brothercake</a>
Salin selepas log masuk
(domstring) diperlukan

nama atribut ke buat atau mengubah.
nilai
(domstring) diperlukan

nilai rentetan untuk atribut.
Keterangan
Tetapkan atribut baru dengan nama dan nilai yang ditentukan ke elemen ini.

Jika atribut sudah wujud dengan nama yang ditentukan, nilainya diganti.
Apabila menetapkan nilai, nilai tidak dihuraikan, jadi mana -mana rujukan entiti atau markup lain akan dianggap sebagai teks literal. Untuk membuat atribut yang mengandungi entiti, spesifikasi mencadangkan untuk membuat nod ATTR dengan teks yang sesuai dan entitiReference nod sebagai kanak -kanak, kemudian tambahkannya ke elemen menggunakan setAttributenode, namun dalam amalan ini jarang berfungsi (lihat ATTR untuk butiran).

Kaedah ini adalah untuk bekerja dengan atribut yang tidak bersuara; Untuk menambah atribut nama, gunakan kaedah setAttributens Dom 2 sebaliknya.

Berhati-hati dengan nama atribut yang berasaskan unta

Anda harus berhati-hati dengan menggunakan nama-nama unta dalam kod yang dimaksudkan untuk semua pelayar, kerana dalam opera dalam mod XHTML, menetapkan atribut dengan nama yang berasaskan unta boleh menjejaskan harta DOM yang sepadan. Sebagai contoh, jika anda menetapkan atribut yang dipanggil tabIndex ke sebarang nilai, ia akan mempunyai kesan menetapkan semula harta tabIndex ke 0 (nilai lalai), mengeluarkan atribut TabIndex asal sepenuhnya, dan mewujudkan atribut baru dengan nama TabIndex dan Nilai rentetan yang ditentukan.

Tingkah laku ini mungkin turun ke ketidakkonsistenan bagaimana sensitiviti kes ditangani dalam mod XHTML. Dalam penyemak imbas lain (Firefox dan Safari) melakukan ini akan mewujudkan atribut baru yang dipanggil Tabindex, sambil meninggalkan atribut TabIndex asal dan harta tabindex yang sepadan tidak berubah.

Nota ini hanya terpakai kepada penyemak imbas ini dalam mod XHTML-Dalam mod HTML2 Argumen Nama adalah kes-insensitif, jadi TabIndex dianggap sebagai TabIndex.

Selain itu, IE dalam HTML tidak dapat menetapkan atribut jenis elemen input - cuba berbuat demikian akan membuang ralat (arahan ini tidak disokong). Ia juga tidak dapat menetapkan atribut gaya (berbuat demikian hanya tidak mempunyai kesan), dan tidak dapat menetapkan atribut pengendalian peristiwa sebagai rentetan (untuk berbuat demikian tidak mempunyai kesan, melainkan elemen itu sudah mempunyai atribut pengendalian peristiwa dengan nama yang sama, di mana kes operasi untuk menetapkan yang baru akan menghapuskan yang lama, meninggalkan apa -apa - walaupun GetAttribute kemudiannya akan mengembalikan nilai rentetan yang ditetapkan, tidak akan menjadi pengendali acara aktif pada elemen). Walau bagaimanapun, ia boleh menetapkan atribut pengendalian peristiwa jika fungsi diluluskan sebagai hujah nilai, bukannya rentetan:

element.setAttribute('rel', 'me');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Akhirnya, jika kaedah ini digunakan untuk menetapkan atribut SRC imej, nilai yang kemudiannya dikembalikan dari GetAttribute akan menjadi URI yang berkelayakan sepenuhnya; Ini adalah sama dengan tingkah lakunya apabila mengambil SRC yang telah ditetapkan dalam HTML statik. Walau bagaimanapun apabila menetapkan href pautan, nilai yang kemudiannya dikembalikan akan menjadi nilai literal yang ditetapkan; Ini berbeza dengan tingkah lakunya dengan HTML statik di mana nilai dikembalikan sebagai URI yang berkelayakan.

Bagaimana saya tahu jika ia berfungsi?

Mewujudkan sama ada kaedah ini berfungsi seperti yang diharapkan adalah sangat sukar, kerana ia mungkin untuk menetapkan atribut apa -apa nama sama sekali, walaupun ia mungkin bukan atribut yang anda harapkan. Sebagai contoh, di Internet Explorer, anda masih boleh menetapkan atribut yang dipanggil kelas, dan seterusnya mengambilnya dengan getAttribute ('kelas'), tetapi ia tidak akan sesuai dengan harta nama kelas - ia akan menjadi atribut yang sepenuhnya berasingan yang tidak membuat perbezaan visual elemen.

Dalam semua penyemak imbas atribut yang menilai kepada boolean (seperti dilumpuhkan) hanya boleh ditetapkan kepada benar - menetapkannya kepada palsu tidak mempunyai kesan. Ini adalah tingkah laku yang betul, dan kerana atribut tersebut hanya mempunyai satu nilai yang mungkin (iaitu dilumpuhkan = "dilumpuhkan"), atau tidak ditakrifkan (jadi menafikannya harus dilakukan dengan penghapusan). Dalam Opera 9.5, Firefox dan Safari nilai atribut kemudiannya akan kembali sebagai palsu tetapi elemen masih akan dilumpuhkan, dalam Opera 9.0 nilai akan terus kembali sebagai dilumpuhkan, dan di Internet Explorer nilai akan terus kembali sebagai Boolean benar; Ini adalah refleksi yang tepat mengenai keadaan elemen, walaupun mereka agak mengelirukan! Walau bagaimanapun, kerana IE menganggap sifat -sifat ini mempunyai nilai boolean sebenar, nilai itu boleh ditukar (dan elemen dilumpuhkan dan didayakan dengan sewajarnya) dengan menetapkannya sebagai boolean dan bukannya rentetan:

element.setAttribute('rel', 'me');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Internet Explorer melaksanakan hujah kedua kepada setAttribute, yang merupakan bendera sensitiviti kes yang boleh mengambil nilai 0 (kes-insensitif) atau 1 (lalai, sensitif kes). Hujah ini berfungsi seperti yang diharapkan dalam IE, dan tidak menjejaskan pelayar lain.

Soalan Lazim mengenai SetAttribute W3C DOM Core Method

Apakah kaedah setAttribute dalam JavaScript?

Kaedah setAttribute dalam JavaScript adalah bahagian penting dari model objek dokumen (DOM) yang membolehkan pemaju memanipulasi elemen HTML. Kaedah ini digunakan untuk menambah, menukar, atau mengemas kini atribut dan nilai mereka dalam elemen HTML. Ia mengambil dua parameter: nama atribut dan nilainya. Sebagai contoh, jika anda ingin menukar warna teks, anda boleh menggunakan setAttribute untuk mengubah suai atribut gaya elemen. Untuk menambah atau menukar nilai atribut, GetAttribute digunakan untuk mengambil nilai atribut. Kedua -duanya adalah kaedah antara muka elemen dalam DOM. Mereka bekerjasama untuk membolehkan pemaju berinteraksi dengan dan memanipulasi elemen HTML. Kaedah ini boleh mengubah atribut gaya elemen HTML, yang mengandungi sifat CSS. Walau bagaimanapun, penting untuk diperhatikan bahawa menggunakan setAttribute akan menimpa mana -mana gaya inline sedia ada. Sekiranya anda ingin menukar harta gaya tertentu tanpa menjejaskan orang lain, lebih baik menggunakan sifat gaya elemen. Ada, kaedah setAttribute akan menciptanya dengan nilai yang ditentukan. Ini adalah salah satu sebab mengapa setAttribute sangat kuat: ia membolehkan pemaju menambahkan atribut secara dinamik kepada elemen HTML.

Bolehkah saya menggunakan setAttribute dengan atribut data tersuai?

Ya, setAttribute boleh digunakan dengan atribut data tersuai. Ini amat berguna apabila anda perlu menyimpan maklumat tambahan yang tidak mempunyai perwakilan visual. Ingatlah untuk awalan nama atribut dengan 'data-' untuk mematuhi piawaian HTML5.

Adakah setattribute kes-sensitif? Ini bermakna bahawa 'kelas' dan 'kelas' akan dianggap sebagai dua atribut yang berbeza. Sentiasa pastikan anda menggunakan kes yang betul apabila bekerja dengan atribut. Ini kerana nilai atribut peristiwa sentiasa menjadi rentetan, yang bermaksud anda tidak boleh secara langsung menetapkan fungsi sebagai pengendali acara. Sebaliknya, gunakan kaedah AddEventListener, yang direka khusus untuk tujuan ini. Walau bagaimanapun, tidak semua atribut boleh digunakan untuk semua elemen. Sebagai contoh, atribut 'src' adalah relevan untuk elemen 'img', tetapi bukan untuk elemen 'p'. secara dinamik mengubah penampilan atau tingkah laku elemen HTML. Sebagai contoh, anda mungkin menggunakannya untuk menukar warna teks, menambah sempadan ke imej, atau menukar sumber imej. Ia juga digunakan untuk menambah atribut data tersuai.

Adakah terdapat sebarang alternatif untuk setAttribute? Sebagai contoh, anda boleh mengubahsuai sifat -sifat elemen HTML secara langsung. Ini selalunya lebih mudah dan lebih intuitif daripada menggunakan setAttribute. Walau bagaimanapun, SetAttribute mempunyai kelebihan untuk dapat bekerja dengan sebarang atribut, termasuk atribut data tersuai.

Atas ialah kandungan terperinci setAttribute (kaedah teras dom w3c). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan