élément Obtenir par un attribut personnalisé à l'aide JavaScript

Question

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

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

je 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 souhaite rechercher l'élément en utilisant mon attribut personnalisé "tokenid". Quelque chose comme ceci:

document.getElementByTokenId('14'); 

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

Merci.

Answer 1

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

Néanmoins, vous pouvez écrire votre propre fonction qui traverse l'arbre, mais ce sera assez lent par rapport à getElementById parce que vous ne pouvez pas utiliser un 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 traverser l'arbre entier. Réfléchissez à la façon de modifier votre concept afin de pouvoir utiliser autant que possible les fonctions du navigateur.

Dans les navigateurs les plus récents que vous utilisez la méthode querySelector, où il serait juste:

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

Ce sera beaucoup plus rapide aussi.

---

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

Answer 2

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

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

Answer 3

Vous pouvez accomplir cela avec JQuery:

$('[tokenid=14]') 

un violon de Here pour un exemple.

Answer 4

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

$('div[tokenid=14]') 

comme sélecteur.

Answer 5

<div data-automation="something"> 
</div> 

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

=> trouve la div

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

=> trouve la div avec une valeur

Answer 6

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