javascript - 如何检查 CSS 选择器是否在同一 HTML 标记行上

Question

在不使用 document.querySelector 或 document.querySelectorAll 的情况下，如何检查 CSS 选择器是否在同一 HTML 行上。

let tag = "div";
let id = "some_id"
let classs = "another_class"

if (document.getElementsByTagName(CSS.escape(tag)) || document.getElementById(CSS.escape(id)) || document.getElementsByClassName(CSS.escape(classs))) {
  console.log("cool");
} else {
  console.log("not cool");
}

<div id="some_id" class="some_class some_other_class"></div>
<img class="another_class"></img>

它应该返回 not cool 因为 CSS 选择器不在同一行，而如果我使用选择器 div#some_id.some_class，它会返回 酷。

Answer 1

首先解析 ID，因为它是唯一的，然后将其他资格与其进行比较。

let tag = "div";
let id = "some_id"
let classs = "another_class";

let idMatch = document.getElementById(CSS.escape(id));

if (idMatch &&
    idMatch.tagName == tag.toUpperCase() &&
    idMatch.classList.contains(classs) ) {
  console.log("cool");
} else {
  console.log("not cool");
}

<div id="some_id" class="some_class some_other_class"></div>
<img class="another_class"></img>