Element: ariaActiveDescendantElement Eigenschaft

Wert

Eine Unterklasse von HTMLElement, die den aktiven Nachfolger repräsentiert, oder null, wenn es keinen aktiven Nachfolger gibt.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-activedescendant Attributs. Im Gegensatz zu aria-activedescendant muss das Element, das dieser Eigenschaft zugewiesen ist, nicht über ein id Attribut verfügen.

Die Eigenschaft spiegelt das aria-activedescendant Attribut des Elements wider, wenn es definiert ist, jedoch nur für id-Referenzwerte, die gültigen und im Gültigkeitsbereich befindlichen Elementen zugeordnet sind. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen über reflektierte Elementreferenzen und den Gültigkeitsbereich finden Sie unter Reflektierte Elementreferenzen im Reflektierte Attribute Leitfaden.

Beispiele

Den aktiven Nachfolger abrufen

Dieses Beispiel zeigt, wie ariaActiveDescendantElement verwendet werden kann, um den aktuell aktiven Nachfolger abzurufen.

HTML

Das HTML definiert eine Listbox zur Auswahl verschiedener Straßentypen, bestehend aus einem <div> Element mit der listbox Rolle und verschachtelten <div> Elementen für jede der Optionen. Der aktive Nachfolger ist anfänglich auf das Element mit id avenue mittels 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 untenstehende Code überprüft zuerst, ob ariaActiveDescendantElement unterstützt wird. Wenn die Eigenschaft unterstützt wird, protokolliert der Code den Wert von aria-activedescendant (die id des referenzierten Elements) mit Element.getAttribute(), dem Eigenschaftselement und dem Textinhalt des Elements.

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 aria-activedescendant Eigenschaft zurückgegebene Wert sollte "avenue" sein, das zugehörige Element sollte ein HTMLDivElement Element sein, und der Text in diesem Element sollte Avenue sein.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-activedescendant Attribut
• ElementInternals.ariaActiveDescendantElement
• Reflektierte Elementreferenzen im Attribut-Reflexion Leitfaden.