如何从 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']");