Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30077 > unrolled thread

querySelectorAll by id attribute

Back to article view | Back to comp.lang.javascript

Contents

  querySelectorAll by id attribute Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-22 10:03 +0000
    Re: querySelectorAll by id attribute Stefan Weiss <krewecherl@gmail.com> - 2016-03-22 15:00 +0100
      Re: querySelectorAll by id attribute Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-22 15:35 +0000
    Re: querySelectorAll by id attribute "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-03-22 16:30 +0100
      Re: querySelectorAll by id attribute Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-22 15:38 +0000
        Re: querySelectorAll by id attribute "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-03-22 16:55 +0100
      Re: querySelectorAll by id attribute Stefan Weiss <krewecherl@gmail.com> - 2016-03-22 16:40 +0100

#30077 — querySelectorAll by id attribute

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/

[toc] | [next] | [standalone]

#30078

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

[toc] | [prev] | [next] | [standalone]

#30080

On 22/03/2016 14:00, Stefan Weiss wrote:
> 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.

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

[toc] | [prev] | [next] | [standalone]

#30079

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)

[toc] | [prev] | [next] | [standalone]

#30081

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

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

[toc] | [prev] | [next] | [standalone]

#30083

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)

[toc] | [prev] | [next] | [standalone]

#30082

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-selectors


- stefan

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web