可以访问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的所有子级。