Obtener elementos HTML por sus nombres de atributo

Question

Hay métodos disponibles en JavaScript para obtener elementos HTML utilizando su ID, Clase y Etiqueta.

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

¿Hay algún método disponible para obtener los elementos de acuerdo con el nombre del atributo.

EX:

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

igual:

document.getElementsByAttributeName("property"); 

Answer 1

Sí, pero no está presente en todos los navegadores. Las versiones anteriores de Internet Explorer (es decir, antes de la versión 8) no son compatibles. La función es querySelectorAll (o querySelector para un solo elemento), que le permite usar selectores CSS para encontrar elementos.

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

(Complete list of attribute selectors on MDN.)

Esto encuentra todos los elementos con la propiedad de atributo. Sería mejor para especificar un nombre de etiqueta si es posible:

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

Puede solucionar este caso, de bucle a través de todos los elementos de la página para ver si han establecido el atributo:

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

Las bibliotecas como jQuery manejan esto por usted: probablemente sea una buena idea dejar que hagan el trabajo pesado.

Answer 2

Creo que desee echar un vistazo a jQuery desde esa biblioteca Javascript ofrece una gran cantidad de funcionalidad es posible que desee utilizar en este tipo de casos. En su caso, usted podría escribir (o encontrar uno en el Internet) un método hasAttribute, al igual que (no probado):

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

Answer 3

En jQuery esto es así:

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

Answer 4

, usted puede obtener atribuir el uso de JavaScript,

element.getAttribute(attributeName); 

Ex:

var wrap = document.getElementById("wrap"); 
var myattr = wrap.getAttribute("title"); 

Consulte:

https://developer.mozilla.org/en/DOM/element.getAttribute

Answer 5

Con PrototypeJS:

$$('span[property=v.name]'); 

o

document.body.select('span[property=v.name]'); 

Tanto devuelven un conjunto

Answer 6

Sólo otra respuesta

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

En el futuro

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