jQuery DOM Manipulation
Objectives
By the end of this lesson, students should be able to:
- Diagram the DOM
- Reference jQuery documentation when learning a new technique
- After selecting a DOM node, reach another node using traversal
- Get data from the DOM using jQuery
- Put data into the DOM using jQuery
The Document Object Model (DOM)
- The DOM is a recursive tree.
The DOM is a (potential) large object that describes the structure of our
content. Since it's an object, we can use normal techniques to get and set data!
In the browser, the DOM is represented by the document
object. JS specifies
some built-in methods that make using the DOM easier.
jQuery
- The "query" in jQuery comes from SQL.
- We can retrieve and put data into the DOM using jQuery.
- jQuery uses selectors (css selectors, remember?)
Demo: Diagram the DOM
- Demo translating a wireframe into a tree diagram (should resemble the next sections)
Lab: Diagram the DOM
- Consultant: Give wireframe
- Developer: Draw a tree diagram
- Consultant: Draw the solution
- Discussion and questions
DOM Traversal
- Deface the broncos
- Add console snippet
var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);
jQuery Setters & Getters
When reading the jQuery documentation, be sure to scroll through the whole document to ensure you're looking at the correct method signature. Most jQuery methods change their behavior depending on the number of arguments they have when called.
For example, have a look at .val(). Note in the
table of contents that there are two method signatures, .val()
and
.val(value)
. This is our hint that .val()
can do two things.
Reading the documentation, we discover that .val()
is getter on an element,
but that .val(value)
is a setter on an element. Be sure you're using the
correct method. Reading examples is very helpful, and the jQuery examples in the
docs are fully functional!
Lab: Register an Event Handler
Continue defacing the Broncos.
Lab: Research Common jQuery Functions
Here is a list of most commonly used jQuery API functions:
Gotchas
- Beware the difference between jQuery setters and getters
- Beware the difference between a jQuery collection and a jQuery object
- Beware the difference between
.html()
,.text()
, and.val()