document.querySelector("foreignObject") is null in

document.querySelector("foreignObject") is null in Chrome

本文关键字：quot is null in foreignObject querySelector document      更新时间：2023-09-26

在HTML5中使用嵌入式SVG时，我在Chrome浏览器中发现了奇怪的行为。(http://jsfiddle.net/complynx/htp4hqe2/)

例如，在以下html/svg代码中：

<svg>
    <foreignObject>
        <body xmlns="http://www.w3.org/1999/xhtml">
            <div>foo</div>
        </body>
    </foreignObject>
</svg>
<script>
    var T=document.querySelector("foreignObject");
</script>

在Chrome中，变量T将为null（对于Firefox来说工作正常）。任何其他选择器，即使对于<foreignObject>的内容，也可以正常工作。

对于这种情况，Chrome中是否有特定于标签的选择器？

上升：正如Rob W在评论中提到的，WebKit中存在一个已知的错误。

简单，但在某些情况下不是很好的解决方法。

<svg>
    <foreignObject class="ForeignObjectStubClass">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <div>foo</div>
        </body>
    </foreignObject>
</svg>
<script>
    var T=document.querySelector(".ForeignObjectStubClass");
</script>

使用CSS类而不是标记名就足够了

编辑、更新

尝试

var _T = document.getElementsByTagName("foreignObject");
// select `DIV` element within `_T` `HTMLCollection`
var filtered = _T[0].children.item("DIV");
console.log(filtered);

jsfiddlehttp://jsfiddle.net/guest271314/htp4hqe2/2/

参见ParentNode.children，HTMLCollection；另请参阅NodeFilter

相关文章：