Zoek een element in DOM op basis van een attribuutwaarde

Kun je me alsjeblieft vertellen of er een DOM API is die zoekt naar een element met een gegeven attribuutnaam en attribuutwaarde:

Zoiets als:

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

Antwoord 1, autoriteit 100%

Update:In de afgelopen jaren is het landschap drastisch veranderd. U kunt nu betrouwbaar querySelectoren querySelectorAllgebruiken, zie Wojtek’s antwoordom dit te doen.

Er is nu geen behoefte aan een jQuery-afhankelijkheid. Als je jQuery gebruikt, geweldig… als je dat niet bent, hoef je er niet meer alleen op te vertrouwen voor het selecteren van elementen op attributen.


Er is geen erg korte manier om dit te doen in vanilla javascript, maar er zijn enkele oplossingen beschikbaar.

Je doet zoiets als dit, door elementen bladeren en het attribuut controleren

Als een bibliotheek als jQueryeen optie is, kun je het wat makkelijker doen, zoals dit:

$("[myAttribute=value]")

Als de waarde geen geldige CSS-ID(er zitten spaties of leestekens in, enz.), je hebt aanhalingstekens nodig rond de waarde (ze kunnen enkel of dubbel zijn):

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

Je kunt ook start-with, ends-with, contains, enz…er zijn verschillende opties voor de kenmerkselector.


Antwoord 2, autoriteit 93%

Moderne browsers ondersteunen native querySelectorAll, dus u kunt het volgende doen:

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

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

Details over browsercompatibiliteit:

U kunt jQuery gebruiken om verouderde browsers (IE9 en ouder) te ondersteunen:

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

Antwoord 3, autoriteit 35%

We kunnen attribuutselector in DOM gebruiken door de methoden document.querySelector()en document.querySelectorAll()te gebruiken.

voor de jouwe:

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

en door querySelectorAll()te gebruiken:

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

In querySelector()en querySelectorAll()methoden kunnen we objecten selecteren zoals we selecteren in “CSS”.

Meer over ‘CSS’-kenmerkkiezers in https://developer. mozilla.org/en-US/docs/Web/CSS/Attribute_selectors


Antwoord 4, autoriteit 10%

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

ps. als je het exacte elementtype weet, voeg je de derde parameter toe (d.w.z.div, a, p ...etc...):

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

maar definieer eerst deze functie:

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. bijgewerkt per opmerkingen aanbevelingen.


Antwoord 5, autoriteit 4%

je zou getAttribute kunnen gebruiken:

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

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


Antwoord 6, autoriteit 3%

Hier is een voorbeeld, hoe afbeeldingen in een document te zoeken op src-attribuut:

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

Antwoord 7, autoriteit 2%

Gebruik zoekopdrachtkiezers, voorbeelden:

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

input[name]Voert elementen in met de eigenschap name.

[id|=view]Elementen met id die beginnen met view-.

[class~=button]Elementen met de klasse button.

Other episodes