Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Navigating the DOM with developer tools

From: JavaScript: Enhancing the DOM

Video: Navigating the DOM with developer tools

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.

Navigating the DOM with developer tools

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 do this by hitting the Esc key and it toggles that on and off. The Elements tab shows you a visual representation of the DOM on the left and on the right, you can modify the styles of the document. Since we're working on JavaScript in the DOM, we're really interested on this left side of the window. Notice that you can navigate through the DOM by clicking on these little triangles to expand the DOM tree. So I can open up this header element. And open up this Nav right here. Open up the ordered list. And then click on one of these list items.

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.

Show transcript

This video is part of

Image for JavaScript: Enhancing the DOM
JavaScript: Enhancing the DOM

36 video lessons · 7629 viewers

Ray Villalobos
Author

 
Expand all | Collapse all
  1. 2m 36s
    1. Welcome
      59s
    2. What you should know before watching this course
      50s
    3. Using the exercise files
      47s
  2. 24m 33s
    1. What is the Document Object Model (DOM)?
      3m 2s
    2. Navigating the DOM with developer tools
      8m 10s
    3. Testing JavaScript commands with the console
      5m 50s
    4. Communicating with the console through JavaScript
      7m 31s
  3. 31m 9s
    1. Selecting elements with getElementById
      4m 10s
    2. Choosing elements by HTML tag
      3m 20s
    3. Isolating elements by class name
      3m 12s
    4. Querying CSS to select elements
      4m 54s
    5. Working with named form elements
      3m 39s
    6. Understanding nodeType, nodeName, and nodeValue
      4m 30s
    7. Traversing up and down DOM nodes
      4m 40s
    8. Targeting node elements
      2m 44s
  4. 22m 25s
    1. Changing HTML attributes
      5m 25s
    2. Working with restricted attributes
      2m 49s
    3. Detecting data attributes
      3m 29s
    4. Controlling classes with the HTML5 classList
      3m 21s
    5. Targeting the attributes property
      1m 24s
    6. Using text content modifiers
      3m 42s
    7. Modifying elements as text
      2m 15s
  5. 14m 57s
    1. Creating and appending nodes
      4m 27s
    2. Controlling node insertions with insertBefore
      3m 17s
    3. Cloning and removing nodes
      4m 41s
    4. Replacing existing nodes
      2m 32s
  6. 26m 14s
    1. What we'll build
      2m 16s
    2. Adding a bubbling event listener
      4m 11s
    3. Creating and styling an overlay with JavaScript
      4m 39s
    4. Adding an image
      3m 48s
    5. Resizing images in the DOM
      2m 59s
    6. Centering an image
      2m 36s
    7. Handling clicks
      1m 29s
    8. Adjusting for scrolling
      1m 36s
    9. Detecting and adjusting for a window resize
      2m 40s
  7. 1m 49s
    1. Next steps
      1m 49s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript: Enhancing the DOM.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.