In the previous video, we talked about the two step process for modifying DOM elements. The first step is selecting the element. In this video, we're going to introduce the different ways you can select elements of the DOM will then spend the next several videos talking about those different ways that you're able to select elements. We will also be modifying some of those elements. So we'll be doing a little bit of step two, but we'll mainly be focusing on selecting. Then once we covered the different ways to select elements, we'll look more in depth at different ways you can modify those elements.

So let's take a look at the different ways which is possible to select the elements of a DOM. First off, you can simply use syntax to select elements. Now, you may be thinking, well, from what I've seen so far, the nodes of the HTML page are created in the object. So I should be able to just traverse the HTML document using dot syntax. For example, I could go document body div.ul, and so forth. However, that does not work.

That works. To a certain extent, there are a few things you can select using dot syntax. In order to select other items on the HTML page, you must use methods that are provided. So the dot syntax is very limiting, but we'll look at what's possible at the end of this movie. Then you can select by specifying an ID. So in HTML, every HTML element can have an ID to identify that element.

If you as a developer are responsible For the HTML code as well, then you can have IDs in your document. For the places that you'll you know, you'll be using JavaScript. So selecting elements with an ID as possible, selecting elements by tag. So you can specify the HTML tag, and select elements that will return an array of elements. If you simply did that with a body tag, you would have one item in the array because there is only one body tag. But other tags such as a paragraph tag, you would have a large array of elements.

You can specify by class. So if a CSS class is assigned to an element, you can find it specifying class, once again, that will return an array of elements as well because there could be more than one element that has that class. You also specify using CSS selectors. Now if you're familiar with CSS, and the way you use selectors in CSS to identify where you want to make style changes, those same CSS selectors are very powerful and can be used to select elements of a DOM for manipulation with JavaScript. And finally, there is a special way for selecting form elements, a method created just for that and it's selecting by name because form elements can have a name associated with them. Alright, let's look at the possibilities for selecting elements with dot syntax.

So there are four possible ways to select elements with with dot syntax document dot body. That's what you type in. document dot body that returns the body tag, document dot forms, this returns An array of forms that exist on the HTML page, document dot image returns an array of images that exist on the HTML page. And document dot links returns an array of links. Let's look at a few of these. So you can get your feet wet with selecting DOM elements and making some minor modifications to them.

I'm going to use the console with this HTML page that we're currently viewing. And I'm going to use a couple of these commands in the console to select elements and then do something with them. So let me open the console. I'm going to use document dot images first. So I'm going to create a variable and I'm going to set that variable equal to document dot images. Now, as I said, that will be an array and when I press return, and then display images, you'll see that there are two elements in this array.

I purposely put two images on this HTML page so that we could have more than one element in the array. Now, knowing that you get an array back, that should indicate to you how you reference the individual nodes that are a part of this array. So for example, let's say I wanted to change the first image, I can reference that using the brackets. So images, zero will reference the first image. Now, once I have that particular element, that node, I can now change attributes that are a part of that node. Let's say I wanted to change the src attribute.

So I set that equal to I'm going to use a new path images slash modern logo dot png. No, that image happens to be the one that's down here. I'm changing the one At the top to the same image that is showing at the bottom. So when I press return, notice the image at the top has changed. Alright, let's say I wanted to get links that are on this page. document dot links.

I press return now when I display links, I see there is one link. Now where's that link at? Well, I happen to have another bullet that is still hidden. I'll now show that. Let me jump back to the console. Let's change that href attribute of this and then we'll try the link to see if see if that change works.

So I'm going to do links now even though there's still one item in the array, I still have to specify its position and I'm going to change href set it equal to a string TCP colon slash slash just go to Google. Okay, now I've changed that. Let's see if that changed, worked. And sure enough it did. So dot syntax works for selecting certain items on the page. That's not the most widely used method for doing this, but I wanted you to be familiar with it.

You also saw how we were able to change a few of the attributes or properties of those elements once we selected them. And let's continue on and learn some additional methods for selecting elements on the HTML page.