Suchen Sie ein Element in DOM basierend auf einem Attributwert

Können Sie mir bitte sagen, ob es eine DOM-API gibt, die nach einem Element mit einem bestimmten Attributnamen und Attributwert sucht:

Etwas wie:

doc.findElementByAttribute("myAttribute", "aValue");

Update: In den letzten Jahren hat sich die Landschaft drastisch verändert. Sie können jetzt zuverlässig verwenden querySelectorund querySelectorAll, siehe Wojteks Antwort, wie dies zu tun ist.

Es ist jetzt keine jQuery-Abhängigkeit erforderlich. Wenn Sie jQuery verwenden, großartig ... wenn Sie es nicht sind, müssen Sie sich nicht mehr nur darauf verlassen, Elemente nach Attributen auszuwählen.

Es gibt keine sehr kurze Möglichkeit, dies in Vanille-Javascript zu tun, aber es gibt einige Lösungen.

Sie tun so etwas, indem Sie Elemente durchlaufen und das Attribut überprüfen

Wenn eine Bibliothek wie jQuery eine Option ist, können Sie dies etwas einfacher tun:

$("[myAttribute=value]")

Wenn der Wert kein gültiger CSS-Bezeichner ist (er enthält Leerzeichen oder Satzzeichen usw.), benötigen Sie Anführungszeichen um den Wert (sie können einfach oder doppelt sein):

$("[myAttribute='my value']")

Sie können auch tun start-with, ends-with, contains, etc ... gibt es mehrere Optionen für das Attribut Selektor .

Moderne Browser unterstützen native, querySelectorAllsodass Sie Folgendes tun können:

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

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

Details zur Browserkompatibilität:

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

Sie können jQuery verwenden, um veraltete Browser (IE9 und älter) zu unterstützen:

$('[data-foo="value"]');

Wir können die Attributauswahl in DOM mithilfe von document.querySelector()und document.querySelectorAll()Methoden verwenden.

für deine:

document.querySelector("selector[myAttribute='aValue']");

und mit querySlectorAll():

document.querySelectorAll("selector[myAttribute='aValue']");

In querySelector()und querySelectorAll()Methoden können wir Objekte auswählen, wie wir sie in "CSS" auswählen.

Weitere Informationen zu "CSS" -Attributselektoren finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

ps Wenn Sie den genauen Elementtyp kennen, fügen Sie den 3. Parameter hinzu (dh div, a, p ...etc...):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

Definieren Sie zunächst diese Funktion:

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

ps aktualisiert pro Kommentar Empfehlungen.

Hier ist ein Beispiel: So suchen Sie Bilder in einem Dokument nach dem src-Attribut:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

Sie könnten getAttribute verwenden:

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Verwenden Sie Abfrageselektoren, Beispiele:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]Gibt Elemente mit nameEigenschaft ein.

[id|=view]Elemente mit ID, die mit beginnen view-.

[class~=button]Elemente mit der buttonKlasse.