获取具有给定标记名称的所有直接子元素?仅限本机 JS

Question

请不要使用JQuery。

我很惊讶没有找到这个问题的答案。我可能会被"欺骗"。

问题是只获取具有给定标签名称(例如 DIV(的直接子元素，因此getElementsByTagName不起作用：这将返回具有该标签名称的所有后代。

这里有一个好看的答案，使用querySelectorAll()：

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

。但我所做的只是动态创建一个元素 (DIV(，并使其innerHTML等于fetchHTML 文件的内容。这样做的结果是使 BODY 的子元素成为所创建元素的子元素。

所以它没有 ID 或类，甚至不在 DOM 树中。我当然可以迭代...但谁想在2020年迭代！荒谬。那我怎么说呢：

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

...？

编辑

尝试了Barmerfilter的想法：

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

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

。我认为上面的childEls(类 HTMLCollection(是那些"类数组"对象之一。所以我相信你必须这样做：

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

。哪个工作...但实际上，是迭代。喝倒彩。

Answer 1

非IE解决方案：

使用伪类:scope

：scope CSS 伪类表示作为引用的元素 选择器匹配的点。

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

IE 解决方案：

我们需要使HTMLCollection对象成为过滤HTMLCollection对象的Array.prototype.filter范围。这可以通过call、apply或bind来实现。

使用呼叫：

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

使用应用：

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

使用绑定：

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