What does DOM mean?

DOM stands for Document Object Model and it's basically a structured representation of our HTML document. We can use JavaScript to read and manipulate the DOM elements. Traversing the DOM is an integral part of JavaScript and helps us a lot while writing code.

The window object is an object of the browser. Remember, it's not an object of javascript. The document object on the other hand is a property of the window object. It's the root node of the HTML document.

console.log(document.domain); //prints the domain of the webpage
console.log(document.URL); //prints the URL of the webpage
console.log(document.title); //prints the title of the webpage
console.log(document.all); //prints aan array of all the HTML elements in the
//document

Selectors

Selectors are used to find HTML elements based on their id, classes, tag, attributes, etc.

getElementById: In this, the HTML element with the particular id is selected.

 <div id = 'first'> Hello World </div>

 let first = document.getElementById('first');//get's the div with id first
 first.textContent = 'hello'; //changes the content of div
 first.style.color = 'red'; //changes the color

getElementsByClassName: This method returns all the HTML elements with the specified class name.

 <ul class = "list">
     <li class = "list-item">Item 1</li>
     <li class = "list-item">Item 2</li>
     <li class = "list-item">Item 3</li>
 </ul>

 let item = document.getElementsByClassName('list-item'); //get's all the 
 //elements with class name 'list-item'
 console.log(item);
 item[2].textContent = "Hello 3"; //changes Item 3 to Hello 3

getElementsByTagName: This method returns all the HTML elements with the specified tag. It is similar to getItemsByClassName method.

 <ul class = "list">
     <li class = "list-item">Item 1</li>
     <li class = "list-item">Item 2</li>
     <li class = "list-item">Item 3</li>
 </ul>

 let item = document.getElementsByTagName('li'); //get's all the 
 //elements with li tag
 console.log(item);
 item[2].textContent = "Hello 3"; //changes Item 3 to Hello 3

querySelector: This method grabs the first HTML element that matches the specified CSS selector.

 <ul class = "list">
     <li class = "list-item">Item 1</li>
     <li class = "list-item">Item 2</li>
     <li class = "list-item">Item 3</li>
 </ul>

 let item = document.querySelector('.list-item'); //grabs the first element
 //with class list-item, in this case item 1
 item.textContent = "Hello 1";

querySelectorAll: This method returns all the HTML elements that match the specified CSS selector

 <ul class = "list">
     <li class = "list-item">Item 1</li>
     <li class = "list-item">Item 2</li>
     <li class = "list-item">Item 3</li>
 </ul>

 let item = document.querySelectorAll('.list-item'); //grabs all elements
 //with class list-item
 item[1].textContent = "Hello 2";

Traversing the DOM

The nodes in the node tree have a hierarchical relationship with each other. We can describe this relationship by using the terms parent nodes, child nodes or sibling nodes. A child node can have only one parent node. A parent node can have any number of child nodes. Nodes of the same parent are called siblings.

Child Nodes to Parent Nodes

We can access the Parent node from it's child nodes using parentNode

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

let child = document.querySelector('.child');//grabs the first element
//with class child
let parent = child.parentNode; //goes to the parent which is, in this
//case, the div with class parent
parent.style.color = 'red';

Parent Node to Child Nodes

childNodes: This property returns a collection of children for a particular element

  <div class="parent">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
      <div class="child">Child 4</div>
  </div>

  let parent = document.querySelector('.parent');
  let child = parent.childNodes;
  child[1].textContent = "Hello 2";

firstChild: This property returns the first child of a particular element

  <div class="parent">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
      <div class="child">Child 4</div>
  </div>

  let parent = document.querySelector('.parent');
  let child = parent.firstChild;
  child.textContent = "Hello 1";
  child.style.color = 'red';

lastChild: This property returns the last child of a particular element

  <div class="parent">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
      <div class="child">Child 4</div>
  </div>

  let parent = document.querySelector('.parent');
  let child = parent.LastChild;
  child.textContent = "Hello 4";
  child.style.color = 'yellow';

Nodes to Sibling Nodes

nextSibling: This property is used to go to the next node

  <div class="parent">
      <div class="child" id="child-1">Child 1</div>
      <div class="child" id="child-2">Child 2</div>
      <div class="child" id="child 3">Child 3</div>
      <div class="child" id="child 4">Child 4</div>
  </div>

  let node = document.querySelector('#child-2');
  node.nextSibling.textContent = "Hello 3"; 
  node.nextSibling.style.color = 'red';

previousSibling: This property is used to go to the previous node

  <div class="parent">
      <div class="child" id="child-1">Child 1</div>
      <div class="child" id="child-2">Child 2</div>
      <div class="child" id="child 3">Child 3</div>
      <div class="child" id="child 4">Child 4</div>
  </div>

  let node = document.querySelector('#child-2');
  node.previousSibling.textContent = "Hello 1"; 
  node.previousSibling.style.color = 'yellow';

Creating Elements

We can create a Node using the createElement() function. We can set the attributes of the of the element using the setAttribute() function. If we want to add any text to the created element we can use the createTextNode() function and append it to the newly created element using the appendChild() function.

<div class="parent">
    <div class="child" id="child-1">Child 1</div>
    <div class="child" id="child-2">Child 2</div>
    <div class="child" id="child 3">Child 3</div>
    <div class="child" id="child 4">Child 4</div>
</div>

let newDiv = document.createElement('div'); //creating a new div element
newDiv.setAttribute('class','child'); //assigning it to class child
let text = document.createTextNode('Hello World'); //creating a text node
newDiv.appendChild(text); //appending the text to the newly created div
document.querySelector('.parent').appendChild(newDiv); //appending the 
//div to the parent Node

Inserting Elements

We can insert elements in the document using the appendChild() function but there is a better way of doing it. The insertBefore() function can be used to insert an element before a specified element.

<div class="parent">
    <div class="child" id="child-1">Child 1</div>
    <div class="child" id="child-2">Child 2</div>
    <div class="child" id="child 3">Child 3</div>
    <div class="child" id="child 4">Child 4</div>
</div>

let parent = document.querySelector('.parent');
let newDiv = document.createNewElement('div');
let ref = document.querySelector('#child-2');
newDiv.setAttribute('class','child');
let text = document.createTextNode('Hello World');
newDiv.appendChild(text);
parent.insertBefore(newDiv, ref); //inserting newly created div element 
//before the second child node

Conclusion

That was just the basics of DOM. I hope that this blog helped you build your basics in DOM. You'll keep improving as you code. Just remember to take things slowly. It might seem a bit difficult but you'll get used to it as you start using and traversing the DOM.

Maanav