如何查找容器内所有匹配指定选择器的元素 含iframe内部符合要求的元素

主页面的DOM查询方法（包括querySelectorAll和jQuery的选择器）默认只能查询当前文档的DOM树，iframe属于独立的浏览上下文，内部DOM和主页面DOM是隔离的，所以直接查询不会返回iframe内部的元素。
注意：该方案仅适用于iframe和主页面同源的场景，跨源iframe受浏览器安全策略限制，无法访问内部DOM内容。

原生JavaScript实现 #

function getTabbableElements(containerSelector) {
  const tabbableSelector = '[tabindex="0"],a,input,select,button';
  const container = document.querySelector(containerSelector);
  // 先获取主容器内符合条件的元素，转为数组方便合并
  let result = Array.from(container.querySelectorAll(tabbableSelector));

  // 遍历容器内所有iframe
  const iframes = container.querySelectorAll('iframe');
  iframes.forEach(iframe => {
    try {
      // 兼容不同浏览器的iframe文档获取方式
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      // 查询iframe内符合条件的元素并合并
      const iframeElements = Array.from(iframeDoc.querySelectorAll(tabbableSelector));
      result = result.concat(iframeElements);
    } catch (err) {
      // 跨源iframe会抛出权限错误，可按需处理
      console.warn('无法访问跨源iframe：', err);
    }
  });

  return result;
}

// 调用示例，返回的数组就是符合要求的所有元素
const targetElements = getTabbableElements('#container');

jQuery实现 #

function getTabbableElementsWithJQ(containerSelector) {
  const tabbableSelector = '[tabindex="0"],a,input,select,button';
  let $result = $(containerSelector).find(tabbableSelector);

  // 遍历所有iframe
  $(containerSelector).find('iframe').each(function() {
    try {
      const iframeDoc = this.contentDocument || this.contentWindow.document;
      const $iframeElements = $(iframeDoc).find(tabbableSelector);
      // 合并jQuery对象
      $result = $result.add($iframeElements);
    } catch (err) {
      console.warn('无法访问跨源iframe：', err);
    }
  });

  return $result;
}

// 调用示例
const $targetElements = getTabbableElementsWithJQ('#container');

• 若iframe为动态加载，需监听iframe的load事件触发后再执行查询，避免iframe内部DOM未渲染完成导致查询结果缺失
• 如果存在多层嵌套的iframe，可将查询逻辑改造为递归，遍历所有层级的iframe即可覆盖所有嵌套场景
• 跨源场景下无法通过前端JS直接获取iframe内部元素，需要通过postMessage和iframe内部页面通信配合才能拿到对应元素信息

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