Element: ariaOwnsElements 屬性
Element 介面的 ariaOwnsElements 屬性是一個數組，其中包含定義應用到父元素及其子元素之間的視覺、功能或上下文關係的元素。當 DOM 層級結構無法用於表示這種關係，並且輔助技術無法直接獲取時，就會使用此屬性。
aria-owns 主題包含了關於屬性和屬性如何使用的更多資訊。
值
HTMLElement 的子類陣列。
讀取時，返回的陣列是靜態的且只讀的。寫入時，將複製分配的陣列：之後對陣列的更改不會影響屬性的值。
描述
此屬性是使用 aria-owns 屬性來指示元素所有權的一種靈活的替代方案。與 aria-owns 不同，分配給此屬性的元素不必具有 id 屬性。
當定義了 aria-owns 屬性時，此屬性會反映該屬性的值，但僅限於匹配有效作用域內元素的已列出的引用 id 值。如果設定了此屬性，則相應的屬性會被清除。有關反映的元素引用和作用域的更多資訊，請參閱反映的屬性指南中的 反映的元素引用。
示例
獲取被擁有的元素
此示例演示了 aria-owns 屬性和屬性的用法。
該程式碼在單獨且非巢狀的 <div> 元素中定義了一個選單及其關聯的子選單。由於這些元素沒有巢狀，DOM 無法捕捉選單和子選單之間的所有權關係。在這裡，我們透過 aria-owns 屬性將此資訊提供給可訪問性工具，但也可以透過反映的屬性來實現。
請注意，我們可以構建一個子選單巢狀在其中的選單：該示例是為了方便演示需要定義關係的場景而刻意設計的。
HTML
HTML 定義了選單的 <div> 元素，其中 id=parentMenu，子選單的 id="subMenu1"。我們在中間添加了一個 <div>，以便更清楚地表明 DOM 中沒有定義直接的所有權模型。
父選單 <div> 包含屬性 aria-owns="subMenu1" 來建立此所有權關係。
<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
CSS 為選單和子選單設定樣式，並在滑鼠懸停在選單上時顯示子選單。
.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;
}
JavaScript
程式碼首先檢查 ariaOwnsElements 是否受支援。如果受支援，我們將記錄該屬性、屬性中的元素以及每個元素的 id 值。
// 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");
}
結果
執行程式碼的結果如下所示。日誌顯示，使用 aria-owns 屬性定義的關係已反映在 ariaOwnsElements 屬性中（陣列中的元素與屬性元素引用匹配）。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # dom-ariamixin-ariaownselements |
瀏覽器相容性
載入中…
另見
aria-owns屬性ElementInternals.ariaOwnsElements- Attribute reflection 指南中的Reflected element references。