Home > Chapter Review and Exercises > Chapter 22 - Using JavaScript
This chapter applies what you’ve learned about JavaScript to manipulate the objects in a web page. You are introduced to the Document Object Model and some methods available for accessing, adding, deleting, and changing various aspects of the document. It also addresses JavaScript used to patch browser behavior (polyfills) as well as JavaScript libraries that make using JavaScript easier and more efficient.
In Chapter 22, you will learn the following:
The DOM (Document Object Model) as an interface for accessing the elements, attributes, and content of a document. It makes markup programmable.
How the DOM sees an HTML document as a tree-like structure of nodes representing elements, attributes, and text.
DOM methods and functions that can be used to interact with the document nodes.
Several examples of how to access nodes within a document, including
By element name: getElementsByTagName()
By id attribute value: getElementById()
By class value: getElementsByClassName()
Via a CSS-style selector: querySelectorAll()
By attribute value: getAttribute()
Examples of what you can do with nodes once you’ve accessed them, such as setting an attribute value, changing content within an element, and modifying the style applied to the element.
Examples of how to add and remove entire website elements from the DOM.
Using polyfills to make older browsers support new features; for example, making them recognize new HTML5 elements and CSS3 selectors.
How a JavaScript library can help you add interactivity to your site with pre existing scripts that can be adapted for your uses.
jQuery, an open source and freely available JavaScript library. There are versions targeted to building user interfaces (UI) as well as evening out mobile browser inconsistencies (jQuery Mobile).
How to implement jQuery: download jquery.js and save it to your main site directory, add it to your document with the <script> element, set up a “ready event” that tells the browser when to run it, then write your own scripts using jQuery for shortcuts.
Document Object Model (DOM)
A programming interface (API) for HTML and XML pages that gives us a way to access and manipulate the contents of a document.
node
Each element in a web page as seen by the DOM. The relationship of elements forms a “tree” with branches of nested nodes (elements and content
polyfill
A script that provides older browsers with modern features.
JavaScript library
A collection of pre-written functions and methods that you can use in your scripts to accomplish common tasks or simplify complex ones.
ready event
A statement in a <script> that checks the document and waits until it is ready to be manipulated before running the script itself.
None.
Just a few questions for those of you playing along at home.
1. Ajax is a combination of what technologies?
2. What does this do?
document.getElementById("main")
3. What does this do?
document.getElementById("main").getElementsByTagName("section");
4. What does this do?
document.body.style.backgroundColor = "papayawhip"
5. What does this do? (This one is a little tricky because it nests functions, but you should be able to piece it together.)
document
.getElementById("main")
.appendChild(
document.createElement("p")
.appendChild(
documentCreateTextNode("Hey, I'm walking here!")
)
);
6. What is the benefit of using a JavaScript library such as jQuery?
a. Access to a packaged collection of polyfills
b. Possibly shorter syntax
c. Simplified Ajax support
d. All of the above