JavaScript/DOM/Element/getAttributeNode

Die Methode Element.getAttributeNode „holt“ einen Attributknoten und liefert das Knotenobjekt des gewünschten Attributs zurück.

Syntax

var attrNode = element.getAttributeNode(attrName);

• attrName: Name des Attributs ( als Zeichenkette)
• attrNode: Attributknoten für das Attribut

Anwendungsbeispiel

Beispiel ansehen …

  function init() {
    var button = document.getElementById('button');
    button.addEventListener('click',anpassen);	
  }
  
  function anpassen() { 
    var elem = document.querySelector('#box'),
        attr = elem.getAttributeNode('aria-hidden').value;
    document.getElementById('ausgabe').textContent = attr;
    var hidden = (elem.getAttribute('aria-hidden') == 'false' || false)? true : false ;
    elem.setAttribute('aria-hidden', hidden);
  }

Durch einen Klick auf den Button wird die Funktion anpassen aufgerufen.
Dort wird mit querySelector das Element mit dem Selektor #box identifiziert und mit getAttributeNode('aria-hidden').value der Attributknoten mit dem Namen aria-hidden und sein Wert ausgelesen. Das Aria-Attribut aria-hidden hilft Screenreadern Zustände wie ein- oder aufgeklappt oder hier versteckt oder sichtbar deutlich zu machen.

Mit textContent wird der Wert ausgegeben. Anschließend wird der Wert mithilfe eines ternären Operators getoggelt:
(elem.getAttribute('aria-hidden') == 'false' || false)? true : false ;

Über CSS wird die Box ein- bzw. ausgeblendet.

Beachten Sie: Die Methode getAttributeNode() werden Sie selten brauchen. In den meisten Fällen können Sie getAttribute() verwenden, das sich einfacher handhaben lässt.

Weblinks

• W3C: Document Object Model Core getAttributeNode
• MDN: Element.getAttributeNode