HTML vs DOM? Let’s debug them #DevToolsTips

Key Takeaways

[Music] what is the Dom and how does it relate to HTML in this episode we will explore two of the most common and confusing web development terms let's begin when you use a browser to request a web page the server returns HTML like this the HTML is a document with instructions on how the page should roughly look like the browser needs to process and pass the HTML to create a tree of objects like this each object of the tree is a note this entire tree representing the pages content is the Dom or we call it the document object model right now the Dom looks the same as the HTML but suppose that the script reference at the bottom runs this code it removes The Heading notes and adds another paragraph note to the Dom the complete Dom now looks like this the pages HTML is now different from its Dom in other words HTML represents initial page content and the Dom represents current page content when JavaScript adds removes or edits notes the Dom becomes different from the HTML in fact when building a page with a JavaScript framework you can use a very short HTML document and add all the notes from JavaScript that works the brows owser will pass it the same way to form the Dom with that let's inspect the page with death tools there are more than five ways to open death tools you can watch my previous video to learn more right click on the page and select inspect this is the elements panel on the left is the Dom tree this is where you can inspect edit and do all Dom related activities when you are interested in a particular Dom note inspect is a fast way to investigate that note with that the note is highlighted in the Dom tree furthermore as you navigate the notes Dev tools highlights the note in your page to there are three more handy commands to help you locate your note quicker you can use control or command F to search through the Dom if you find the Dom note is not currently in the viewport instead of scrolling all the way to the bottom you can click on the three Dot and select scroll into view in addition do you see the dollar hint in the D Tree you can press escape to bring out the console and type dollar Zer to view the current note you can also modify the text content on the Fly using this command to build the note in object format you can use the Dr command if you want to view your previous note in the navigation history type dollar one will get you that similarly you can right click and scroll to view from here this dollar command is part of the console utilities API go to this video to learn more useful commands like this since we touch on editing the Dom there are multiple easier ways to edit it as well this allows you to quickly experiment changes in the UI to edit the text content of a note double click on the text and start editing press enter to apply the changes similarly if you want to change the type of this node double click it enter the new type and press enter to add a new attribute like applying styles to the element you can right click select add attribute type in your attribute name and value look at that the color changed to deep Pink by the way you can use tab to navigate through the attributes for example double click on the note and press tab it will jump to the first attribute and you can edit the value on the fly if you want to add a hyperlink adding an anchor note like this doesn't work because Dev tools passes that as text right click on the note and select edit as HTML paste in your anchor and press enter easy peasy now here is a lesson known feature you can drag and drop the Dom node to move them around once you are done with your changes you can right click and take a no screenshot then send it to your designer take note though Dev tools won't save the changes you make in the Dom all changes are gone after you reload the page even if you have set up a workspace that makes sense because it's the Dom Dev to doesn't know where and how to save the changes should it be the HTML or JavaScript with workspace you should edit the actual file in the sources panel to save changes to your source code all right that's all for now to learn more about manipulating the Dom with de tools visit this link happy coding and stay tuned for the next St two tips [Music] ciao