Learn to work with your Browser and Document Object Model (DOM). In this video, we will take an HTML page, load into the Google Chrome and interact with the DOM using the Google Developer Tools. We will query and manipulate the DOM to strengthen the understanding.
If you have not heard about the DOM before, checkout What is DOM (aka Document Object Model) first. It will help you gain a conceptual understanding before you start programming with DOM.
<!DOCTYPE html><html lang="en"><head><title>bonsaiilabs - DOM 101</title></head><body><h1 lang="en" style="color: blue">Learning DOM with <i>bonsaiilabs</i></h1><h3>Team Members</h3><ul><li>Harit Himanshu: @harittweets</li><li>Deeksha Sharma: @deekshasharma25</li></ul></body></html>
// Accessing the `DOM`// Get the `Document`this.documentdocumentthis.document === document // true// Get a `Node` in the `Document`document.getElementsByTagName('h1')// Get the `Element` type from the `Node`// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constantsdocument.getElementsByTagName('h1').nodeType; // 1// Get the `NodeList` from the `Document`document.getElementsByTagName('ul').childNodesdocument.getElementsByTagName('ul').childNodes instanceof NodeList // true// Get the `NamedNodeMap` from the `Document`document.getElementsByTagName('h1').attributes// Get the `Attribute` from the `Element`document.getElementsByTagName('h1').attributes instanceof Attrdocument.getElementsByTagName('h1').attributes.namedocument.getElementsByTagName('h1').attributes.value// Modifying the `DOM`// Changing the `backgroundColor` of the `Document`document.body.style.backgroundColor = "yellow"// Changing the text for `H3` `Element` in the `Document`document.getElementsByTagName('h3').innerHTML = "bonsaiilabs Team Members"// Removing a `Node` from the `Document`document.getElementsByTagName('ul').firstElementChild.remove()
0:43 Now, the question, is if this dot document is equals to document and it returns true. So which means we can directly work with the document model. Now let's clean things up and start typing in document.getElementsByTagName. And we want to find out the by the tag H1 which is our heading. So when we do that and hit enter, we get the HTML collection back, which is an array.We open and we see that we have the element at the zero element you've want to get the first element of this document query. So we say, give me the first element and as you see that the element is highlighted and we get the entire element back as the result. Now we want to find out what type of node H1 is, so we'll do the result and then the dot node type and we get the value of one back.
1:34 What does the value of one means? If you open up the MDN documentation around the node type constant, you would find out that H1 is an HTML element. Now, let's clean the screen and type document.getElementsByTagName, and we want to find out all the unordered list items. And within this query we want to pick only the first item and we get the members names as a result. Now what we want to do next is we're going to find out all the child nodes in this result and as you see we get, the items node list back and this is the data type, another the data type in DOM and what we'll do next is we will test if the child nodes are the instances, of the node list data type we have in DOM and as you see we get the result of true.
2:21 Now let's clean the screen and try to find out all the attributes in a H1 tag. So let's do document.getElementsByTagName for H1. From this query, we are going to pick the first element in the results set and then all the attributes and when we hit the enter, as you see we get the NamedNodeMap data type back. If you see here the attributes are indexed by their position and also by their name. Now let's try to find out the attribute at the 0th index and as you see when we hit enter, we get the Lang attribute and it matches the zero-th index in the NamedNodeMap as we see here. Now we can find out if this instance, if this attribute is the instance of attribute of DOM and we do attr, and when we hit enter, you get the value of true back. Now let's try to find out the name property for the attribute at the zero-th position.
3:14 When we hit enter, we get the lang back and what's the value as you imagine it would get the value of en back. Now let's modify our DOM next. Let's set the background color for our page. So we'll do document.body.style.background, and you see color at the bottom. So we'll do backgroundColor and let's set the color to let's say yellow right now and as we hit enter, Viola, you get the yellow color. Now, Let's change it to another color. We'll say that changed the color this time to be blue. And when we hit enter we get the blue. Let's change it one more time to be color teal. And as we enter teal, the page changes to the teal color. But as you may imagine, this is only the in-memory changes and it has nothing to do with the persistence because if you refresh your page, it loads the entire source file again.
4:07 And as you see here, all the changes that we performed in our DOM, they are lost now. Now let's change the color one more time to be light blue. And as you see the page color changes. Now let's update our heading three. So we will do document.getElementsByTagName. We'll find the tag name for H3 and we will pick the first result in the query. We will find the inner HTML for this heading three which is team members and we will update it to become let's say one bonsaiilabs team members. And when we hit enter on that as you see it updated the DOM and now our H3 has been updated to contain bonsaiilabs team members. Now let's remove the team members from the list. For that, we would do document.getElementByTagName, we will find by UL tag, and we will pick the first result in the query and we will get the first element child as you see harittweets and we will call the remove method on that.