使用 querySelector 以 select Div 具有特定值

Question

我目前的 HTML 看起来像这样：

<div id="response-view">
  <div class="answer" correct="false">
    <h4>apple</h4>
  </div>
  <div class="answer" correct="false">
    <h4>banana</h4>
  </div>
  <div class="answer" correct="true">
    <h4>pear</h4>
  </div>
</div>

使用 JavaScript querySelector，我将如何选择具有 'correct' 值 'true' 的特定 'answer' Div？

Answer 1

您可以 select 通过属性和属性值使用方括号的节点，例如tag.class[attribute="value"].

使用上面代码的工作示例，应该将 "Pear" 记录到控制台：

console.log(document.querySelector('.answer[correct="true"]').textContent);

<div id="response-view">
  <div class="answer" correct="false">
    <h4>apple</h4>
  </div>
  <div class="answer" correct="false">
    <h4>banana</h4>
  </div>
  <div class="answer" correct="true">
    <h4>pear</h4>
  </div>
</div>

使用 querySelector 以 select Div 具有特定值

Using querySelector to select Div with a specific value

html

javascript

selector