Wie erhalte ich mit JavaScript und jQuery alle Attribute eines HTML-Elements?

So rufen Sie alle Attribute eines HTML-Elements mit Javascript/jQuery ab

Beim Umgang mit HTML-Elementen kann es aus verschiedenen Gründen wertvoll sein, alle Attribute zu erhalten. In diesem Artikel untersuchen wir zwei Ansätze, um diese Aufgabe mithilfe von Javascript und jQuery zu lösen:

Javascript

Um HTML-Elementattribute mit reinem Javascript abzurufen, können Sie die Attributknotenliste verwenden. Der folgende Codeausschnitt zeigt, wie das geht:

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

Dieser Code weist die Attributknotenliste der Variable „atts“ zu und durchläuft sie, um den Attributnamen (nodeName) zum Array „arr“ hinzuzufügen .

Wenn Sie sowohl Attributnamen als auch Werte benötigen, können Sie den Code wie folgt ändern:

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);
}

Dieser aktualisierte Code fügt hinzu den Attributwert (nodeValue) in ein separates „values“-Array.

jQuery

Mit jQuery ist das Abrufen von HTML-Elementattributen eine unkomplizierte Aufgabe. Sie können diesen Schritten folgen:

1. Wählen Sie das Ziel-HTML-Element mit einem jQuery-Selektor aus, wie zum Beispiel:

   var el = $("#someId");

2. Verwenden Sie das attr() Funktion zum Abrufen eines Attributs durch Name:

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

Um alle Attribute abzurufen, können Sie über die Attributknotenliste iterieren:

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

Dieser Code ähnelt dem reinen Javascript-Ansatz. aber es nutzt die jQuery-Abstraktion des DOM.

Durch die Verwendung dieser Techniken können Sie in beiden Fällen effektiv alle Attribute aus einem HTML-Element abrufen Javascript und jQuery bieten Flexibilität für Ihre Front-End-Programmieraufgaben.

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit JavaScript und jQuery alle Attribute eines HTML-Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!