¿Me podría decir si hay alguna API DOM, que la búsqueda de un elemento con el nombre del atributo dado y valor de atributo:Encontrar un elemento de DOM basado en un valor de atributo
Algo así como:
doc.findElementByAttribute("myAttribute", "aValue");
Actualización: En los últimos años, el paisaje ha cambiado drásticamente. Ahora puede usar de manera confiable querySelector y querySelectorAll, vea Wojtek's answer para saber cómo hacer esto.
No hay necesidad de una dependencia de jQuery ahora. Si usas jQuery, genial ... si no lo eres, no debes confiar solo en la selección de elementos por atributos.
No hay un camino muy corto para hacer esto en javascript vainilla, pero hay algunas soluciones disponibles.
You do something like this, looping through elements and checking the attribute
Si una biblioteca como jQuery es una opción, se puede hacer un poco más fácil, así:
$("[myAttribute=value]")
Si el valor no es válido CSS identifier (tiene espacios o puntuacion en ella, etc.), es necesario comillas alrededor del valor (que pueden ser simples o dobles):
$("[myAttribute='my value']")
también se puede hacer start-with, ends-with, contains, etc ... there are several options for the attribute selector.
En realidad, la API DOM de JavaScript funciona bastante bien en los navegadores modernos –
@WojtekKruszewski no en 2010 :) Sin embargo, actualicé, ojalá el asker mueva la aceptación por nosotros, queremos información actual. –
Creo que jQuery (o equivalente) es probablemente el más fácil, especialmente para ser compatible con varios navegadores sin tener que saber lo que eso requiere. –
navegadores modernos soporte nativo querySelectorAll lo que puede hacer:
document.querySelectorAll('[data-foo="value"]');
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
Los detalles sobre la compatibilidad del navegador:
Puede usar jQuery para soportar los navegadores obsoletos (IE9 y mayores):
$('[data-foo="value"]');
FindByAttributeValue("Attribute-Name", "Attribute-Value");
P. S. si usted sabe exactamente del tipo de elemento, se agrega 3er parámetro (es decir div, a, p ...etc...):
FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");
pero al principio, defina esta función:
function FindByAttributeValue(attribute, value, element_type) {
element_type = element_type || "*";
var All = document.getElementsByTagName(element_type);
for (var i = 0; i < All.length; i++) {
if (All[i].getAttribute(attribute) == value) { return All[i]; }
}
}
P. S. actualizado por recomendaciones de comentarios.
¿Por qué? Estás haciendo un bucle en todo tu DOM haciendo esto – Arthur
Esto parece genial, si solo tienes 5 elementos en la página. – sheriffderek
@Arthur ¿cuál es tu solución? –
Aquí es un ejemplo, ¿Cómo buscar imágenes de un documento por el atributo src:
document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");
podría utilizar getAttribute:
var p = document.getElementById("p");
var alignP = p.getAttribute("align");
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Él quiere seleccionar el elemento 'p' sin usar' id' o cada 'p' en el DOM (y atributos de prueba) – Arthur
Podemos usar selector de atributos en DOM utilizando los métodos document.querySelector() y document.querySelectorAll().
por la tuya:
document.querySelector("<selector>[myAttribute = \'aValue\']");
y mediante el uso querySlectorAll():
document.querySelectorAll("<selector>[myAttribute] = \'aValue\'");
En querySelector() y querySelectorAll() métodos que podemos seleccionar los objetos que seleccionamos en "CSS".
\' aquí representan el carácter de escape y finalmente representan selector[myAttrubute = aValue] al igual que en "CSS".
Más sobre "CSS" selectores de atributos en https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Duplicar si usted está buscando un Jquery Sol: http://stackoverflow.com/questions/696968/jquery-v1-3-2-find-element- por atributo – Rajat
¿Puede actualizar la respuesta aceptada a la solución moderna, la respuesta de Wojtek? –