Question

在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中是否有任何特定于标签的选择器？

UPD ：正如评论中提到的 Rob W 一样，WebKit中有known bug。

Answer 1

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

<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类而不是标记名就足够了

Answer 2

修改，更新

尝试

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

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

见ParentNode.children，HTMLCollection;另见NodeFilter

chrome.querySelector（“foreignObject”）在Chrome中为null

2 个答案: