web-dev-qa-db-fra.com

Obtenir des éléments HTML par leurs noms d'attributs

Il existe des méthodes disponibles en JavaScript pour obtenir des éléments HTML à l'aide de leurs ID, Classe et Tag.

document.getElementByID(*id*);
document.getElementsByClassName(*class*);
document.getElementsByTagName(*tag*);

Existe-t-il une méthode disponible pour obtenir les éléments en fonction du nom de l'attribut.

EX: 

<span property="v:name">Basil Grilled Tomatoes and Onions</span>

Comme:

document.getElementsByAttributeName("property");
javascripthtmldom
39
Saurabh Saxena

Oui, mais ce n'est pas présent dans tous les navigateurs. Les anciennes versions d’Internet Explorer (c’est-à-dire avant la version 8) ne la prennent pas en charge. La fonction est querySelectorAll (ou querySelector pour un seul élément), ce qui vous permet d'utiliser des sélecteurs CSS pour rechercher des éléments.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property=value]'); // All with "property" set to "value" exactly.

(Liste complète des sélecteurs d'attributs sur le MDN.)

Ceci trouve tous les éléments avec la propriété d'attribut. Il serait préférable de spécifier un nom de tag si possible:

document.querySelectorAll('span[property]');

Vous pouvez contourner ce problème si nécessaire en parcourant tous les éléments de la page pour voir s'ils ont l'attribut défini:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.Push(els[i]);
    }
}

Des bibliothèques telles que jQuery traitent cela pour vous: c'est probablement une bonne idée de les laisser faire le travail lourd.

63
lonesomeday

Dans jQuery, il en est ainsi:

$("span['property'=v:name]"); // for selecting your span element
2
IceMan

Juste une autre réponse

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    function(el) {return el.getAttribute('property') == 'v.name';}
);

Dans le futur

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    (el) => el.getAttribute('property') == 'v.name'
)
1
Fabio Montefuscolo

Je pense que vous voulez jeter un œil à jQuery puisque cette bibliothèque Javascript fournit de nombreuses fonctionnalités que vous pouvez utiliser dans ce type de cas. Dans votre cas, vous pouvez écrire (ou en trouver un sur Internet) une méthode hasAttribute, comme ceci (non testé):

$.fn.hasAttribute = function(tagName, attrName){
  var result = [];
  $.each($(tagName), function(index, value) { 
     var attr = $(this).attr(attrName); 
     if (typeof attr !== 'undefined' && attr !== false)
        result.Push($(this));
  });
  return result;
}
0
Bas Slagter