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.)

Setup

• Include a 'script' tag to link your JavaScript file in the html. Be mindful of the following:

• 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

⌘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

Use document.querySelector() to find an element in the DOM.

Use 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'

PROMPTS

🔵 Get the element with the id of container and save it to a variable container. Console.log that variable.

Make sure you get the container element logged in the console:

🔵 Get the element with the id of second-img and save it to a variable secondImg. Console.log that variable.

Make sure you get the element logged in the console:

🔵 Practice checking the HTML: If there is an element with the id of 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.

🔵 Get all of the elements with the class 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.

EXAMPLE:

const foundDiv = document.querySelector('div');

• The value of the variable foundDiv is an object with properties.
• We can change the content of a DOM element (and therefore the HTML in the web page) by altering the .innerText property of that object.

const foundDiv = document.querySelector('div');

foundDiv.innerText = 'awesome';

=> will change the div text to read 'awesome'.

PROMPTS

🔵 Get the first p element from the page using querySelector and save it to a variable firstP.

🔵 Change the innerText of that element to 'Jamboree sandwich at the Jambo-ree'

🔵 Make it so the first paragraph's text is parsed as HTML so that you can use tags within it. Use innerHTML instead of innerText.

.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

The document object also has a .createElement() method which allows us to create an element out of thin air.

EXAMPLE

const newElement = document.createElement('div');

• The element has not been added to the DOM yet, though. It's just floating out in space.

🔵 Create a div element and save it to a variable newDiv.

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 .appendChild()

To append straight to the body of the document, you can use:

document.body.appendChild(someElementVariable)

🔵 Append your previously created div to the body of the document.

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:

EXAMPLE

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.

PROMPTS

🔵 Get the first section element from the page and save it to a variable firstSection.

🔵 Create a p element and save it to a variable someP.

🔵 Append it to the section.

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 .innerHTML, .src, .classList, etc.

const newP = document.createElement('p');

newP.innerText = "I have been to Baffin. It was cold.";

document.body.appendChild(someP);

🔵 Create an img element and save it to a variable newImg.

🔵 Give the 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 =.

🔵 Append the 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 src attribute:

_

Create an element and give it an id

EXAMPLE

const newDiv = document.createElement('div');

newDiv.id = "party-time-excellent"

document.body.appendChild(newDiv);

🔵 Create a 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 .classList property

EXAMPLE

const foundDiv = document.querySelector('div');

const divClasses = foundDiv.classList;

🔵 You should already have the first 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

EXAMPLE

const foundDiv = document.querySelector('div');

foundDiv.classList.add('awesome-class');

🔵 Add the class wdi-gravy-train 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

EXAMPLE

const foundDiv = document.querySelector('div');
const divClasses = foundDiv.classList;
divClasses.contains('awesome-class');

🔵 Check if the first section tag has the class wdi-gravy-train.

Remove a class from an element

To remove a class, if it exists, use the .remove() method of the classList property of an element.

EXAMPLE

const foundDiv = document.querySelector('div');
foundDiv.classList.remove('awesome-class');

🔵 Remove the class wdi-gravy-train from the first section element.