Selecting DOM Elements

In this unit, we will learn how to select DOM elements using the querySelector, querySelectorAll, and getElementById methods. We will also learn how to attach a JavaScript file to an HTML page.

The Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

Creating and Attaching our JavaScript File

Now that we have our starter code, let's create a JavaScript file and attach it to our HTML page.

Here is the code that we added to our HTML:

<script src="site.js" defer></script>

The defer attribute tells the browser to wait until the HTML has been parsed before executing the JavaScript. This is important because we want to make sure that the JavaScript has access to the DOM before it tries to select any elements.

Here is the code that we ended up with in our JavaScript file:

console.log(document.querySelector('h1'))

Selecting Elements by Tag

As you saw in the video above, we can select DOM elements using the querySelector method. This method takes a CSS selector as an argument and returns the first element that matches the selector.

Exercise 1

In this exercise, you will modify the example that we've been working on, to change the text "Main Content Section" color to red.

I want you to store the element in a variable called mainContentSection and then use that variable to change the color.

const mainContentSection = document.querySelector('h2')

mainContentSection.style.color = 'red'

mainContentSection.style.color = '#ff0000'

const mainContentSection = document.querySelector('h2')
mainContentSection.style.color = 'red'
// or
// mainContentSection.style.color = '#ff0000'

Selecting Elements by ID and Class

In addition to selecting elements by tag, we can also select elements by ID and class. Take a look:

Here is the code from the video:

const about = document.querySelector('#about') // id="about"
about.style.color = 'orange'

const active = document.querySelector('.active') // class="active"
active.style.color = 'blue'

Combining Selectors

We can also combine selectors to get more specific elements. Take a look:

Selecting Multiple Elements

In addition to selecting a single element, we can also select multiple elements using the querySelectorAll method. This method takes a CSS selector as an argument and returns a NodeList of elements that match the selector.

Here is the code from the video:

const activeElements = document.querySelectorAll('.active')

//activeElements.forEach(el => el.style.border = '1px solid red')

for (let i = 0; i < activeElements.length; i++)
{
    activeElements[i].style.border = '1px solid red'
}

Exercise 2

const link = document.querySelector('footer a')

<a id="fork" href="https://github.com/fvtc/js-ryans-webpage">Fork this project on GitHub.</a>

const link = document.querySelector('#fork')

link.style.textDecoration = 'underline'

//const link = document.querySelector('footer a')

const link = document.querySelector('#fork')
link.style.textDecoration = 'underline'

Selecting the Body and Title Elements

In addition to selecting elements within the body of the page, we can also select the body and title elements themselves. Take a look:

Here is the code from the video:

document.body.style.backgroundColor = 'lightgray'
document.title = "Ryan's website"

Selecting Parent and Ancestor Elements

Sometimes we have access to an element and we want to select its parent element, or an ancestor element. We can do this using the parentElement property, and the closest method.

A common use case for this is when the user interacts with an element and we want to change the style of the parent element. Take a look:

Here is the code from the video:

const contact = document.querySelector('#contact')

contact.addEventListener('mouseover', () => {
    //contact.parentElement.style.backgroundColor = 'lightblue'
    contact.closest('nav').style.backgroundColor = 'lightblue'
})

Pushing Changes to GitHub

We can run git commands in the terminal to push our changes to GitHub. If you're not sure how to push your changes to GitHub, check out the video below:

Remember, you can always refer back to the Getting Started with Version Control unit if you need a refresher.