Element: ariaOwnsElements-Eigenschaft

Wert

Ein Array von Unterklassen von HTMLElement.

Beim Lesen ist das zurückgegebene Array statisch und schreibgeschützt. Beim Schreiben wird das zugewiesene Array kopiert: nachfolgende Änderungen am Array beeinflussen den Wert der Eigenschaft nicht.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-owns-Attributs, um den Besitz eines Elements anzuzeigen. Im Gegensatz zu aria-owns müssen die Elemente, die dieser Eigenschaft zugewiesen sind, kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-owns-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete Referenz-id-Werte, die mit gültigen In-Scope-Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Weitere Informationen zu reflektierten Elementreferenzen und dem Geltungsbereich finden Sie unter Reflektierte Elementreferenzen im Reflektierte Attribute-Leitfaden.

Beispiele

Holen des besessenen Elements

Dieses Beispiel zeigt, wie das aria-owns-Attribut und die Eigenschaft verwendet werden.

Der Code definiert ein Menü und das zugehörige Untermenü in separaten und nicht verschachtelten <div>-Elementen. Da diese Elemente nicht verschachtelt sind, wird die Besitzbeziehung zwischen dem Menü und dem Untermenü nicht vom DOM erfasst. Hier stellen wir diese Informationen für unterstützende Tools mithilfe des aria-owns-Attributs bereit, obwohl wir es auch mithilfe der reflektierten Eigenschaft tun könnten.

Beachten Sie, dass wir ein Menü konstruieren könnten, bei dem das Untermenü verschachtelt ist: das Beispiel wurde konstruiert, um es einfacher zu machen, einen Fall zu demonstrieren, bei dem die Beziehung definiert werden muss.

HTML

Das HTML definiert <div>-Elemente für das Menü mit id=parentMenu und das Untermenü mit id="subMenu1". Wir haben ein <div> dazwischen hinzugefügt, um noch deutlicher zu machen, dass im DOM kein direktes Besitzmodell definiert ist.

Das übergeordnete Menü-<div> enthält das Attribut aria-owns="subMenu1", um diese Besitzbeziehung zu erstellen.

<div class="menu" id="parentMenu" role="menubar" aria-owns="subMenu1">
  Top level menu (hover over)
</div>

<div>Some other element</div>

<div class="submenu" id="subMenu1" role="menu">
  <a href="#" role="menuitem">Menu item 1</a>
  <a href="#" role="menuitem">Menu item 2</a>
  <a href="#" role="menuitem">Menu item 3</a>
</div>

CSS

Das CSS gestaltet das Menü und das Untermenü und zeigt das Untermenü an, wenn das Menü überfahren wird.

.menu {
  position: relative;
  display: inline-block;
  color: purple;
}

.submenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 6px 14px 0px rgb(0 0 0 / 0.2);
  z-index: 1;
  top: 20px;
  left: 0;
}

.menu:hover ~ .submenu {
  display: block;
}

.submenu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.submenu a:hover {
  background-color: #f1f1f1;
}

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

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

JavaScript

Der Code überprüft zunächst, ob ariaOwnsElements unterstützt wird. Falls ja, protokollieren wir das Attribut, die Elemente in der Eigenschaft und den id-Wert für jedes Element.

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

// Feature test for ariaOwnsElements
if ("ariaOwnsElements" in Element.prototype) {
  const parentMenu = document.querySelector("#parentMenu");
  log(`parentMenu.getAttribute(): ${parentMenu.getAttribute("aria-owns")}`);
  log(`parentMenu.ariaOwnsElements: ${parentMenu.ariaOwnsElements}`);
  parentMenu.ariaOwnsElements?.forEach((elem) => {
    log(`  id: ${elem.id}`);
  });
} else {
  log("element.ariaOwnsElements: not supported by browser");
}

Ergebnis

Das Ergebnis der Ausführung des Codes ist unten gezeigt. Das Protokoll zeigt, dass die durch das aria-owns-Attribut definierte Beziehung in der ariaOwnsElements-Eigenschaft widergespiegelt wird (Elemente im Array entsprechen den Attribut-Elementreferenzen).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-owns-Attribut
• ElementInternals.ariaOwnsElements
• Reflektierte Elementreferenzen im Attribute reflection-Leitfaden.