javascript - qué - ¿Obtiene elementos por atributo cuando querySelectorAll no está disponible sin usar bibliotecas?

verbo copulativo

Question

<p data-foo="bar">

¿Cómo puedes hacer el equivalente a

document.querySelectorAll(''[data-foo]'')

donde querySelectorAll no está disponible ?

Necesito una solución nativa que funcione al menos en IE7. No me importa IE6.

Answer 1

No usar en el navegador

En el navegador, use document.querySelect(''[attribute-name]'') .

Pero si está realizando pruebas unitarias y su dominio falso tiene una implementación de querySelector escasa, esto hará el truco.

Esta es la respuesta de @ kevinfahy, simplemente recortada para que sea un poco con las funciones de flecha de grasa de ES6 y convirtiendo la colección de Html en una matriz a costa de la legibilidad.

Por lo tanto, solo funcionará con un transpondedor ES6. Además, no estoy seguro de qué tan eficiente será con muchos elementos.

function getElementsWithAttribute(attribute) {
return [].slice.call(document.getElementsByTagName(''*''))
.filter(elem => elem.getAttribute(attribute) !== null);
}

Y aquí hay una variante que obtendrá un atributo con un valor específico

function getElementsWithAttributeValue(attribute, value) {
return [].slice.call(document.getElementsByTagName(''*''))
.filter(elem => elem.getAttribute(attribute) === value);
}

Answer 2

Eso también funciona:

document.querySelector([attribute="value"]);

Asi que:

document.querySelector([data-foo="bar"]);

Answer 3

Esta es la forma más sencilla de obtener valor de atributo para mí

<p id="something" data-foo="your value">
<script type="text/javascript">
alert(document.getElementById(''something'').getAttribute(''data-foo''));
</script>

Respuesta tardía de dos años con la esperanza de ayudar al futuro seguidor.

Answer 4

Jugué un poco y terminé con esta solución cruda:

function getElementsByAttribute(attribute, context) {
var nodeList = (context || document).getElementsByTagName(''*'');
var nodeArray = [];
var iterator = 0;
var node = null;
while (node = nodeList[iterator++]) {
if (node.hasAttribute(attribute)) nodeArray.push(node);
}
return nodeArray;
}

El uso es bastante simple, y funciona incluso en IE8:

getElementsByAttribute(''data-foo'');
// or with parentNode
getElementsByAttribute(''data-foo'', document);

http://fiddle.jshell.net/9xaxf6jr/

Pero recomiendo usar querySelector / All para esto (y para admitir que los navegadores más antiguos usen un polyfill ):

document.querySelectorAll(''[data-foo]'');

Answer 5

Prueba esto funciona

document.querySelector (''[attribute = "value"]'')

ejemplo:

document.querySelector(''[role="button"]'')

Answer 6

Prueba esto: cambié ligeramente las respuestas anteriores:

var getAttributes = function(attribute) {
var allElements = document.getElementsByTagName(''*''),
allElementsLen = allElements.length,
curElement,
i,
results = [];
for(i = 0; i < allElementsLen; i += 1) {
curElement = allElements[i];
if(curElement.getAttribute(attribute)) {
results.push(curElement);
}
}
return results;
};

Entonces,

getAttributes(''data-foo'');

Answer 7

Puede escribir una función que ejecute getElementsByTagName (''*'') y devuelva solo aquellos elementos con un atributo "data-foo":

function getAllElementsWithAttribute(attribute)
{
var matchingElements = [];
var allElements = document.getElementsByTagName(''*'');
for (var i = 0, n = allElements.length; i < n; i++)
{
if (allElements[i].getAttribute(attribute) !== null)
{
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}

Entonces,

getAllElementsWithAttribute(''data-foo'');

Answer 8

Una pequeña modificación en la answer @kevinfahy, para permitir obtener el atributo por valor si es necesario:

function getElementsByAttributeValue(attribute, value){
var matchingElements = [];
var allElements = document.getElementsByTagName(''*'');
for (var i = 0, n = allElements.length; i < n; i++) {
if (allElements[i].getAttribute(attribute) !== null) {
if (!value || allElements[i].getAttribute(attribute) == value)
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}

Answer 9

Utilizar

//find first element with "someAttr" attribute
document.querySelector(''[someAttr]'')

o

//find all elements with "someAttr" attribute
document.querySelectorAll(''[someAttr]'')

para encontrar elementos por atributo. Ahora es compatible con todos los navegadores relevantes (incluso IE8): http://caniuse.com/#search=queryselector