Rumah >hujung hadapan web >tutorial js >Bagaimana Mendapatkan Semua Atribut daripada Elemen HTML Menggunakan JavaScript dan jQuery?

Bagaimana Mendapatkan Semua Atribut daripada Elemen HTML Menggunakan JavaScript dan jQuery?

DDD
DDDasal
2024-11-28 05:56:14479semak imbas

How to Get All Attributes from an HTML Element Using JavaScript and jQuery?

Cara Mengambil Semua Atribut daripada Elemen HTML Menggunakan Javascript/jQuery

Apabila berurusan dengan elemen HTML, mendapatkan semua atributnya boleh menjadi berharga atas pelbagai sebab. Dalam artikel ini, kami akan meneroka dua pendekatan untuk mencapai tugas ini menggunakan Javascript dan jQuery:

Javascript

Untuk mendapatkan semula atribut elemen HTML dengan Javascript tulen, anda boleh menggunakan senarai nod atribut. Coretan kod berikut menunjukkan cara untuk melakukannya:

var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) {
  arr.push(atts[i].nodeName);
}

Kod ini memberikan senarai nod atribut kepada pembolehubah 'atts' dan menggelungkannya untuk menambah nama atribut (nodeName) pada tatasusunan 'arr' .

Jika anda memerlukan kedua-dua nama atribut dan nilai, anda boleh mengubah suai kod sebagai berikut:

var nodes = [], values = [];
for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
  att = atts[i];
  nodes.push(att.nodeName);
  values.push(att.nodeValue);
}

Kod yang dikemas kini ini menambah nilai atribut (nodeValue) pada tatasusunan 'nilai' yang berasingan.

jQuery

Dengan jQuery, mendapatkan atribut elemen HTML ialah satu tugas yang mudah. Anda boleh mengikuti langkah berikut:

  1. Pilih elemen HTML sasaran menggunakan pemilih jQuery, seperti:

    var el = $("#someId");
  2. Gunakan attr() berfungsi untuk mendapatkan semula atribut dengan name:

    var attributeValue = el.attr("attributeName");

Untuk mendapatkan semula semua atribut, anda boleh mengulangi senarai nod atribut:

for (var i = 0, atts = el[0].attributes, n = atts.length, arr = []; i < n; i++) {
  arr.push(atts[i].nodeName);
}

Kod ini serupa dengan pendekatan Javascript tulen, tetapi ia memanfaatkan abstraksi jQuery terhadap DOM.

Dengan menggunakan teknik ini, anda boleh dengan berkesan dapatkan semula semua atribut daripada elemen HTML dalam Javascript dan jQuery, memberikan fleksibiliti untuk tugas pengaturcaraan bahagian hadapan anda.

Atas ialah kandungan terperinci Bagaimana Mendapatkan Semua Atribut daripada Elemen HTML Menggunakan JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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