web-dev-qa-db-fra.com

Obtention d'un élément par un attribut personnalisé à l'aide de JavaScript

J'ai une page XHTML où chaque élément HTML a un attribut personnalisé unique, comme ceci:

<div class="logo" tokenid="14"></div>

J'ai besoin d'un moyen de trouver cet élément par ID, similaire à document.getElementById(), mais au lieu d'utiliser un ID général, je veux rechercher l'élément en utilisant mon attribut "tokenid" Personnalisé. Quelque chose comme ça:

document.getElementByTokenId('14');

Est-ce possible? Si oui - tout indice serait grandement apprécié.

Merci.

javascriptgetelementbyid
34
cycero

Il n'est pas bon d'utiliser des attributs personnalisés dans le HTML. Le cas échéant, vous devez utiliser les attributs data de HTML5 .

Néanmoins, vous pouvez écrire votre propre fonction qui parcourt l'arborescence, mais ce sera assez lent par rapport à getElementById car vous ne pouvez pas utiliser tout indice:

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }
    return null;
}

Dans le pire des cas, cela traversera tout l'arbre. Réfléchissez à la façon de changer votre concept afin de pouvoir utiliser autant que possible les fonctions du navigateur.

Dans les navigateurs plus récents, vous utilisez la méthode querySelector , où elle serait simplement:

var element = document.querySelector('[tokenid="14"]');

Ce sera aussi beaucoup plus rapide.

Mise à jour: Veuillez noter le commentaire de @Andy E ci-dessous. Il se peut que vous rencontriez des problèmes avec IE (comme toujours;)). Si vous effectuez beaucoup de récupération d'éléments de ce type, vous devriez vraiment envisager d'utiliser une bibliothèque JavaScript telle que jQuery, comme les autres mentionnées. Il cache toutes ces différences de navigateur.

39
Felix Kling
<div data-automation="something">
</div>

document.querySelector("div[data-automation]")

=> trouve le div

document.querySelector("div[data-automation='something']")

=> trouve le div avec une valeur

23
user1307434

Si vous utilisez jQuery, vous pouvez utiliser une partie de leur magie de sélection pour faire quelque chose comme ceci:

    $('div[tokenid=14]')

comme votre sélecteur.

4
Thurloat

Si vous êtes prêt à utiliser JQuery , alors:

var myElement = $('div[tokenid="14"]').get();
1
sje397

Vous pouvez accomplir cela avec JQuery:

$('[tokenid=14]')

Ici est un violon pour un exemple.

1
Briguy37

Utilisez cette fonction plus stable:

function getElementsByAttribute(attr, value) {
  var match = [];
  /* Get the droids we are looking for*/
  var elements = document.getElementsByTagName("*");
  /* Loop through all elements */
  for (var ii = 0, ln = elements.length; ii < ln; ii++) {
    if (elements[ii].nodeType === 1){      
      if (elements[ii].name != null){        
      /* If a value was passed, make sure it matches the elements */
        if (value) {
          if (elements[ii].getAttribute(attr) === value) 
           match.Push(elements[ii]);           
      } else {
        /* Else, simply Push it */
         match.Push(elements[ii]);          
      }
     }
   }
  }
return match;
};
0
Ingo