获取所有带有给定标签名的直接子元素？只适用于本地JS

Question

请不要用JQuery。

我很惊讶没有找到答案。我可能会 "上当受骗"。

问题是只得到 即时 子元素的标签名(如DIV)，所以...。getElementsByTagName 不起作用：这将返回带有该标签名的所有子孙。

有一个漂亮的答案 此处，使用 querySelectorAll():

const childDivs = document.querySelectorAll('#xyz > div');

...但我所做的只是在飞行过程中创建一个元素（DIV），并使它的 innerHTML 相当于 fetch'd的HTML文件。这样做的后果是使BODY的子元素成为创建元素的子元素。

所以它没有ID或类，甚至不在DOM树中。当然，我可以迭代......但谁愿意在2020年迭代呢! 荒谬的。所以我怎么可能说......？

const childDivs = container.querySelectorAll('ME > DIV');

...?

编辑

有一个去与 filter 巴莫的想法。

const childEls = container.children
function checkDiv( el ){
    return el.tagName === 'DIV'
}
const childDivs = childEls.filter( checkDiv )

错误： "childEls.filter不是一个函数"

... 我想... childEls (类 HTMLCollection)上面是那种 "类似Array "的对象。所以我相信你必须这样做。

const childEls = container.children
const newArr = Array.prototype.slice.call( childEls );
const childDivs = newArr.filter( function( el ){ return el.tagName === 'DIV' }  )

...这样做是可行的... 但事实上，这是迭代。Boo.

Answer 1

一个非IE的解决方案。

使用 :scope 伪类

:scope CSS伪类代表的元素，是选择器匹配的参考点。

const childDivs = container.querySelectorAll(':scope > div')

一个IE的解决方案。

我们需要将 HTMLCollection 对象的范围 Array.prototype.filter 筛选 HTMLCollection 对象。这可以通过以下方式实现 call,apply 或 bind.

使用调用： :

const childDivs = Array.prototype.filter.call(childEls,checkDiv );

使用Apply:

const childDivs = Array.prototype.filter.apply(childEls,[checkDiv] );

使用 Bind:

const childDivs = Array.prototype.filter.bind(childEls)(checkDiv);