We've now done a few videos on how you can select nodes in different ways from the DOM. We've also as a part of those videos, changed some of the attributes of those nodes just to show you what's possible. We haven't gone into detail of what can be changed. But we have shown you a few things. Well, you may be asking yourself, Well, how do I know what I can change and what I can't change what's even available with a particular node to change? Well, in this movie, we're going to take a few minutes just to teach you a console command that would allow you to display the different attributes that are part of a node element.
So I'm going to go to the same page I was using in the last video. In the last video, we selected all the span tags, which is the part that is causing the ID the tagging and CSS class to be blue because there is a CSS class associated with a span tag. So let's select those again. And then let's look at a command that's available on the console for you to be able to display the properties or attributes that are associated with a node. So let me open the console. I'm going to do the same command, where I select by tag name, all the span tags.
Now, as we saw in the previous video, I can type in that variable and I can see what's been selected, but I don't have a lot of details about those. I can also do a console dot log and display one of them. I'll select the first one in this case. And that displays a single no that we've selected. But what if I want to get more Details while there is a console dot Dir. Or you can just type dir as well let me do console dot dir first.
And then we will select also the first one. And notice it provides and icon for opening up and exploring that node. Okay, now as I mentioned, we can just do dir as well. So that's another way to accomplish the same thing when you're in the console. Obviously, if you were doing this from outside the console from a JavaScript page, then you will need to enter console dot Dir. So now let me just show you what's available as a part of this expanding node.
It basically lists all the properties that are associated with the node. So you can scroll down through here and see that there are a number of things. Notice here is hidden. This is one of the properties we've been dealing with here is ID, the ID is not set for this particular node. There are a lot of different properties that are available. Here a bunch of events which we have not discussed yet.
One I want to touch on before we finish this video is this style. We've covered that in a little bit of detail. I think we've done two or three attributes of the style. But notice when you come to the style inside of this node, it opens up again. And inside of there, you can see all of the different things you can change about the style So as you can see, there are a lot of possibilities. And this tool the DIR command is simply a tool to help you discover what's available.
What you can change with JavaScript. So use it to learn about the properties associated with individual nodes that you may select from within the DOM. Alright, let's continue with the next topic.