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

[Simon Pieters]

On Thu, 10 Oct 2013 02:40:30 +0200, Glenn Maynard <glenn at zewt.org> wrote:

> On Wed, Oct 9, 2013 at 7:02 PM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
>
>> On 6/28/13 10:01 PM, Boris Zbarsky wrote:
>>
>>> On 6/28/13 5:06 PM, Tab Atkins Jr. wrote:
>>>
>>>> getElementById("foo") is just querySelector("#foo")
>>>>
>>>
>>> This is actually false.  For example, getElementById("foo:bar") is just
>>> querySelector("#foo\\:bar"), which is ... nonobvious.
>>>
>>
>> And today someone asked me how to do the equivalent of
>> getElementById("\n") with querySelector.  That one is even more  
>> non-obvious.

A newline isn't conforming in id="" in HTML, so it's not a case we need to  
consider here.


> But it's already been suggested--by you--that we need a function to
> CSS-escape a string, which seems to solve the that problem trivially (for
> users).
>
> I often do things like saving an element's elem.dataset.someId, and then
> finding the element again later by saying
> container.querySelector('[data-some-id="' + saved_id + '"]'.  (That lets  
> me
> find the element later, even if it's been replaced by a new element,  
> which
> doesn't work if I just save a reference.)  That would help there, too,
> since I wouldn't need to make sure that my IDs don't need to be escaped.

That wouldn't actually need CSS ident escaping, but CSS string escaping.  
The former would *work*, though, I guess, but is technically overkill.

I grepped through webdevdata.org's 2013 june data set for querySelector  
and querySelectorAll and $ to get an idea about what people are doing:

Maybe needs to escape as string:

.querySelectorAll("[id='"+n+"'] "+b)
.querySelectorAll('[id="'+f+'"]')
$("[href='#"+adid+"']")
$('#mainMenu > ul > li > ul > li > a[href="' + theMenu.split('?') ...
$("li.zone7-li[data-id='" + id + "']")
$('.flex-control-nav li#left div[id="'+slider.currentSlide+'"]')

Maybe needs to escape as ident:

.querySelectorAll('.' + className)
.querySelectorAll("#"+M+" "+m)
.querySelectorAll("."+e.faibl)
.querySelectorAll('.'+classes[i])
.querySelector('#bet_event' + eid)
.querySelector('#' + sections[sec].id + ' .d' +  
new_datetime.getLSHFormatDate('%d_%m_%Y')
$('iframe#'+iframeId)
$('#'+id+' ul li .item-thumbnail')
$('#'+settings.containerHoverID, this)
$("#focos .losfocos"+foco)
$("#" + hide + "_header")
$('.'+x)
$("#beloFBShare"+id[1])
$("#"+b.source)
$("#"+b.target)
$("#JS_expr_num_nav_"+window._current_expr_num)
$('#'+divTarget)
$("#"+divNum)
$('#' + id + '_ed')
$('.topstory-nav a.'+itemNo)
$('div#'+teaser_id+' div.textholder')
$('li[id = ' + textId + ']', $slideshow3485780.context)
$('[n_id='+allN_id+'] .notificationContainer a span')
$('.recommend > .bd.b_con ul[city="'+city1+'"]')

(The above is just a small subset of some interesting cases.)

I didn't see a single case that actually used an escaping utility.  
Searching for code that uses Mathias' cssesc gives only one file that uses  
it in github:

https://github.com/getlantern/lantern-ui/blob/aa1a3f4307f093070baa2d7e405cdecaa055108c/app/js/vis.js

I did however find more instances (528) by searching for "escapeSelector":

https://github.com/search?l=javascript&q=escapeSelector&ref=searchresults&type=Code

So, in cluclusion, it appears that there is *some* demand for this. The  
common case is escaping as ident. An API to escape as ident could be used  
for escaping strings, too. In order to not make people think more than  
just remembering to escape at all, it might be a good idea to just have  
one API to serve both cases, e.g. CSS.escape(foo).

I don't think that adding an API to escape a CSS ident means that it's a  
good idea to not have e.g. getElementById on DocumentFragment. Most people  
don't escape their stuff, so only providing a selector API that requires  
escaping seems like the net effect would be more buggy code.

-- 
Simon Pieters
Opera Software