Join Ray Villalobos for an in-depth discussion in this video Querying CSS to select elements, part of JavaScript: Enhancing the DOM.
Selecting elements can be a little bit of a pain with JavaScript. …You can select things by ID, tag name, and on newer browsers, by class name. …If you're familiar with CSS, one of the best ways of isolating elements is by …using a newer function called querySelector. …querySelector and its cousin, querySelectorAll let's you choose …elements by using CSS-like notation. This let's you pick nodes through CSS selectors. …That's super similar to the way that jQuery works. …So, if you're familiar selecting things with jQuery, you'll be right at home with this.…
Now, this is not compatible with older browsers. …But it does have a little bit better support than get elements by class name. …Notice that it's supported by IE8. This is super easy to use, and probably …the best way to select elements in HTML. So, I'm going to go to this HTML document …and pull up the developer tools. So, I'm hitting Cmd+Option+I, that's …Ctrl+Alt+I on a PC, then hitting the Esc key to pull up the console. …Now, here, I'm going to type in documents.querySelector, and then put in article.…
Author
Released
6/10/2013- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks
Skill Level Intermediate
Duration
Views
Related Courses
-
Git Essential Training
with Kevin Skoglund6h 25m Beginner -
3ds Max 2015 Essential Training
with Aaron F. Ross10h 43m Beginner -
PHP with MySQL Beyond the Basics (2009)
with Kevin Skoglund10h 26m Intermediate -
HTML Essential Training
with James Williamson5h 54m Beginner -
CSS: Page Layouts
with James Williamson8h 57m Beginner
-
Introduction
-
Welcome55s
-
-
1. Getting Started
-
2. Selecting the DOM
-
Targeting node elements2m 44s
-
3. Modifying DOM Attributes and Content
-
Changing HTML attributes5m 25s
-
Detecting data attributes3m 29s
-
Using text content modifiers3m 42s
-
Modifying elements as text2m 15s
-
-
4. Inserting and Deleting Nodes
-
Creating and appending nodes4m 27s
-
Cloning and removing nodes4m 41s
-
Replacing existing nodes2m 32s
-
-
5. The DOM in Action
-
What we'll build2m 16s
-
Adding an image3m 48s
-
Resizing images in the DOM2m 59s
-
Centering an image2m 36s
-
Handling clicks1m 29s
-
Adjusting for scrolling1m 36s
-
-
Conclusion
-
Next steps1m 49s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Querying CSS to select elements