Comment obtenir tous les attributs d'un élément HTML à l'aide de JavaScript et jQuery ?

Comment récupérer tous les attributs d'un élément HTML à l'aide de Javascript/jQuery

Lorsqu'il s'agit d'éléments HTML, l'obtention de tous leurs attributs peut être utile pour diverses raisons. Dans cet article, nous explorerons deux approches pour réaliser cette tâche en utilisant Javascript et jQuery :

Javascript

Pour récupérer les attributs d'un élément HTML avec du Javascript pur, vous pouvez utiliser la liste de nœuds d'attributs. L'extrait de code suivant montre comment procéder :

var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i <p>Ce code attribue la liste de nœuds d'attributs à la variable 'atts' et la parcourt pour ajouter le nom de l'attribut (nodeName) au tableau 'arr'. .</p><p>Si vous avez besoin à la fois de noms et de valeurs d'attribut, vous pouvez modifier le code comme suit :</p><pre class="brush:php;toolbar:false">var nodes = [], values = [];
for (var att, i = 0, atts = el.attributes, n = atts.length; i <p>Ce code mis à jour ajoute la valeur de l'attribut (nodeValue) à un tableau de « valeurs » distinct.</p><h3 id="jQuery">jQuery</h3><p>Avec jQuery, obtenir les attributs des éléments HTML est une tâche simple. Vous pouvez suivre ces étapes :</p><ol>
<li>
<p>Sélectionnez l'élément HTML cible à l'aide d'un sélecteur jQuery, tel que :</p>
<pre class="brush:php;toolbar:false">var el = $("#someId");

Utilisez le attr() pour récupérer un attribut en name :

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

Pour récupérer tous les attributs, vous pouvez parcourir la liste des nœuds d'attributs :

for (var i = 0, atts = el[0].attributes, n = atts.length, arr = []; i Ce code est similaire à l'approche Javascript pure, mais il exploite l'abstraction du DOM par jQuery.<p></p>En utilisant ces techniques, vous pouvez récupérer efficacement tous les attributs d'un élément HTML dans les deux Javascript et jQuery, offrant une flexibilité pour vos tâches de programmation frontale.<p></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!