如何從 HTMLDivElement 獲取匹配屬性的元素列表？

Question

這是一個示例源。

<div ref={this.mainRef}>
   <div>
      <ul>
         <li role="option" id="1">A</li>
         <li role="option" id="2">B</li>
         <li role="option" id="3">C</li>
         <li role="option" id="4">A</li>
         <li role="option" id="5">B</li>
         <li role="option" id="6">C</li>
      
      </ul>
   </div>
</div>

使用this.mainRef ，如何獲取與“role=option”屬性匹配的元素列表？

就像是..

const selectableOptions = this.mainRef.children.search(role=option)

• 我不想遍歷 DOM 樹，因為結構可能會改變。
• 我想改為“搜索”。

謝謝！

Answer 1

請在下面嘗試。

const divRef = useRef(null)

<div ref={divRef}>
   <div>
      <ul>
         <li role="option" id="1">A</li>
         <li role="option" id="2">B</li>
         <li role="option" id="3">C</li>
         <li role="option" id="4">A</li>
         <li role="option" id="5">B</li>
         <li role="option" id="6">C</li>
      
      </ul>
   </div>
</div>

const matches = divRef.current.querySelectorAll("li[role='option']");