Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks
Skill Level Intermediate
If you've been a web developer for any length of time, you've probably peeked at the source code for websites. It's usually under an option in the developer tools in your browser called View Source. The problem with View Source is it only shows you only the original HTML for the page, when it is loaded, as you add and delete elements to use interactions on a page. The DOM grows and shrinks dynamically. That's why most browsers have another option called the Developer Tools. In this movie, we're going to take a look at some of the tools for managing the DOM in Google Chrome.
There's a few ways to get to these tools. The most obvious is going through the menus and choosing Developer Tools from the View menu. You may want to remember the keyword shortcut for your machine. I'm using a Mac, so mine is Cmd+Option+I. If you're using a PC, this would be Ctrl+Alt+I. When you first pull up the tools, notice that there's different tabs at the very top. There's tabs like Elements, Resources, Network, et cetera. You can navigate through the different tabs, holding down the Cmd key on a Mac, or Ctrl on a PC, and using the bracket keys.
The right bracket navigates through the tabs to the right, and the left bracket takes you to the left. When working with the DOM, we're really interested in two tabs. The Element tab, as well as the Console, which is the last tab. You can go to the console directly with Cmd+Option+J. That turns it on and off. So even if I'm in the Elements tab, I hit Cmd+Option+J, it takes me directly to the console. That would be Ctrl+Alt+J on a PC. By default, your dev tools are on the bottom of the screen. You can also undock them by hitting this button at the bottom of the screen. Now, this becomes a separate window.
If I click on this button again, then they'll dock again into the bottom of the current document. If you've got a white screen you can also place the tools to the right. You have to click and hold this button down and select this little option. Now the tools will appear on the right hand side of your screen. And that's good if you've got a really wide screen. Now, when you toggle them, by hitting this toggle right here, it'll go from the bottom view to the side view. If you want to switch back to extracting the dock as a separate window, you can click and hold down the mouse and select this option right here.
This'll open it up in a new window. And clicking will take you back to the other view. So I'm going to keep my dock at the bottom of the screen, so I'll choose this option. The Elements tab and the Console are super far apart, but if you click on this icon at the bottom of the screen, you can temporarily show the console in any view. So I'm going to switch back to the Elements tab, and I'm going to make this window bigger. I can go to the edge and just click and drag this up, and then I'm going to hit this button right here. And it automatically pulls a version of the console right underneath the Elements tab.
You can also use the arrow keys and sometimes that's a little faster. So if you hit up and down you navigate up and down the DOM. If you hit the right arrow, then you'll expand a DOM element. And if you hit the left arrow, you'll collapse it. When you highlight an item in the elements tab, it gets highlighted in the main document window, so you can see that, if I choose this article, the article area in my document area becomes blue. There's also a little option that pops up. But right now, says article pound main and is showing you the dimensions of that element in the current window. Notice that at the bottom it also gives you breadcrumbs right here and if I go deep into some of these element we can see that this grows. And you can can click on these tabs to navigate to that DOM element. You can also turn on the document inspector at the bottom of the screen. That's this little icon right here.
If I turn that off, you'll notice that I can just navigate to my document as normal. If I roll over in the navigation these things highlight. If I turn this on, now when I go over the document the elements highlight on screen. So if I click on this element it'll highlight on the DOM. It's sort of the reverse of navigating down here. Now, once you click you're back in normal mode and notice that if I try to select something here, it doesn't happen any longer. So I would have to click on this icon again to get to that mode again...
Sometimes it's useful to see your document and pretend a user is rolling over an area. So you can do that by clicking on the elements, so let's click on artists right here. And then over here on the right hand side you can click on this toggle element state icon. And then, you can have it pretend that somebody's rolling over or hovering over that particular element. Notice that it's showing the different background, that happens if somebody rolls over an element. That's now looked into position. You can temporarily edit the source of a document by selecting a line and then hitting Enter or Return. So if I click on this and I hit Enter (SOUND) notice that it lets me edit the href.
If I hit the Tab key it's going to let me edit next to the href. Let's go ahead and click on this item right here and hit Enter. And notice that I can modify the class. And if I hit Tab again, it lets me add something else in here. So I can maybe have an ID. And now that's been added into the DOM. Now these changes are temporary and will be lost whenever you reload the page. i am going to hit Cmd+R and reload the page, and notice that all my changes are gone including the hover command. Now, so let me do that again. I will go over here into the home item this time and select hover. Notice that there's also little marker on the left hand side that's showing you that this element is in hover state.
So as I mentioned you can double-click on an element or hit Return to edit a specific element. You can Tab through the different items in that element. But this sometimes is kind of a little bit of a weird way of editing. So you can go into regular HTML editing mode by hitting the F2 key on your keyboard. You may have to press the Function key, depending on what you're using. So if I do that, you can see that I can edit this in normal html mode like I would on a text editor. This option is also available by right-clicking on a line. So if I click on this, and I right-click, which is Ctrl+click on a one-button mouse.
Then you can select Edit as HTML. Now, there is a lot of additional goodies you can access by right-clicking on things. So let's take a look at some of those. If you right-click on any element on the page and select Inspect Element, it takes you directly to that element in the DOM. You can also force a state from this pop up windows. So, if I right-click on top of the A tag here, I can select Force Element State > :hover. It's like I can from this window over here. Now, you can also do Copy XPath and that gives you a copy of the path to this element.
So, if I just paste that right here, you can see that it's sort of like the breadcrumbs. It tells you how to get to that specific element. (SOUND) One more thing that you can do is hit the Cmd+F button or Ctrl+F on a PC, and choose to find an element just by typing it in. So if I want to get to the main ID here I can just type main right here and it takes me directly to that. That's really useful on a very, very long document where you're not really sure where something is. And you can go through each element by doing this, going up and down if there's more than one. Let's try to look for list item elements here.
So it's finding that element, and then noticing that there are six of them. And I can navigate through them like this, or hit Cmd+Shift+G or Cmd+G to go up and down those elements. It's always a good idea to spend some time with your tools and learning how to use the developer console is really useful. If you invest a little bit of time on memorizing some of these short cuts you're going to save yourself a lot of time when you're developing.