Element: ariaActiveDescendantElement Eigenschaft

Wert

Eine Unterklasse von HTMLElement, die den aktiven Nachfahren repräsentiert, oder null, wenn kein aktiver Nachfahre existiert.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-activedescendant-Attributs. Im Gegensatz zu aria-activedescendant muss das einem Element zugewiesene Objekt kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-activedescendant-Attribut eines Elements wider, wenn es definiert ist, jedoch nur für Referenz-id-Werte, die gültigen im Geltungsbereich befindlichen Elementen entsprechen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen zu referenzierten Elementeigenschaften und Geltungsbereichen finden Sie unter Reflektierte Elemente-Referenzen im Reflektierte Attribute-Leitfaden.

Beispiele

Den aktiven Nachfahren abrufen

Dieses Beispiel zeigt, wie ariaActiveDescendantElement verwendet werden kann, um den aktuellen aktiven Nachfahren zu bekommen.

HTML

Das HTML definiert eine Listbox zur Auswahl verschiedener Straßenarten, bestehend aus einem <div>-Element mit der listbox-Rolle und verschachtelten <div>-Elementen für jede der Optionen. Der aktive Nachfahre wird zunächst auf das Element mit id avenue unter Verwendung von aria-activedescendant gesetzt.

<div id="streetType" role="listbox" aria-activedescendant="avenue">
  <div>Street</div>
  <div id="avenue">Avenue</div>
  <div>Lane</div>
</div>

<pre id="log"></pre>

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Der unten stehende Code überprüft zuerst, ob ariaActiveDescendantElement unterstützt wird. Wenn die Eigenschaft unterstützt wird, gibt der Code dann den Wert von aria-activedescendant (die id des referenzierten Elements) unter Verwendung von Element.getAttribute(), das Eigenschaftselement und den Textinhalt des Elements aus.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

// Feature test for ariaActiveDescendantElement
if ("ariaActiveDescendantElement" in Element.prototype) {
  log(`getAttribute(): ${streetType.getAttribute("aria-activedescendant")}`);
  log(`ariaActiveDescendantElement: ${streetType.ariaActiveDescendantElement}`);
  log(`text: ${streetType.ariaActiveDescendantElement?.textContent.trim()}`);
} else {
  log("ariaActiveDescendantElement not supported by browser");
}

Ergebnis

Das untenstehende Protokoll zeigt die Ausgabe des obigen Codes. Der von der Eigenschaft aria-activedescendant zurückgegebene Wert sollte "avenue" sein, das zugeordnete Element sollte ein HTMLDivElement-Element sein, und der Text in diesem Element sollte Avenue lauten.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-activedescendant-Attribut
• ElementInternals.ariaActiveDescendantElement
• Reflektierte Elemente-Referenzen im Attribute reflection-Leitfaden.