querySelector是否有可能以某种方式匹配顶部元素?例如:
元素:
<div class="container">
<div>Something</div>
</div>
JavaScript:
const container = element.querySelector('.container');
这将不匹配任何内容,因为“容器”是顶部元素。有没有一种优雅的查询元素的方法,它不仅可以测试其子元素,还可以测试顶层元素?我说的是纯JavaScript。
答案 0 :(得分:1)
您可以测试选择器是否引用顶层,并使用条件表达式:
const container = element.matches(".container") ? element : element.querySelector(".container");
对于querySelectorAll,您可以执行以下操作:
const containers = [...(element.matches(".container") ? [element] : []), ...element.querySelectorAll(".container")];
这将返回一个数组,而不是NodeList
,但是对于大多数目的而言,区别并不重要。
答案 1 :(得分:1)
不太优雅,但是可以。 如果我们诉诸element.parentNode,我们将不能保证只定位元素。
//dummy up
const element = document.querySelector('.container');
const container = element.querySelector('.container');
const container2 = element.querySelector('.container')||(element.classList.contains('container')) ? element : null;
console.log(container);
console.log(container2);
<div class="container">
<div>Something</div>
</div>
const container = element.querySelector('.container');