如何遍历iframe中HTML元素并获取自定义元素标签名？

看起来你遇到的核心问题有两个：一是无法正确获取自定义元素的标签名，二是需要按屏幕显示顺序整理元素列表。我来帮你一步步解决：

1. 为什么name属性返回null？ #

element.name获取的是HTML元素的name属性（比如<input name="username">里的name值），而你要找的是自定义元素的标签名（比如app-builder-navbar）。要获取标签名，应该用这两个属性：

• element.localName：返回小写的标签名（和你activeComponents里的格式完全匹配）
• element.tagName：返回大写的标签名（需要转成小写再匹配）

你代码里的判断条件用错了属性，这就是为什么一直返回null的原因。

2. 如何按屏幕显示顺序排序元素？ #

contentDocument.all返回的是DOM中所有元素的集合，顺序是它们在DOM树中的出现顺序，但这个顺序不一定等于视觉上的显示顺序（比如用了Flex、Grid或绝对定位布局时）。要得到视觉顺序，我们可以通过getBoundingClientRect()获取元素在视口中的坐标，然后按top（垂直位置）和left（水平位置）排序。

修改后的完整代码 #

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

function getPageStructure() { 
  // 获取iframe内的所有元素
  const tempPageStructure = builderShowcase.frameElement.contentDocument.all; 
  let pageStructure = []; 

  // 第一步：筛选出目标自定义元素
  for(let i = 0; i < tempPageStructure.length; i++) { 
    const element = tempPageStructure[i];
    // 用localName获取小写标签名，和activeComponents匹配
    if(activeComponents.includes(element.localName)) { 
      pageStructure.push(element);
    } 
  } 

  // 第二步：按屏幕显示顺序排序（先按垂直top，再按水平left）
  pageStructure.sort((a, b) => {
    const rectA = a.getBoundingClientRect();
    const rectB = b.getBoundingClientRect();
    // 先比较top坐标，top相同则比较left
    if(rectA.top !== rectB.top) {
      return rectA.top - rectB.top;
    } else {
      return rectA.left - rectB.left;
    }
  });

  console.log('筛选后的元素列表', pageStructure); 
  return pageStructure; 
}

额外提示 #

• 如果你的自定义元素可能嵌套在其他元素中，contentDocument.all依然能正确获取到它们，因为它是递归遍历所有元素的集合。
• 如果你只需要直接子元素（而非所有后代），可以改用contentDocument.body.children来遍历，效率会更高。

内容的提问来源于stack exchange，提问作者methuselah