Javascript：关于elem.closest（）的逻辑

Question

当我将多个标签名称和类名称放在elem.closest（）的括号中时，如下所示

table.onclick = function(event) {  
      let target = event.target.closest('.none-class,none-elem,td,.none-class2,none-elem2'); 
      console.log(target);
}

即使除了'td'元素之外的类和标签不存在。它总是返回'td'元素。据我所知，“CSS选择器规则”，如果元素用逗号分隔，则表示“和”，因此它“选择所有元素”。这里的逗号表示'或'。有人能告诉我'elem.closest（）'的工作原理吗？

Answer 1

.closest()将搜索祖先并返回与选择器对应的第一个。

逗号表示OR。所以你的选择器如下：

给我第一个祖先：

• 有“非等级”类OR
• 是自定义HTML标记<none-elem> OR
• 是一个HTML标签<td>或
• 有“无类2”级OR
• 是自定义HTML标记<none-elem2>

因此，您最近的祖先对应于选择器中的第三条规则。

如果你想用AND写一个选择器，你必须写一些像td.none-class2或none-elem.none-class。注意点之前没有空格

Answer 2

closest()函数中没有css选择器的特殊含义。 css选择器中的逗号实际上总是在逻辑意义上表示OR。所以规则将匹配以下任何一个：

.none-class
none-elem
td
.none-class2
...

如果你想要它匹配，例如。仅当td具有.none-class时，才使用：

td.none-class 

作为选择器。阅读有关css选择器的更多信息。