querySelectorAll by id attribute

[Cezary Tomczyk]

There is a website: https://www.thewhiskyexchange.com/ (I am not
connected with this site in any way, just testing something) and I run
from console following method:

document.querySelectorAll('[id]')

The thing is that Google Chrome (OSX El Capitan, Version 49.0.2623.87
(64-bit)) and Firefox (OSX El Capitan, , Version 45.0.1) returns a list
of elements where the first element is an Object.

For document.querySelectorAll('[id]')[0]

I've got:

Object { isProxyNode: true, proxiedNode: <script#cfjs_block_e6838f345c>,
src: Getter, type: Getter, charset: Getter, async: Getter, defer:
Getter, crossOrigin: Getter, text: Getter, event: Getter, 203 more… }

Is this a bug? Anyone experienced something similar?

Because of that I can't use myElement.contains(node). It's throwing
exception because such object is not a node.

On the other hand Safari (OSX El Capitan, Version 9.1 (11601.5.17.1))
doesn't return such object.

--
Cezary Tomczyk
http://www.ctomczyk.pl/

[Stefan Weiss]

Cezary Tomczyk wrote:
> There is a website: https://www.thewhiskyexchange.com/ (I am not
> connected with this site in any way, just testing something) and I
> run from console following method:
>
> document.querySelectorAll('[id]')
>
> The thing is that Google Chrome (OSX El Capitan, Version
> 49.0.2623.87 (64-bit)) and Firefox (OSX El Capitan, , Version 45.0.1)
> returns a list of elements where the first element is an Object.
>
> For document.querySelectorAll('[id]')[0]
>
> I've got:
>
> Object { isProxyNode: true, proxiedNode:
> <script#cfjs_block_e6838f345c>, src: Getter, type: Getter, charset:
> Getter, async: Getter, defer: Getter, crossOrigin: Getter, text:
> Getter, event: Getter, 203 more… }
>
> Is this a bug? Anyone experienced something similar?

This is caused by some Cloudflare sorcery. I'm not sure what exactly is
going on, because those scripts are obfuscated, and reverse-engineering
minfied blobs is not my idea of fun.
All I can tell at the moment is that the first element with an "id"
attribute is a script (added by another script). This injected script is
Cloudflare's Rocket Loader:

http://pastebin.com/raw/bq8y8XHc (pretty-printed)

"Rocket Loader is a general-purpose asynchronous JavaScript loader
coupled with a lightweight virtual browser which can safely run any
JavaScript code after window.onload."
https://support.cloudflare.com/hc/en-us/articles/200168056

Whatever this script does, it's responsible for the "isProxyNode" and
"proxiedNode" properties.

> Because of that I can't use myElement.contains(node). It's throwing
> exception because such object is not a node.

I assume that sites using the Rocket Loader will have to work around
that somehow. This could as simple as excluding scripts from the
selector strings:

querySelectorAll("[id]:not(script)") // instead of "[id]"

If you have to deal with the actual script elements:

myElement.contains(node.proxiedNode || node)


- stefan

[Evertjan.]

Cezary Tomczyk <cezary....@gmail.com> wrote on 22 Mar 2016 in
comp.lang.javascript:

> I run from console following method:

A "method"???

> document.querySelectorAll('[id]')

Any word in the string not starting with a # ore a . would be a tagName.

And also an id must be unique, so if you mean an id by '[id]',
that would not me my idea of sensible querySelectorAll('#myId')[0].

These are more logical, imho:

document.querySelectorAll('div')[0]
document.querySelectorAll('.myClass')[3]
document.querySelector('#myId')



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Cezary Tomczyk]

Looks like the node <script> is moved to the proxiedNode property of the
Object.

Also,
Object.prototype.toString.call(document.querySelectorAll('[id]')[0])
gives me "[object Object]" and
document.querySelectorAll('[id]')[0].nodeType gives me 1 which indicates
that this is Node.ELEMENT_NODE
(https://developer.mozilla.org/en/docs/Web/API/Node/nodeType).

Hm, I wasn't expecting Node.ELEMENT_NODE there :-)

>> Because of that I can't use myElement.contains(node). It's throwing
>> exception because such object is not a node.
>
> I assume that sites using the Rocket Loader will have to work around
> that somehow. This could as simple as excluding scripts from the
> selector strings:
>
> querySelectorAll("[id]:not(script)") // instead of "[id]"
>
> If you have to deal with the actual script elements:
>
> myElement.contains(node.proxiedNode || node)

Yes. That myElement.contains(node.proxiedNode || node)
looks good to me.

Thank you.

[Cezary Tomczyk]

On 22/03/2016 15:30, Evertjan. wrote:
> Cezary Tomczyk <cezary....@gmail.com> wrote on 22 Mar 2016 in
> comp.lang.javascript:
>
>> I run from console following method:
>
> A "method"???

https://msdn.microsoft.com/en-us/library/cc304115(v=vs.85).aspx

>> document.querySelectorAll('[id]')
>
> Any word in the string not starting with a # ore a . would be a tagName.
>
> And also an id must be unique, so if you mean an id by '[id]',
> that would not me my idea of sensible querySelectorAll('#myId')[0].

No. I want to query all elements that has an attribute "id", not a one
specific element with specified an attribute "id".

> These are more logical, imho:
>
> document.querySelectorAll('div')[0]
> document.querySelectorAll('.myClass')[3]
> document.querySelector('#myId')

This one document.querySelectorAll('[id]') works as well. There is
nothing special in this CSS selector. At least nothing that I am aware of.

[Stefan Weiss]

Evertjan. wrote:
> Cezary Tomczyk <cezary....@gmail.com> wrote on 22 Mar 2016 in
> comp.lang.javascript:
>
>> I run from console following method:
>
> A "method"???
>
>> document.querySelectorAll('[id]')
>
> Any word in the string not starting with a # ore a . would be a tagName.

"[id]" is an attribute selector.

https://www.w3.org/TR/css3-selectors/#attribute-selectors


- stefan

[Evertjan.]

Cezary Tomczyk <cezary....@gmail.com> wrote on 22 Mar 2016 in
comp.lang.javascript:

>> And also an id must be unique, so if you mean an id by '[id]',
>> that would not me my idea of sensible querySelectorAll('#myId')[0].
>
> No. I want to query all elements that has an attribute "id", not a one
> specific element with specified an attribute "id".

Okay....