Element:ariaActiveDescendantElement 屬性
Element 介面的 ariaActiveDescendantElement 屬性表示當焦點位於 composite 部件、combobox、textbox、group 或 application 上時的當前活動元素。
有關該屬性和特性的用法,請參閱 aria-activedescendant 主題。
值
HTMLElement 的一個子類,表示活動後代,如果沒有活動後代則為 null。
描述
該屬性是使用 aria-activedescendant 屬性的一個靈活替代方案。與 aria-activedescendant 不同,分配給此屬性的元素不必具有 id 屬性。
該屬性會反映元素 aria-activedescendant 屬性(當其已定義時),但僅限於匹配有效作用域內元素的引用 id 值。如果設定了該屬性,則會清除相應的屬性。有關反射元素引用和作用域的更多資訊,請參閱 Reflected attributes 指南中的 Reflected element references。
示例
獲取活動後代
此示例展示瞭如何使用 ariaActiveDescendantElement 來獲取當前的活動後代。
HTML
HTML 定義了一個列表框,用於選擇不同型別的街道,它由一個具有 listbox role 的 <div> 元素以及每個選項的巢狀 <div> 項組成。活動後代最初透過 aria-activedescendant 設定為 id 為 avenue 的元素。
<div id="streetType" role="listbox" aria-activedescendant="avenue">
<div>Street</div>
<div id="avenue">Avenue</div>
<div>Lane</div>
</div>
JavaScript
下面的程式碼首先檢查 ariaActiveDescendantElement 是否受支援。如果屬性受支援,程式碼將使用 Element.getAttribute() 記錄 aria-activedescendant 的值(被引用元素的 id)、屬性元素及其文字內容。
// 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");
}
結果
下面的日誌顯示了上述程式碼的輸出。從 aria-activedescendant 屬性返回值應為 "avenue",關聯的元素應為 HTMLDivElement 元素,該元素中的文字應為 Avenue。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # dom-ariamixin-ariaactivedescendantelement |
瀏覽器相容性
載入中…
另見
aria-activedescendant屬性ElementInternals.ariaActiveDescendantElement- Attribute reflection 指南中的Reflected element references。