Asp Forum - querySelectorAll by id attribute

Cezary Tomczyk

3/22/2016 10:04:00 AM

There is a website: https://www.thewhiskyexc... (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.ct...

6 Answers

Stefan Weiss

3/22/2016 2:00:00 PM

Cezary Tomczyk wrote:
> There is a website: https://www.thewhiskyexc... (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/ra... (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...

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.

3/22/2016 3:31:00 PM

Cezary Tomczyk <cezary.tomczyk@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

3/22/2016 3:35:00 PM

On 22/03/2016 14:00, Stefan Weiss wrote:
> Cezary Tomczyk wrote:
>> There is a website: https://www.thewhiskyexc... (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/ra... (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...
>
> Whatever this script does, it's responsible for the "isProxyNode" and
> "proxiedNode" properties.

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/Nod...).

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
http://www.ct...

Cezary Tomczyk

3/22/2016 3:39:00 PM

On 22/03/2016 15:30, Evertjan. wrote:
> Cezary Tomczyk <cezary.tomczyk@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/librar...(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.

--
Cezary Tomczyk
http://www.ct...

Stefan Weiss

3/22/2016 3:41:00 PM

Evertjan. wrote:
> Cezary Tomczyk <cezary.tomczyk@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...

- stefan

Evertjan.

3/22/2016 3:55:00 PM

Cezary Tomczyk <cezary.tomczyk@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....

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

comp.lang.javascript

querySelectorAll by id attribute

Cezary Tomczyk

Stefan Weiss

Evertjan.

Cezary Tomczyk

Cezary Tomczyk

Stefan Weiss

Evertjan.

x Login to ForumsZone