Блог

Главная - Вопросы по программированию - как получить список элементов, соответствующих атрибуту из HTMLDivElement?

как получить список элементов, соответствующих атрибуту из HTMLDivElement?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Это пример источника.

 <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)
  • Я не хочу просматривать дерево DOMs, потому что структура может измениться.
  • Вместо этого я хотел бы выполнить «поиск».

Спасибо!

Комментарии:

1. Что не так с querySelectorAll ( developer.mozilla.org/en-US/docs/Web/API/Document /… )?

2. Можем ли мы сделать это с помощью react way ..?

3. В «react way» вам не следует делать что-то подобное. В чем именно проблема?

4. способ реагирования — не пытаться манипулировать dom вручную, попробуйте найти способ манипулировать только состоянием и данными, которые использует этот элемент, мы более подробно расскажем о том, что вы хотите сделать, чтобы обеспечить способ реагирования

Ответ №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']");