document.querySelector(“foreignObject”) is null in Chrome

Question

Working with embedded SVG in HTML5 I've found strange behavior in Chrome browser. ( http://jsfiddle.net/complynx/htp4hqe2/ )

For example, in the following html/svg code:

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

Variable T will be null in Chrome (for Firefox works fine). Any other selectors, even for contents of <foreignObject> work fine.

Is there any tag-specific selector in Chrome for this case?

Upd : As Rob W mentioned in comments, there is a known bug in WebKit.

Answer 1

Simple, yet in some cases not good workaround.

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

Using CSS class instead of tag name is enough

Answer 2

Edit, Updated

Try

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/

See ParentNode.children , HTMLCollection ; see also NodeFilter

document.querySelector(“foreignObject”) is null in Chrome

Question

2 answers

solution1
0 2014-08-27 17:31:59

solution2
0 2014-08-27 18:00:18

document.querySelector(“foreignObject”) is null in Chrome

Question

2 answers

solution1 0 2014-08-27 17:31:59

solution2 0 2014-08-27 18:00:18

solution1
0 2014-08-27 17:31:59

solution2
0 2014-08-27 18:00:18