Intro to DOM
DOM Manipulation
Objectives
- Select elements from the DOM using selectors
DOM Manipulation with JavaScript
Review: What is the DOM?
Open up the MDN Website
Go to Developer Console. Look at DOM in Elements, then look at the DOM in Console. The object 'document' represents the DOM in JavaScript. We can change the DOM, i.e. the page, by changing the document object.
Review DOM on MDN
Now, inspect a few properties, for example:
document.URL
document.head
document.links (what does it return?)
How to change the DOM? Select elements and manipulate them.
Select by tag id:
var searchForm = document.querySelector("#home-q");
What's inside?
searchForm.innerHTML;
Also, try textContent
too! (you may also see this as innerText
, but this is not supported by all browsers)
Change styling:
searchForm.style.backgroundColor = "yellow";
searchForm.style.color = "red";
searchForm.style.height = "100px";
Properties can be a getter and setter. What does this mean?
Select by class
var content_div = document.querySelectorAll(".center");
Select by tag name
var allListElements = document.querySelector("li")
Select using ANY CSS selectors
Get elements by tag name or class is very unspecific. You can go after specific CSS selectors, just like you would in stylesheets:
document.querySelectorAll("li");
document.querySelectorAll("li.nav-main-item");
document.querySelectorAll(".center > h1");
Accessing and changing element attributes
There are 2 ways to get and set attributes of a DOM element. You can access the properties directly or use use get/setAttribute methods. It's important that you know both exist, but generally accessing the properties directly is more consistent across browsers.
<a id="stuff" href="http://www.yahoo.com">click me</a>
//set using property
document.querySelector("#stuff").href = ' http://www.google.com';
//get using property
var href = document.querySelector("#stuff").href;
//get using getAttribute method
var href = document.querySelector("#stuff").getAttribute("href");
//set using setAttribute method
document.querySelector("#stuff").setAttribute("href","http://www.google.com")
Compare and Contrast
Compare and contrast the following selectors. Why can't we use querySelector/querySelectorAll for everything?
- getElementById
- getElementsByClassName
- getElementsByTagName
- querySelector
- querySelectorAll
Pairing Exercise (15 minutes)
- Open up your browser and go to the MDN Website.
- Repeat all of the exercies up to this point in the console.
- Create a set of styles for a header tag:
<h1>
that you create with javascript. (example: font-size, color, background color) - Use
setTimeout
to apply those styles 4 seconds later. (add the class to the element)