Ein Element im DOM auf der Grundlage eines Attributwerts finden

Question

Können Sie mir bitte sagen, wenn es eine DOM-API, die für ein Element mit gegebenen Attributnamen und Attributwert suchen:

Etwa so:

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

Answer 1

Moderne Browser unterstützen native querySelectorAll damit Sie das 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 zur Unterstützung veralteter Browser (IE9 und älter) verwenden:

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

Answer 2

Aktualisierung: In den letzten Jahren hat sich die Landschaft drastisch verändert. Sie können jetzt zuverlässig nutzen querySelector y querySelectorAll siehe Antwort von Wojtek wie Sie dies tun können.

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

---

Es gibt keine sehr kurze Möglichkeit, dies in Vanilla-Javascript zu tun, aber es gibt einige Lösungen zur Verfügung.

Sie gehen etwa so vor, indem Sie Elemente in einer Schleife durchlaufen und das Attribut

Wenn eine Bibliothek wie jQuery eine Option ist, können Sie es etwas einfacher machen, etwa so:

$("[myAttribute=value]")

Wenn der Wert nicht gültig ist CSS-Bezeichner (mit Leerzeichen oder Satzzeichen usw.), müssen Sie den Wert in Anführungszeichen setzen (einfach oder doppelt):

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

Sie können auch Folgendes tun start-with , ends-with , contains , etc... es gibt mehrere Optionen für den Attributselektor .

Answer 3

Wir können den Attributselektor im DOM verwenden, indem wir document.querySelector() y document.querySelectorAll() Methoden.

für Sie:

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

und durch die Verwendung von querySelectorAll() :

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

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

Mehr über "CSS"-Attributselektoren in https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

Verwenden Sie Abfrage-Selektoren, Beispiele:

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

input[name] Eingänge Elemente mit name Eigentum.

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

[class~=button] Elemente mit dem button Klasse.

Answer 5

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

p.s. Wenn Sie den genauen Elementtyp kennen, fügen Sie den dritten Parameter hinzu (d.h. div, a, p ...etc... ):

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

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

p.s. aktualisiert gemäß den Empfehlungen der Kommentare.