使用 querySelector 选择具有特定值的 Div

【问题标题】：Using querySelector to select Div with a specific value使用 querySelector 选择具有特定值的 Div
【发布时间】：2018-09-22 18:31:22
【问题描述】：

我当前的 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，我将如何选择具有“正确”值“true”的特定“答案”Div？

【问题讨论】：

您应该使用语法正确的data-* 属性。例如。 data-correct="true"

标签： javascript html selector

【解决方案1】：

您可以通过使用方括号的属性和属性值来选择节点，例如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>

【讨论】：