8.1 Selecting HTML Elements

Hi folks. In this section, we're going to focus on using JavaScript to work specifically with HTML pages, and the different elements they contain. Starting with the different ways that we can select elements from the page in this lesson, working with web pages programmatically is not a goal of the core ECMAscript specification that JavaScript is based on. But the W3C have also added a number of specifications for working with the DOM, or the Document Object Model, as it's officially known, which represents a web page. A web page is made up of individual nodes, which constitute the different elements that make up the page. These elements, or nodes, are organized in a tree structure, where some nodes are parents, and some nodes are children, or siblings, of other nodes. Let's just add an element to our index page. We do have some elements on here already, but these are elements that we don't usually work with in JavaScript very often. So let's just add a heading. Okay so our index.html page now contains a heading. And we've given this heading an ID of mainheading, and the heading has some text. One of the fastest and easiest ways of selecting an element from the page is by using the getElementByID method. So let's select the heading that we just added. And let's take a look at the output in the browsers console. And we can see that it has logged the heading node to the console. So the getElementByID method is a method of the document object. And the document object represents the web page as a whole. Remember the window object represents the browser. The document object represents the page loaded within the browser. So the getElementById method returns a reference to an element. But if there isn't an element with the specified ID on the page, the method returns null. So the getElementById method returns a single object. Elements on the page should always have unique IDs, so the getElementById method will always return a single elements. Or null if there aren't any matching elements. But it should always return a single element if there is an element matching the ID. So if we want to get a collection of elements instead of a single element, there are a couple of different methods that we could use. Let's just go back and add some different elements to the page now as well So I've added a simple, unordered list with three list items. Each of these list items has the class item. So if we want to get all of the elements that have a particular class name, we can use the getElementsByClassName method instead. Now we can see that we have a collection of the matching elements from the page. Now it looks very much like an array. But just like the arguments object within a function, it's only an array-like collection. It's actually a node collection, or an element collection. It's not a true array. So we can't call true array methods on it. Just something to be aware of. We can also get all of the elements of a certain type. So, let's imagine that the list items didn't have a class name. We could still select them all by using the getElementsByTagName method instead. And we see another identical collection of list Items. Some elements, like form elements for example, can have a name attribute. And we can also select all elements that have a particular name attribute using the getElementsByName method. This method works in the same way, and returns the same type of object, as the getElementsByClassName and getElementsByTagName methods. So in this lesson, we looked at some of the different DOM methods we have for selecting elements, or collections of elements, from the page through the document interface. We looked at getElementByID, which is by far the fastest way to select a single element. And we looked at the getElementsByClass name and getElementsByTagName methods, which can return lists of nodes or DOM elements. In the next lesson, we'll move on to look at how we can manipulate elements once we have selected them from the page. Thanks for watching.