Selecting Elements
Open the project folder
In our starter files, open the index.html page from this lessons folder:
04.Events-And-The-DOM > 01.Selecting-elements
Reference table
To make changes to a HTML Page, we first need to know how to grab an element we want to change.
The starter file has a HTML table set up which you can view in the browser:
On the left of the table, we can select HTML elements in multiple ways, using an id, a name of a tag, a class attribute, or any valid CSS selector. With these CSS selectors we can grab any element the same way we would in a CSS file, using a tag name, a dot, or a hash for example.
Available methods
On the right are the methods. And remember from the functions section, a method is like a function, but it exists on an object. And that object is the document.
The method at the top is one which we have already looked at, and we can select a single element by it's unique id:
getElementById('main')
Notice the highlighted letter s in some method names. This is because an id for example, will only return one element, since an id is unique. But, selecting an element by it's name or class, can return multiple elements.
Viewing the document
In the script, log the document to the console:
<script>
console.log(document);
</script>
You will see the document in the console:
<!DOCUMENT html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>
As covered earlier, the document is the top level of the DOM tree, so it covers everything in our HTML page. The document object has lots of properties and methods we can use, and you can see these in the console, here are some examples to try:
document.location
document.images
document.url
document.head
document.body
And this goes back to earlier when we looked at object types such as arrays and we discovered they had lots of built-in properties and methods. The reason we can access this document is because it is available globally on the window object, so we could also access it via the window:
console.log(window);
Open this in the console and you will see the document as a property. But what were interested in now are the methods available to select the required elements.
Selecting elements by id
First, create an element we want to select inside the body section:
<p id="text"></p>
Then in the script, select the element by id, and log to the console:
const text = document.getElementById('text');
console.log(text);
Selecting multiple elements by tag name
What about if we have 2 <p> elements? Add a second <p> element below the first:
<p id="text"></p>
<p>new text</p>
To get both <p> elements we have two options. On the second row of the table, we see we can use the tag name, and getElementsByTagName can hold multiple elements so this is fine to use.
The same for the last row, we can also use the tag name to get these elements as we can in CSS, let’s try with the tag name:
const text = document.getElementsByTagName('p');
console.log(text);
HTML Collections
This will give us a HTML Collection with our two elements. A HTML collection is a generic, array like, collections of elements. And this is how our returned elements are stored.
Like with arrays, we can access specific values by the index position. We can update our console log to see this:
console.log(text[1]);
Since it is a HTML collection, we don’t have access to array methods.
Selecting by class name
Next, we have the class name, and for this we need a class added to an element:
<p id="text"></p>
<p class="text-small"></p>
And going off our table, this one should be easy to change to:
const text = document.getElementsByClassName('text-small');
console.log(text);
Since we can have multiple elements with the same class, we also get back a HTML collection containing the elements.
Using CSS selectors
The last two methods work in a similar way to the rest, but we pass in a CSS selector to get a single, or multiple elements. Any CSS selector is valid, such as:
.text-small,
#text,
div
div > p
Using querySelector will only return the first match:
const text = document.querySelector('p');
Even though we have two <p> elements, we only get back the first one. If we want them all, we just add “All” to the end:
const text = document.querySelectorAll('p');
You may be expecting a HTML collection here, but it will say NodeList in the console, there are some differences, and we will look at what these are later.
Finally, since this uses any CSS selector, we can also select it using an id or a class:
const text = document.querySelectorAll('.text-small');
Also remember here that on it's own, JavaScript does not know about our HTML model, it is accessing the document and the elements we need through the DOM.
Now we know how to select HTML elements, we can next move on to making some changes to them.