In antiquity, I selected DOM objects on my HTML pages by using the document.getElementById.aspx) method, and I always hated it. I hated it because it was one of my very few options for find the element I wanted and it was so narrow. So it was a great breakthrough to me to see how it worked in the jQuery library. CSS selectors are an awesome way to specify exactly which elements I want whether it’s one or many.
So when I saw my first Windows 8 HTML/JS example and it was using getElementById I panicked some. I didn’t want to go back in time! My first thought was “I don’t want to use this.” My second thought was “Actually I do, but can I use jQuery?” (the answer to which is yes). And finally, after some research, I realized that even without the aid of jQuery we’re in good shape thanks to some functions built into WinJS. There are a few though so I want to just enumerate what we’ve got.
Of course, you can still use
document.getElementById, but that always makes me feel like I’m regressing. :)
querySelector is the single and
querySelectorAll is the plural. If you know that you want a single element (even if there are multiple that match your query) then use the former, and if you know your query will be returning more than one then use the latter.
One thing to note about these JS functions is that they exist both on the
document object as well as on the
element object. So, we can query the document to find all matching results in the entire document, or we can just query a single element to find all objects under it. Keep in mind also, that you can enter multiple CSS selectors in the query that you pass in. Just separate them with commas and the query will be performed with a logical “or” operation to give you the union of all of your queries.
The result of the singular
querySelector function is a DOM element. The result of the plural
querySelectorAll function is a staticNodeList.aspx).
Next, we have the methods that WinJS provides for selecting elements. They are in the
WinJS.Utilities namespace and they are
query(). These WinJS functions actually just wrap the formerly mentioned
querySelectorAll functions, so keep this in mind. You might ask why we would use them if they are just wrappers for the JS functions. The answer is that their return result is a QueryCollection object that has all sorts of friendly functions hanging off making certain operations on a collection of elements quite easy.
query functions work mostly as you might expect.
id selects an element by its
id, but you do not specify a hash symbol on the query. The
query function, then, takes a query that you’re expecting to return multiple elements and the query syntax for it is the same syntax that
querySelectorAll uses, so anything that works in one works in the other.
The result in both cases here is a QueryCollection.
Finally, if you want to bring a jQuery library into your project then the terse
$('<query>') selector syntax will also do just fine.
The result of these jQuery function calls is (like practically all jQuery functions) another jQuery object. If you want the actual DOM element for the singular call, use the get function, and if you want an array of all of the DOM elements for the plural call, use the toArray function.
So you’ve seen that there are, as always, many ways to skin a cat. The deciding factors regarding which to use in my opinion are:
- What result type works best for you? Do you want an actual DOM element (or list of DOM elements) or would a QueryCollection or jQuery object give you more functionality?
- Is your app exclusively on the Windows 8 client platform? If so then you’re certainly going to want a dependency on the WinJS library and thus the WinJS method might be your best bet.
- Have you already decided to take a dependency on the jQuery library? Are you already really familiar with using jQuery?
It’s good to have choices. Happy selecting.