JavaScript:querySelector-也匹配顶部元素

时间:2019-05-10 17:34:15

标签: javascript html

querySelector是否有可能以某种方式匹配顶部元素?例如:

元素:

<div class="container">
    <div>Something</div>
</div>

JavaScript:

const container = element.querySelector('.container');

这将不匹配任何内容,因为“容器”是顶部元素。有没有一种优雅的查询元素的方法,它不仅可以测试其子元素,还可以测试顶层元素?我说的是纯JavaScript。

2 个答案:

答案 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');