This chapter is from the book
This chapter is from the book
This chapter is from the book
Accessing the DOM
One of the most important aspects of JavaScript, and especially jQuery, is the capability to access and manipulate the DOM. Accessing the DOM is how you make the web page dynamic by changing styles, size, position, and values of elements.
In the following sections, you learn about accessing the DOM through traditional methods via JavaScript and the much improved methods using jQuery selectors. These sections are a brief introduction. You will get plenty of practice as the hours roll on.
Using Traditional JavaScript to Access the DOM
Traditionally, JavaScript uses the global document object to access elements in the web page. The simplest method of accessing an element is to directly refer to it by id. For example, if you have a paragraph with the id="question" you can access it via the following JavaScript getElementById() function:
var q = document.getElementById("question");
...
<p id="question">Which method do you prefer?</p>
Another helpful JavaScript function that you can use to access the DOM elements is getElementsByTagName(). This returns a JavaScript array of DOM elements that match the tag name. For example, to get a list of all the <p> elements, use the following function call:
var paragraphs = document.getElementsByTagName("p");
Using jQuery Selectors to Access HTML Elements
Accessing HTML elements is one of jQuery’s biggest strengths. jQuery uses selectors that are very similar to CSS selectors to access one or more elements in the DOM, hence, the name jQuery. jQuery returns back either a single element or an array of jQuerified objects. jQuerified means that additional jQuery functionality has been added to the DOM object, allowing for much easier manipulation.
The syntax for using jQuery selectors is $(selector).action(), where selector is replaced by a valid selector and action is replaced by a jQuerified action attached to the DOM element(s).
For example, the following command finds all paragraph elements in the HTML document and sets the CSS font-weight property to bold:
$("p").css('font-weight', 'bold');
Try it Yourself: Using jQuery and JavaScript to Access DOM Elements
Now to solidify the concepts, you’ll run through a quick example of accessing and modifying DOM elements using both jQuery and JavaScript. Use the following steps to build the HTML document shown in Listing 5.2:
- Create a source file named hour0502.html in the hour05 folder.
- Add the usual basic elements (html, head, body).
Inside the <head> element, add the following line to load the library you just downloaded.
06 <script src="../js/jquery.min.js"></script>
Add the following <script> element that accesses the DOM using both the JavaScript and jQuery methods. Notice that with jQuery two actions are chained together. The first sets the CSS font-weight property and the second changes text contained in element. With JavaScript, you use the getElementById() method, and then you set the innerHTML property directly in the DOM to change the text displayed in the browser.
07 <script> 08 function writeIt(){ 09 $("#heading").css('font-weight', 'bold').html("jQuery"); 10 var q = document.getElementById("question"); 11 q.innerHTML = "I Prefer jQuery!"; 12 } 13 </script>To have your script execute when the document is loaded, tie the writeIt() function to the <body> onload event using the following line:
15 <body onload="writeIt()">
Add the following <p> elements to the <body> to provide containers for the JavaScript code to access:
16 <p id="heading">jQuery or JavaScript</p> 17 <p id="question">Which method do you prefer?</p>
Save the file and view it in a web browser. The output should be similar to Figure 5.2.
FIGURE 5.2 The function writeIt() is executed when the body loads and changes the content and appearance of the text.
)
LISTING 5.2 Very Basic Example of Using JavaScript and jQuery to Access DOM Elements
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 5-2</title>
05 <meta charset="utf-8" />
06 <script src="../js/jquery.min.js"></script>
07 <script>
08 function writeIt(){
09 $("#heading").css('font-weight', 'bold').html("jQuery");
10 var q = document.getElementById("question");
11 q.innerHTML = "I Prefer jQuery!";
12 }
13 </script>
14 </head>
15 <body onload="writeIt()">
16 <p id="heading">jQuery or JavaScript</p>
17 <p id="question">Which method do you prefer?</p>
18 </body>
19 </html>