document.querySelector("foreignObject") 在 Chrome 中为空答案

【问题标题】：document.querySelector("foreignObject") is null in Chromedocument.querySelector("foreignObject") 在 Chrome 中为空
【发布时间】：2014-10-21 09:58:58
【问题描述】：

在 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>

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

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

更新：正如 cmets 中提到的 Rob W，WebKit 中有一个 known bug。

【问题讨论】：

IE 的表现更差，但 IE 在 SVG 方面从来都不是最好的。尽管如此，这还是让人想起 IE 无法解析无法识别的元素的历史。
已知错误：code.google.com/p/chromium/issues/detail?id=286677
@rob 感谢您提供信息。

标签： javascript google-chrome svg css-selectors

【解决方案1】：

编辑、更新

试试

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

【讨论】：

如果需要复合选择器怎么办？
不确定什么是“复合选择器”？如果可以的话，可以照亮吗？谢谢
例如上面代码中的“foreignObject div”选择内部div项目。
对于这种特殊情况你是对的。但是其他情况呢。在很多情况下都会出现对标签的引用。尤其是新的 CSS3 选择器。
@complynx 不确定“任何其他情况”的含义？可能的标签可能有无限的可能性。作者可以为该特定页面定义DTD，并使用自定义标记的变体。请参阅 OP “Chrome 中是否有针对这种情况的特定标签选择器？” . Piece 应该对其他标签达到相同的结果；可以在 jsfiddle 尝试不同的选择器吗？也许，编辑 OP 以包括“任何情况”的要求？，或定义/重新定义tag 案例/多个选择器；包含在原始帖子中？谢谢

【解决方案2】：

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

<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 类代替标签名就足够了

【讨论】：

您的问题要求“标签特定选择器”。这与标签无关。
我知道。对于这种情况，这个答案不是最好的。但仍然有人会发现它很有用。