可以访问HTMLCollection的子元素

Question

您如何获得HTMLCollection的子元素下的子元素？

我的代码在console.log(iframeContent);返回以下内容。我想访问下面突出显示的孩子，并循环/询问他们。

下面的完整代码：

function getPageStructure() {
  const iframe = document.getElementById('builder-showcase');
  const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  const iframeContent = iframeDocument.getElementsByTagName('body')[0].children;
  console.log(iframeContent);
}

尝试了以下方法：

console.log(iframeContent.children);
console.log(iframeContent[0].children);

但在两者上均收到未定义的错误消息。

Answer 1

const iframeContent = iframeDocument.getElementsByTagName('body')[0].children;

已经抢过.children，因此无法登录console.log(iframeContent.children);。

改为使用console.log(iframeContent)。

如果console.log(iframeContent)获得包含子元素的数组，则可以使用console.log(iframeContent[0])，反之亦然，以选择div内的iframeContent元素。

您还可以使用iframeContent.forEach(child => console.log(child))记录iframeContent的所有子项。