时间戳

首页 > 解决方案 > 同时基于class和ID的querySelector条件

javascript - 同时基于class和ID的querySelector条件

问题描述

在这个 HTML 代码中：


      <div class="modal__actions">
        <button class="btn btn--passive">Cancel</button>
        <button class="btn btn--success">Add</button>
      </div>
    
    <div class="modal" id="delete-modal">
      <h2 class="modal__title">Are you sure?</h2>
      <p class="modal__content">
        Are you sure you want to delete this item? This action can't be made
        undone!
      </p>
      <div class="modal__actions">
        <button class="btn btn--passive">No (Cancel)</button>
        <button class="btn btn--danger">Yes</button>
      </div>
    </div>

我正在尝试访问： <button class="btn btn--passive">No (Cancel)</button> item ，我知道有不同的方法，但我正在尝试使用 querySelector，我尝试了这些命令，但没有一个选择我正在寻找的内容：

const r1=document.querySelector('#delete-modal .btn btn--passive')
const r2=document.querySelector('#delete-modal, .btn btn--passive')
const r3=document.querySelector('.btn btn--passive, #delete-modal ')

不能在 querySelector 上同时使用 class 和 ID 吗？

标签： javascriptdomqueryselector

解决方案

你不应该在类之间有任何空间btn，btn--passive因为它们是相同的元素。此外，您应该为所有类添加类符号的前缀：

const r1=document.querySelector('#delete-modal .btn.btn--passive');
console.log(r1);
<div class="modal__actions">
    <button class="btn btn--passive">Cancel</button>
    <button class="btn btn--success">Add</button>
  </div>

<div class="modal" id="delete-modal">
  <h2 class="modal__title">Are you sure?</h2>
  <p class="modal__content">
    Are you sure you want to delete this item? This action can't be made
    undone!
  </p>
  <div class="modal__actions">
    <button class="btn btn--passive">No (Cancel)</button>
    <button class="btn btn--danger">Yes</button>
  </div>
</div>

推荐阅读