Javascript DOM
Lab
Week 7
Download the boilerplate here!
By connecting to the Document Object, JavaScript has the ability to…
- Alter HTML elements
- Alter HTML attributes
- Alter CSS styles
- Remove existing HTML elements and attributes
- Create new HTML elements and attributes
- React to events (click, scroll, device motion, etc.)
Document Object Methods & Properties
The document object comes along with various properties, and functions (called methods). Most frequently, we will use the document object to retrieve HTML elements…
| Method/Property | Description |
|---|---|
| document.querySelector() | Returns the first element that matches specified CSS selector |
| document.querySelectorAll() | Returns all elements that match specified CSS selector |
Full List of Methods & Properties
Element Object Methods & Properties
Just like the Document Object, elements come with some handy methods and properties for use in JS:
| Method/Property | Description |
|---|---|
| element.innerHTML | the HTML inside of a specified element |
| element.style | the inline styles attached to a specified element |
Full List of Methods & Properties
Array Methods & Properties
Even arrays have methods and properties!
| Method/Property | Description |
|---|---|
| array.length | the length of a given array |
| array.forEach() | executes a function for each element in an array |
Basic Array Methods
Array Iteration Methods
Further Reading
Eloquent JS
Eloquent JS: The Document Object Model