如何解决无法通过document.querySelector查询<object>嵌入的SVG内部元素问题

核心原因 #

你直接调用document.querySelector查不到是因为<object>加载的SVG是独立的外部文档上下文，不属于当前主页面的DOM树，document对象对应的是主页面文档，自然查不到嵌套在object内部的SVG元素。
Chrome开发者工具里点击展开元素层级后能查到，是因为该操作会自动将控制台的执行上下文从主页面（top）切换到了object内部的SVG文档，此时你调用的document.querySelector实际是在SVG独立文档上执行，和你点不展开DOM结构没有关系，本质是执行上下文变了。

正确实现方式 #

不需要所谓的“主动展开”操作，只要拿到object内部的SVG文档对象，在该对象上执行查询即可，步骤如下：

1. 首先给你的object标签加个id便于选择，示例：

<object id="mySvgObj" data="example.svg" type="image/svg+xml"></object>

2. 监听object的load事件，确保SVG资源加载完成后再操作，加载完成后通过contentDocument属性拿到内部SVG的文档对象，再执行查询：

const svgObject = document.querySelector('#mySvgObj');

svgObject.addEventListener('load', function() {
  // 拿到SVG独立文档对象
  const svgDocument = svgObject.contentDocument;
  // 在SVG文档上执行选择器查询即可
  const targetEle = svgDocument.querySelector('#your-target-id');
  console.log(targetEle); // 可正常拿到目标元素
});

注意事项 #

• 该方案要求SVG资源和当前页面同域，跨域场景下浏览器会因为安全策略限制禁止读取contentDocument属性，跨域场景建议直接将SVG代码内联到HTML中，或者给SVG资源配置正确的CORS跨域头。
• 不要在object未加载完成时就读取contentDocument，此时该属性会返回null，必须绑定load事件等待资源加载完成。

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