Hour 7. Accessing DOM Elements Using JavaScript and jQuery Objects
What You’ll Learn in This Hour:
The difference between jQuery and JavaScript DOM objects
How to tell if an object is jQuery or DOM
How to get a jQuery object from a DOM object
How to get a DOM object from a jQuery object
How to use jQuery selectors to quickly find DOM elements
The most important part of dynamic web development is the capability to access the DOM elements quickly and efficiently. JavaScript inherently provides functionality to access the DOM elements. It can be useful at times; however, this is the area where jQuery really stands out and you understand the need for jQuery on top of JavaScript.
In the following sections, you learn about the basic structure of jQuery and JavaScript DOM objects, how to determine whether an object is jQuery or DOM, and how to switch between them. The rest of the hour discusses methods you can use to find and access the DOM elements using jQuery and JavaScript.
Understanding DOM Objects Versus jQuery Objects
You need to understand the difference between DOM objects and jQuery objects and how to manipulate and use both to be effective when creating dynamic web pages. In this section, you learn about these types of objects and how to navigate between them.
Introducing JavaScript DOM Objects
DOM objects are the objects that the web browser is using to render elements on the web page. Consequently, DOM objects have a great deal of functions and attributes. The advantage with working with DOM objects is that you have direct access to everything you need to manipulate the HTML element.
The disadvantage of DOM objects is that most of the attached functions and attributes are things that the browser needs and are not necessarily useful when you’re working with JavaScript. That means that the DOM object has a lot of properties and methods that encumber your debugging environment, such as Firebug or other JavaScript consoles.
Table 7.1 provides a list of some of the important attributes and methods of DOM objects that you should be aware of. The list is not comprehensive; it is intended to give you an idea of things that you can access from a DOM object.
Introducing jQuery Objects
jQuery objects are basically wrapper objects around a set of DOM elements. The jQuery objects are still JavaScript objects and provide access to the DOM elements—however, in a much different, much easier, and often much more effective way.
The most important thing to remember is that a jQuery object may represent a single DOM object or it may represent a set of many DOM objects. So if you apply an operation on the jQuery object, it may apply to many DOM objects.
The biggest advantage to jQuery objects is how easy it is to search HTML elements in a web page. Another advantage is that the jQuery library wraps methods and attributes specifically to make it easier for JavaScript and jQuery developers to manipulate and work with different groups of objects. Calling a method on a jQuery object can apply to one or many DOM elements without the need to iterate through a list.
Table 7.2 provides a list of some of the important methods of jQuery objects that you should be aware of. The list is not comprehensive; it is intended to give you an idea of things that you can access from a jQuery object.
Determining Whether an Object Is DOM or jQuery
Occasionally, you find yourself in a situation where you have an object and you are not sure whether it is a jQuery object, a DOM object, or some other JavaScript object. There is a simple way to tell the difference.
To tell whether an object is a jQuery object, use the following if syntax to check to see whether the object has the jquery attribute:
if( obj.jquery ) {
...
To tell whether an object is a DOM object, use the following if syntax to check to see whether the object has the nodeType attribute:
if( obj.nodeType ) {
...
Changing an Object from DOM to jQuery and Back
What do you do if you have a jQuery object but you want to use code intended for DOM objects, or vice versa? The answer is to convert the object to the other type.
The .get() method returns the JavaScript version of the jQuery element set in the form of an array of DOM objects. Use the following code to call the get() function that returns the DOM object of the HTML element represented by the jQuery object:
var domObj = jqueryObj.get();
Conversely, the $() or jquery() method creates a new jQuery object from JavaScript. Use the following code to execute the $() function to wrap the DOM object as a jQuery object:
var jqueryObj = $(domObj);
Accessing DOM Objects from JavaScript
To be able to manipulate HTML elements from JavaScript, you first need to gain access to the DOM object. You can use a few different methods to do that.
Finding DOM Objects by ID
The simplest is to find an HTML element using the value of the id attribute using the getElementById(id) function. getElementById(id) searches the DOM for an object with a matching id attribute.
For example, the following code searches for the HTML element with id="container":
var containerObj = document.getElementById("container");
Finding DOM Objects by Class Name
You can also search for HTML elements by their class attribute using the getElementsByClassName(class). This function returns a list of DOM objects with matching class attributes. You can then iterate over that list using a JavaScript loop and apply changes to each DOM element.
For example, the following retrieves a list of HTML elements with class="myClass" and then iterates through them:
var objs = document.getElementsByClassName("myClass");
for (var i=0; i<objs.length; i++){
var htmlElement = objs[i];
...
}
Finding DOM Objects by Tag Name
Another way to search for HTML elements is by their HTML tag, using the getElementsByTagName(tag). This function returns a list of DOM objects with matching HTML tag. You can then iterate over that list using a JavaScript loop and apply changes to each DOM element.
For example, the following code retrieves a list of the <div> HTML elements and then iterates through them:
var objs = document.getElementsByClassName("div");
for (var i=0; i<objs.length; i++){
var htmlElement = objs[i];
...
}
Try it Yourself: Using JavaScript to Access DOM Objects
1. In Aptana, create a source folder named hour07. Inside the hour07 folder, create a js and css folder.
2. Create a source file named hour0701.html in the hour07 folder.
3. Add the usual basic elements (html, head, body).
4. Inside the <head> element, add the following <script> and <link> elements, shown in Listing 7.1-html, which will be used to load the JavaScript and CSS rules that will be defined later:
06 <script type="text/javascript" src="js/hour0701.js"></script>
07 <link rel="stylesheet" type="text/css" href="css/hour0701.css">
5. Add the following <input> elements to define a text box and a button. Notice that on the button you need to add the onclick handler, which allows you to run your dynamic script when the button is clicked. The text input has the id="textIn".
10 <input id="textIn" type="text"/>
11 <input type="button" onclick="textChange()" value="Update" /><br>
6. Add the following <span> and <p> elements. For now they are empty; the dynamic code will update them.
12 <span class="heading"></span>
13 <p id="p1"></p>
14 <span class="heading"></span>
15 <p id="p2"></p>
7. Create a file called hour07/js/hour0701.js.
8. Create a function called textChange(), as shown in Listing 7.1-js. This function will be called when the button is clicked.
9. Add the following variable definition to the textChange() function to find the text input by the id "textIn":
02 var inElement = document.getElementById("textIn");
10. Add the following variable definition to get all the <p> elements by tag name:
03 var outElements = document.getElementsByTagName("p");
11. Add the following variable definition to get all the elements with the class="heading".
04 var headingElements = document.getElementsByClassName("heading");
12. Add the for loop shown in Listing 7.1-js that iterates through the outElements that were found in the document. For each element, you set the innerHTML text to the inElement.value, which is what is typed into the text box.
13. Create a file called hour07/css/hour0701.css and add the code shown in Listing 7.1-css. This stylizes the out elements a bit.
14. Save the three files and open the hour0701.html file in a web browser to check out the web page shown in Figure 7.1. Try typing in some text and clicking the Update button.
LISTING 7.1-html HTML File That Loads JavaScript and Attaches an Event Handler to a Button Element to Update the Page
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 7-1</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="js/hour0701.js"></script>
07 <link rel="stylesheet" type="text/css" href="css/hour0701.css">
08 </head>
09 <body>
10 <input id="textIn" type="text"/>
11 <input type="button" onclick="textChange()" value="Update" /><br>
12 <span class="heading"></span>
13 <p id="p1"></p>
14 <span class="heading"></span>
15 <p id="p2"></p>
16 </body>
17 </html>
LISTING 7.1-js JavaScript File Contains a Function Showing Examples of Accessing Variables by id, tag, and class Attributes
01 function textChange(){
02 var inElement = document.getElementById("textIn");
03 var outElements = document.getElementsByTagName("p");
04 var headingElements = document.getElementsByClassName("heading");
05 for(var i=0; i<outElements.length; i++){
06 var outItem = outElements[i];
07 headingElements[i].innerHTML = "Updating " + (i+1) + " to " + inElement.value;
08 outItem.innerHTML = inElement.value;
09 }
10 }
LISTING 7.1-css CSS That Styles <p> Elements
1 p{
2 font-weight:bold;
3 font-size:50px;
4 margin:5px;
5 }
Using jQuery Selectors
Unlike JavaScript, jQuery enables you to find HTML elements in countless ways using selectors. Yes, just like CSS selectors. In fact, most of the jQuery selectors were taken from CSS, providing a more seamless transition between the two.
As you will find in upcoming sections, jQuery selectors make it very easy to select just about any group of HTML elements. Keep in mind, though, that jQuery selectors return jQuery objects, not DOM objects.
jQuery selector syntax is very straightforward. After the jQuery library is loaded, use $(selector). For example:
$("#myElement")
Caution
Several meta characters are used in jQuery selector syntax. If you want to use any of the meta characters, such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ), as a part of a class/ID/name, you will need to escape the character with \ two backslashes. For example, if you have an element with id="my.element", you would use the selector $("#my\.element").
As with CSS selectors, the best way to introduce you to jQuery selectors is to show you some examples. The following sections take you through some examples of different types of jQuery selectors. These sections only scratch the surface. You can go to the following location to review the selector documentation when you get a chance:
http://api.jquery.com/category/selectors/
Applying Basic Selectors
The most commonly used selectors are the basic ones. The basic selectors focus on the id attribute, class attribute, and tag name of HTML elements. Table 7.3 list some examples to show you how to define some of the basic selectors.
Applying Attribute Selectors
Another way to use jQuery selectors is to select HTML elements by their attribute values. It can be a default attribute or one that you have added to the HTML elements. Attribute values are denoted in the selector syntax by being enclosed in [] brackets. Table 7.4 shows some of the ways that attribute selectors can be applied.
Applying Content Selectors
Another set of useful jQuery selectors are the content filter selectors. These selectors allow you to select HTML elements based on the content inside the HTML element. Table 7.5 shows examples of using content selectors.
Applying Hierarchy Selectors
An important set of jQuery selectors are the hierarchy selectors. These selectors allow you to select HTML elements based on the DOM hierarchy. This enables you to write dynamic code that is more content aware by only selecting elements based on parents, children, or other elements around them in the DOM tree. Table 7.6 shows some examples of hierarchy selectors.
It is always best to be as specific as possible when designing your jQuery selectors. For example, if you want to select all the span elements with class="menu" and these elements are only under the <div> element with id="menuDiv", then $("div#menuDiv .menu") would be much more efficient than $(".menu") because it would limit the search to the <div> element before checking from the menu class attribute.
Applying Form Selectors
An extremely useful set of selectors when working with dynamic HTML forms are the form jQuery selectors. These selectors enable you to select elements in the form based on the state of the form element. Table 7.7 shows some examples of form selectors.
Applying Visibility Selectors
If you are using visibility to control the flow and interactions of your web page components, using the visibility jQuery selectors makes it simple to select the HTML elements that are hidden or visible. Table 7.8 shows some examples of visibility selectors.
Applying Filtered Selectors
Often you will need to refine your jQuery selectors down to a more specific subset. One way to accomplish that is to use filtered selectors. Filtered selectors append a filter on the end of the selector statement that limits the results returned by the selector. Table 7.9 shows some examples of adding filters to selectors.
Try it Yourself: Using jQuery to Access DOM Objects
1. In the hour07 folder, create the source files named hour0702.html, js/hour0702.js, and css/hour0702.css.
2. Open hour0702.html and add the usual basic elements (html, head, body).
3. Inside the <head> element, add the following <script> and <link> elements, shown in Listing 7.2-html, that will be used to load the jQuery, JavaScript, and CSS:
06 <script src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0702.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0702.css">
4. Now add the following <span> elements that will be styled as buttons. Each <span> element contains a different onclick handler that will allow you to run your dynamic script when it is clicked.
11 <span onclick="setEven()">Even</span>
12 <span onclick="setOdd()">Odd</span>
13 <span onclick="setFirst4()">First 4</span>
5. Add the <p> and <ul> elements shown in lines 14–24 of Listing 7.2-html to add a list of planets to the page.
6. Open the file hour0702.css and add the contents of Listing 7.2-css that style the <span> elements as buttons and the <p> element as a list header.
7. Open the hour0702.js files so that you can add the event handlers for the <span> elements.
8. Add a JavaScript function named setEven() to act as an event handler.
9. Add the following line that uses jQuery to select all <li> and <span> elements and clears the CSS font-weight value:
02 $("li, span").css("font-weight","");
10. Add the following lines that define a variable named $evenItems to the results of the selector that selects all <li> elements and then filters the list to only those with an even index. Line 3 uses the $evenItems variable to set the CSS font-weight property of those items to bold.
03 var $evenItems = $("li:even");
04 $evenItems.css("font-weight","bold");
11. Add the following line that uses jQuery to select all <span> elements that contain "Even" in their contents and sets the CSS font-weight property to bold.
05 $("span:contains(Even)").css("font-weight","bold");
12. Add the following line that uses jQuery to select the elements with class="label" to select the <p> element. The .html("Even") part of the statement changes the innerHTML property of the selection to "Even", thus changing the heading.
06 $(".label").html("Even");
13. Add the other two event handlers, setOdd() and setFirst4(), shown in Listing 7.2-js, which basically do the same thing, but for a different set of list items.
14. Save the three files and open the hour0702.html file in a web browser to check out the web page shown in Figure 7.2. Try clicking the different buttons and watch the button, heading, and list items change.
FIGURE 7.2 A simple JavaScript web page that uses jQuery to dynamically change page elements based on user interaction.
LISTING 7.2-html HTML File That Loads jQuery and JavaScript and Attaches Event Handler Elements to Provide User Interaction
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 7-2</title>
05 <meta charset="utf-8" />
06 <script src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour0702.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour0702.css">
09 </head>
10 <body>
11 <span onclick="setEven()">Even</span>
12 <span onclick="setOdd()">Odd</span>
13 <span onclick="setFirst4()">First 4</span>
14 <p class="label">Planets</p>
15 <ul>
16 <li>Mercury</li>
17 <li>Venus</li>
18 <li>Earth</li>
19 <li>Mars</li>
20 <li>Jupiter</li>
21 <li>Saturn</li>
22 <li>Uranus</li>
23 <li>Neptune</li>
24 </ul>
25 </body>
26 </html>
LISTING 7.2-js JavaScript File Containing Event Handler Functions That Use jQuery in Various Ways to Select and Alter Page Elements
01 function setEven(){
02 $("li, span").css("font-weight","");
03 var $evenItems = $("li:even");
04 $evenItems.css("font-weight","bold");
05 $("span:contains(Even)").css("font-weight","bold");
06 $(".label").html("Even");
07 }
08 function setOdd(){
09 $("li, span").css("font-weight","");
10 var $oddItems = $("li:odd");
11 $oddItems.css("font-weight","bold");
12 $("span:contains(Odd)").css("font-weight","bold");
13 $(".label").html("Odd");
14 }
15 function setFirst4(){
16 $("li, span").css("font-weight","");
17 var $first4 = $("li:lt(4)");
18 $first4.css("font-weight","bold");
19 $("span:contains('First 4')").css("font-weight","bold");
20 $(".label").html("First 4");
21 }
LISTING 7.2-css CSS That Styles <span> Elements and Elements with class="label"
01 span{
02 padding:2px;
03 border:3px ridge blue;
04 color:white;
05 background:blue;
06 cursor:pointer;
07 }
08 .label{
09 font-size:25px;
10 margin:10px;
11 }
Summary
In this hour, you learned about using jQuery and JavaScript objects to find and access DOM elements. This is the most critical piece of dynamic programming, because you must be able to provide efficient access to the DOM elements to be able to manipulate them dynamically. You learned the basic syntax and structure of JavaScript DOM objects as well as a few of the methods and attributes attached to those objects.
Q&A
Q. When should I use the getObjectById() rather than $("#id")?
A. It’s likely that you will rarely use getObjectById(). The only times you might use it is when you don’t want to take the time to link the jQuery library to your HTML docs. jQuery is so much more extensible.
Workshop
The workshop consists of a set of questions and answers designed to solidify your understanding of the material covered in this hour. Try to answer the questions before looking at the answers.
Quiz
1. How to would you convert a DOM object named myDiv into a jQuery object?
2. True or False: A jQuery selector returns a list of DOM objects.
3. How can you tell if an object is a jQuery object?
4. What jQuery selector would you use if you wanted all elements with class="heading"?
5. What jQuery selector would you use to get all <p> elements that are children of <div> elements?
6. How can you get a JavaScript array of the DOM elements represented in a jQuery object?
Quiz Answers
1. Use $(myDiv) to create a new jQuery object with the DOM element as the only item in the set.
2. False. A jQuery selector returns a jQuery object that contains a set of DOM elements.
3. Test to see whether it has the jquery property set.
4. $(".heading")
5. $(div p)
6. Use the get() method on the jQuery object.
Exercise
1. Add an additional button to the example in hour0702.html that will select only the first and last planets in the list. You will need to add the HTML and JavaScript code necessary to do so.