Selectors in JavaScript

We have seen how selectors are used in CSS, but how do we use them in JavaScript?

The answer is that every DOM node object has a set of functions that will find objects based on selectors.

The key functions are:

• getElementById 

• getElementsByClassName 

• getElementsByTagName 

There is also a function that will find object based on any valid CSS selector:

• querySelectorAll 

So for example if you have:

<button id="button1">My Button</button>

then you can write things like

var button=document.getElementById(“button1”);

Notice that this can only return a single object, but the other two functions return a collection of elements that match the selector.

You could also use:

var button=document.querySelectorAll(“#button1”);

Notice that, as far as programming is concerned, giving an HTML element an id is very like giving a UI component a name in other languages; so much so that most browsers will create a JavaScript global variable with the same name as the id that references the DOM object that represents the element. So, for example, you can ignore getElementById and use:

var w= button1.offsetWidth;

That is, button1 is a reference to the DOM object that represents the button.

This might seem a simplification, but it is something that is implemented by the browser and it cannot be relied upon in the future. It is much better to write code that does not use these global variables and using getElementById is just as easy and using jQuery is even easier.

In book but not included in this extract

• Basic jQuery
• Specifying Elements
• jQuery Idioms
• DOM v jQuery
• Just Use jQuery!

Summary

In this chapter we have looked at how JavaScript and the DOM work together and how jQuery makes this easier. This is just an initial overview and we will find out more about jQuery and the way it lets you work with the DOM in later chapters.

What you should take from this chapter is:

• jQuery is a library that lets you work with the DOM in a browser-independent way.

• You can use jQuery or $ for the jQuery global object.

• jQuery selects DOM objects based on CSS selectors.

• The simplest CSS selectors are tag type, id and class:

  $('name') selects all DOM objects corresponding to <name>
  $('#id') selects the single DOM object with id='name'
  $('.name') selects all DOM objects with class='name'

• The DOM objects are always stored in an array wrapped by jQuery methods and properties, even if there is only one.

• Most jQuery methods work with all of the DOM objects in the array or just the first.

• You can get at the DOM objects in the array, e.g. $('div')[i], but you need to remember that they are not jQuery objects.

• The result array is a jQuery object, but its elements are DOM objects.

• You can wrap any DOM object in a jQuery object using $(DOMobject).

• jQuery provides ways of processing the results that are more sophisticated than you might expect. 

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>

<ASIN:1871962579>