循环遍历 iframe 中的 HTML 元素集合 [重复]

Question

我想遍历 iframe 中的一组 HTML 元素并找出一组元素在屏幕上出现的顺序，然后在其后面创建一个新列表。

我在const tempPageStructure = builderShowcase.frameElement.contentDocument["all"]; 获得 iframe div。

目前，我想不通，如何检索上面看到的元素标签名称，运行下面的脚本在console.log(tempPageStructure[i].name);返回null。

const activeComponents = ['app-builder-navbar', 'app-builder-hero', 'app-builder-placeholder'];
const builderShowcase = $(builderShowcaseId).get(0).contentWindow;

function getPageStructure() {
  const tempPageStructure = builderShowcase.frameElement.contentDocument["all"];
  let pageStructure = [];
  for(let i = 0; i < tempPageStructure.length; i++) {
    console.log(tempPageStructure[i].name);
    for(let j = 0; j < activeComponents.length; j++) {
      if(tempPageStructure[i].name === activeComponents[j]) {
        pageStructure.push(tempPageStructure[i])
      }
    }
  }
  console.log(tempPageStructure);
  console.log(pageStructure);
  return pageStructure;
}

Answer 1

将tempPageStructure.name 替换为tempPageStructure.tagName

const activeComponents = ['app-builder-navbar', 'app-builder-hero', 'app-builder-placeholder'];
const builderShowcase = $(builderShowcaseId).get(0).contentWindow;

function getPageStructure() {
  const tempPageStructure = builderShowcase.frameElement.contentDocument["all"];
  let pageStructure = [];
  for(let i = 0; i < tempPageStructure.length; i++) {
    console.log(tempPageStructure[i].tagName);
    for(let j = 0; j < activeComponents.length; j++) {
      if(tempPageStructure[i].tagName === activeComponents[j]) {
        pageStructure.push(tempPageStructure[i])
      }
    }
  }
  console.log(tempPageStructure);
  console.log(pageStructure);
  return pageStructure;
}