JavaScript/DOM/Element/getAttributeNode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

var attrNode = element.getAttributeNode(attrName);

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

[Bearbeiten] 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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML