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

Question

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 son numéro d'identification, comme dans le cas suivant document.getElementById() mais au lieu d'utiliser un identifiant général, je veux rechercher l'élément en utilisant mon identifiant personnalisé "tokenid" attribut. Quelque chose comme ceci :

document.getElementByTokenId('14'); 

Est-ce possible ? Si oui, toute indication serait grandement appréciée.

Merci.

Answer 1

Il n'est pas judicieux d'utiliser des attributs personnalisés dans le code HTML. S'il y en a, vous devez utiliser HTML5 data attributs .

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

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, l'arbre sera parcouru dans son intégralité. Réfléchissez à la manière de modifier votre concept afin d'utiliser le plus possible les fonctions du navigateur.

Dans les navigateurs plus récents, vous utilisez la fonction querySelector où il serait simplement :

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

Ce sera également 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 faites 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 l'ont mentionné. Elle masque toutes les différences entre les navigateurs.

Answer 2

<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 3

Si vous utilisez jQuery, vous pouvez utiliser la magie de ses sélecteurs pour faire quelque chose comme ça :

    $('div[tokenid=14]')

comme sélecteur.

Answer 4

Vous pouvez le faire avec JQuery :

$('[tokenid=14]')

Ici Voici un exemple de violon.

Answer 5

L'utilisation d'un JavaScript vanille suffira :

  const something = document.querySelectorAll('[data-something]')