name - obtener atributo javascript

Obteniendo el elemento por un atributo personalizado usando JavaScript

Question

Tengo una página XHTML donde cada elemento HTML tiene un atributo personalizado único, como este:

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

Necesito una forma de encontrar este elemento por ID, similar a document.getElementById() , pero en lugar de usar una ID general, quiero buscar el elemento utilizando mi atributo "tokenid" . Algo como esto:

document.getElementByTokenId(''14''); 

¿Es eso posible? En caso afirmativo, cualquier sugerencia sería muy apreciada.

Gracias.

Answer 1

No es bueno usar atributos personalizados en el HTML. Si hay alguno, debe usar los atributos de data de HTML5 .

Sin embargo, puede escribir su propia función que atraviesa el árbol, pero será bastante lenta en comparación con getElementById porque no puede hacer uso de ningún índice:

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

En el peor de los casos, esto atravesará todo el árbol. Piense en cómo cambiar su concepto para poder utilizar las funciones del navegador tanto como sea posible.

En los navegadores más nuevos utiliza el método querySelector , donde simplemente sería:

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

Esto será mucho más rápido también.

Actualización: Tenga en cuenta el comentario de @Andy E a continuación. Puede ser que tengas problemas con IE (como siempre;)). Si realiza una gran cantidad de recuperación de elementos de este tipo, realmente debería considerar el uso de una biblioteca de JavaScript como jQuery, como mencionan los demás. Oculta todas estas diferencias de navegador.

Answer 2

Puedes lograr esto con JQuery:

$(''[tokenid=14]'')

Here un violín para un ejemplo.

Answer 3

Si estás dispuesto a usar JQuery , entonces:

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

Answer 4

Si estás usando jQuery, puedes usar algo de su selector mágico para hacer algo como esto:

    $(''div[tokenid=14]'')

como su selector.

Answer 5

Utilice esta función más estable:

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

Answer 6

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

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

=> encuentra el div

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

=> encuentra el div con un valor