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>

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

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>

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

1 个答案: