[whatwg] Proposal: Adding methods like getElementById and getElementsByTagName to DocumentFragments

Sat Oct 19 10:27:51 PDT 2013

Hi Tim,

On 10/19/2013 07:03 PM, Tim Streater wrote:
> On 18 Oct 2013 at 22:56, Boris Zbarsky <bzbarsky at MIT.EDU> posted, inter alia, this code:
>
>> [1] The testcase:
>>
>> <!DOCTYPE html>
>> <script>
>>    document.write("<svg id='root' width='0' height='0'>");
>>    for (var i = 0; i < 100; ++i) {
>>      document.write("<rect/>");
>>    }
>>    document.write("<rect id='test'/>");
>>    document.write("</svg>\n");
>> </script>
>> <pre><script>
>>    var node;
>>    var count = 200000;
>>    function doTests(root, elementId, descQS, descQSNoConcat, descGEBI) {
>>      var start = new Date;
>>      for (var i = 0; i < count; ++i)
>>        node = root.querySelector("#" + elementId);
>>      var stop = new Date;
>>      document.writeln(descQS + ((stop - start) / count * 1e6));
>>      var start = new Date;
>>      for (var i = 0; i < count; ++i)
>>        node = root.querySelector("#test");
>>      var stop = new Date;
>>      document.writeln(descQSNoConcat + ((stop - start) / count * 1e6));
>>      var start = new Date;
>>      for (var i = 0; i < count; ++i)
>>        node = root.getElementById(elementId);
>>      var stop = new Date;
>>      document.writeln(descGEBI + ((stop - start) / count * 1e6));
>>    }
>>    var root = document.getElementById("root");
>>    var start = new Date;
>>    for (var i = 0; i < count; ++i)
>>      node = document.getElementById("test");
>>    var stop = new Date;
>>    document.writeln("document.getElementById: " + ((stop - start) /
>> count * 1e6));
>>    doTests(root, "test",
>>            "In-tree querySelector: ",
>>            "In-tree querySelector, no string concat: ",
>>            "In-tree getElementById: ");
>>    root.remove();
>>    doTests(root, "test",
>>            "Out-of-tree querySelector: ",
>>            "Out-of-tree querySelector, no string concat: ",
>>            "Out-of-tree getElementById: ");
>> </script>
>
> I've tested this here on five browsers and it runs to completion Ok
> apart from iCab, which didn't like root.remove so I did that bit
> longhand. But I'm left confused. The other day I ranted about needing
> to use a document fragment and having to use querySelector on a table
> body. Now this code appears to imply that I need neither and could
> have used getElementById all along, since your application of
> getElementById above is mostly not to a document. I'm sure that when
> I tested that, a year or so back, it didn't work. Could you
> elucidate?

Quoting part of the original email you trimmed:

> Luckily, we have SVGSVGElement.prototype.getElementById available to
> compare to Element.prototype.querySelector.

That is, getElementById is available on |svg| elements in the SVG namespace.

HTH
Ms2ger