web-dev-qa-db-de.com

HTML-Elemente anhand ihrer Attributnamen abrufen

In JavaScript stehen Methoden zur Verfügung, um HTML-Elemente mit ihrer ID, Klasse und Tag abzurufen.

document.getElementByID(*id*);
document.getElementsByClassName(*class*);
document.getElementsByTagName(*tag*);

Gibt es eine Methode, um die Elemente anhand des Attributnamens abzurufen.

EX: 

<span property="v:name">Basil Grilled Tomatoes and Onions</span>

Mögen:

document.getElementsByAttributeName("property");
javascripthtmldom
39
Saurabh Saxena

Ja, aber es ist nicht in allen Browsern vorhanden. Alte Versionen von Internet Explorer (d. H. Vor Version 8) unterstützen dies nicht. Die Funktion ist querySelectorAll (oder querySelector für ein einzelnes Element), wodurch Sie CSS-Selektoren zum Suchen von Elementen verwenden können.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property=value]'); // All with "property" set to "value" exactly.

(Vollständige Liste der Attributselektoren in MDN.)

Dadurch werden alle Elemente mit der Attributeigenschaft gefunden. Es ist besser, wenn möglich einen Tag-Namen anzugeben:

document.querySelectorAll('span[property]');

Sie können dies ggf. umgehen, indem Sie alle Elemente auf der Seite durchlaufen und feststellen, ob sie das Attribut festgelegt haben:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.Push(els[i]);
    }
}

Bibliotheken wie jQuery erledigen das für Sie: Es ist wahrscheinlich eine gute Idee, sie das schwere Heben zu überlassen.

63
lonesomeday

In jQuery ist das so:

$("span['property'=v:name]"); // for selecting your span element
2
IceMan

Nur noch eine Antwort

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    function(el) {return el.getAttribute('property') == 'v.name';}
);

In der Zukunft

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    (el) => el.getAttribute('property') == 'v.name'
)
1
Fabio Montefuscolo

Ich denke, Sie möchten einen Blick auf jQuery werfen, da diese Javascript-Bibliothek eine Menge Funktionen bietet, die Sie möglicherweise in dieser Art von Fällen verwenden möchten. In Ihrem Fall könnten Sie eine hasAttribute-Methode schreiben (oder eine im Internet finden), wie es so ist (nicht getestet):

$.fn.hasAttribute = function(tagName, attrName){
  var result = [];
  $.each($(tagName), function(index, value) { 
     var attr = $(this).attr(attrName); 
     if (typeof attr !== 'undefined' && attr !== false)
        result.Push($(this));
  });
  return result;
}
0
Bas Slagter