时间戳

首页 > 解决方案 > querySelector 不使用类但使用 id

javascript - querySelector 不使用类但使用 id

问题描述

我有以下html块：

    <a class="item">
      <i class="sign out icon" id="out1"></i>
      <span class="text out" id="out2">Sign out</span>
    </a>

如果单击其中的任何元素，我需要触发一个动作a，当我使用这些项目时，下面的代码工作正常id：

document.querySelector("#out1, #out2").onclick = function(e) {}

但是当我尝试这些项目时，以下内容不起作用class：

document.querySelector(".sign .out .icon, .text .out").onclick = function(e) {}

我试图通过以下方式使其变得简单，但效果不佳：

document.querySelectorAll(".out").onclick = function(e) {}

标签： javascript

解决方案

document.querySelector像css选择器一样工作，会在里面的元素中document.querySelector('.sign .out .icon')查找类的元素，如果删除空格，它应该可以正常工作：icon.out.sign

document.querySelector(".sign.out.icon, .text.out").onclick = function(e) {}

请记住，这querySelector将返回第一个匹配项，因此选择器字符串中的逗号并没有多大用处，MDN：

Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

document.querySelectorAll返回一个节点列表，您必须遍历它并处理onclick或访问第一个元素[0]：

document.querySelectorAll(".out")[0].onclick = function(e) {}


const a = document.querySelector(".sign .out .icon, .text .out");
const b = document.querySelector(".sign.out.icon, .text.out");

console.log({a, b});

const c = document.querySelectorAll(".out");

console.log(c[0]);
<a class="item">
  <i class="sign out icon" id="out1"></i>
  <span class="text out" id="out2">Sign out</span>
</a>

要为 添加监听器ALL，则forEach可以如下使用：

var out = document.querySelectorAll(".out");

out.forEach((e) => {
  e.onclick = function(e) {
    fetch('http://localhost:8000/logout')
      .then(window.location.reload(true));
  };
});

推荐阅读