How can I locate the correct element using querySelector

Question

In chrome console, i am able to inject a js like below

$("#pageForm").window('open');

And then the DIV form will pop up, however, if i change it to below

document.querySelector("div#pageForm").window('open');

It will return error: Uncaught TypeError: document.querySelector(...).window is not a function at :1:41

Am I doing wrong in locating an element ? Thanks

Answer 1

The window method you're calling - whatever that is - is a method that is provided to jQuery by a plugin you're using. It doesn't seem as though jQuery has a window method out of the box. Because you're using a jQuery plugin you need to locate your element using jQuery instead of a query selector.

Answer 2

that $ (dollar sign) you use is jQuery. (It may not be exactly every-day jQuery, it might be something chrome made up for pages that have not jQuery)

there is a difference between the result of $('<some_selector>') & document.querySelector('<some_selector>') ; the first one returns a javascript object, which is a wrapper around the DOM Node found in the HTML. this wrapper object has some methods on it (including height() , width() , show() , window() , etc...) which may be added by jQuery or it's plugins (as suggested by Dwight). But the second way ( document.querySelector ) returns a DOMNode. it is a regular DOM Node and no! it has not a window() method on it

Answer 3

Yes, I agree with answer above. It seems you correctly select the element. However, window property does not belong js out of the box. Its gotta be a jquery plugin so that you can use with jquery. Another function made available to jquery.

Answer 4

您可以简单地用$来包装queryselctor

$(document.querySelector("div#pageForm")).window('open');