Title: 'Vanilla' DOM commands
Duration: 45 - 60 mins
Creator: Alex, Shahzad, Daniel
Topics: 'Vanilla' DOM intro
JS DOM commands
You are not expected to remember these commands. This is an exercise to get you familiar with the concept of the DOM and the pattern of how we interact with it. We will be using jQuery commands in the future.
Check the results of your commands in the Elements tab and in the Console (some divs won't have text, etc. but you can see the element appearing in the DOM in the elements tab.)
git pull upstream master
Open up the
dom_examplefolder in your
student_labsdirectory for today.
index.htmlfile into the browser. You should see a kitten and a bungalow:
The DOM must be loaded before the script can reference any elements that already exist on the page. For now, place the script at the bottom of, and within, the body tag.
⌘R, or Command-R will reload your webpage after you have made changes to your html, css, or js files (if your OS has focus on the browser). Try not to click the reload button on the browser. Reloading works as long as you have saved your files.
Find / retrieve an element
document.querySelector() to find an element in the DOM.
document.querySelectorAll() to find a collection of elements in the DOM.
querySelector and querySelectorAll commands:
document.querySelector('div');will give us the first div that's available to us.
document.querySelector('#someId')will give the element with an id
someId. Note the use of the pound sign to query for id.
document.querySelectorAll('.someClass')will give us an array of elements with the class
someClass. Note the use of the period to query for class.
We can save the results of our search to a variable:
const elem = document.querySelector('#someId'); console.log(elem); // the element with id 'someId'
container and save it to a variable
container. Console.log that variable.
Make sure you get the container element logged in the console:
second-img and save it to a variable
secondImg. Console.log that variable.
Make sure you get the element logged in the console:
third-img that already exists in the HTML, save it to a variable
thirdImg and console.log it.
If there is no element with the id
third-img, move on to the next question.
info and save them to a variable
infoElements. Console.log that variable.
Make sure you get this (an array):
And not this (a single element)
Alter an element's HTML
As we have seen, we can assign the value of
document.querySelector() to a variable.
const foundDiv = document.querySelector('div');
- The value of the variable
foundDivis an object with properties.
- We can change the content of a DOM element (and therefore the HTML in the web page) by altering the
.innerTextproperty of that object.
const foundDiv = document.querySelector('div'); foundDiv.innerText = 'awesome';
=> will change the div text to read 'awesome'.
p element from the page using querySelector and save it to a variable
innerHTML instead of
.innerHTML = '<strong>Put your hands where I can see \'em, so they look like 12pm</strong>'
Notice that the string is parsed as strong element.
Create a new element
document object also has a
.createElement() method which allows us to create an element out of thin air.
const newElement = document.createElement('div');
- The element has not been added to the DOM yet, though. It's just floating out in space.
div element and save it to a variable
console.log the div. It should just look like this:
Append an element to the body
You can append an element to an existing element with
To append straight to the body of the document, you can use:
You should see your
<div></div> in the elements tab, located within the body tag:
Append an element to a retrieved element
Append an element to another element that you have retrieved from the DOM.
Get an element from the page:
const container = querySelector('#container');
Create an element and append it to the retrieved element:
const newElem = document.createElement('div'); container.appendChild(newElem);
=> The container div now has a child div.
section element from the page and save it to a variable
p element and save it to a variable
Check in the Elements tab, the section should have an extra set of
p tags hanging around.
Create an element and give it an attribute before appending it
- We can give a new element properties like
const newP = document.createElement('p'); newP.innerText = "I have been to Baffin. It was cold."; document.body.appendChild(someP);
img element and save it to a variable
img element a
src of some image you find on the internet.
.src is a property like
.innerText, therefore, you would give it a value with the assignment operator
img to the document body.
Make sure you see the image appear at the bottom of your webpage.
Check in elements and see that your
.src property has translated into an html
Create an element and give it an id
const newDiv = document.createElement('div'); newDiv.id = "party-time-excellent" document.body.appendChild(newDiv);
section element, give it an id of
butterfly, and append it to the body.
Get a list of the classes given to an element
We can see the different classes on an element with the
const foundDiv = document.querySelector('div'); const divClasses = foundDiv.classList;
section element. Get the list of classes given to the first
section element (there is only one class in this particular class list).
Add a class to an element
We can add classes to an element using the
.add() method of the classList property of an element
const foundDiv = document.querySelector('div'); foundDiv.classList.add('awesome-class');
wdi-remote-gizmo to the first section element.
See if a class has been added to an element
The .classList property of an element is not a simple array, though. It's actually an object that has properties.
We can use the
.contains() method of the classList property of an element to see if that element has a class added to it
const foundDiv = document.querySelector('div'); const divClasses = foundDiv.classList; divClasses.contains('awesome-class');
Remove a class from an element
To remove a class, if it exists, use the
.remove() method of the
classList property of an element.
const foundDiv = document.querySelector('div'); foundDiv.classList.remove('awesome-class');
wdi-remote-gizmo from the first section element.