Programming DOM (Document Object Model) in JavaScript

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.

Code

<!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.document
document

this.document === document // true

// Get a `Node` in the `Document`
document.getElementsByTagName('h1')[0]

// Get the `Element` type from the `Node`
// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants
document.getElementsByTagName('h1')[0].nodeType; // 1

// Get the `NodeList` from the `Document`
document.getElementsByTagName('ul')[0].childNodes
document.getElementsByTagName('ul')[0].childNodes instanceof NodeList // true

// Get the `NamedNodeMap` from the `Document`
document.getElementsByTagName('h1')[0].attributes

// Get the `Attribute` from the `Element`
document.getElementsByTagName('h1')[0].attributes[0] instanceof Attr
document.getElementsByTagName('h1')[0].attributes[0].name
document.getElementsByTagName('h1')[0].attributes[0].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')[0].innerHTML = "bonsaiilabs Team Members"

// Removing a `Node` from the `Document`
document.getElementsByTagName('ul')[0].firstElementChild.remove()

Full Transcript

0:00 Hey there. It's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today in this video, we will do hands on programming to work with the DOM or the document object model. If you haven't seen the previous video where I introduced the DOM basics, click on the card here and watch that one first. It will help you gain the visual understanding about the DOM. Alright, so as you see that I've opened up to Google Chrome. Here is the source code for the page that we are looking right now and we go back to the page and we look at the developer console. Let's type in this dot document. So wh en we do that, the entire page is selected and we see the document element being returned. Now next thing we want to do is to type document, a nd if you see we get the same document back.

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.

5:04 So when we call remove and hit enter as you see in the name Harit Himanshu is now gone. We will try to call it again. And once we do that, the second team member is gone as well. If you refresh the page, the entire content from the file would create the DOM again and all the changes that we made will be lost. And that's it. I hope you learned something new today. If you like the video, please hit the subscribe button on our channel to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. There is literally everything possible once you set your mind to achieve it, see you next time.