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

Sat Oct 19 10:03:00 PDT 2013

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?

Thanks,

--
Cheers  --  Tim