Coders Read

DOM Manipulation – Javascript

This article is on one of the common things you may want to do when developing a web page. This is regarding manipulating the structure of the document which is usually done by using the Document Object Model.

Document Object Model

The DOM (or Document Object Model) is a tree-like representation of the contents of a webpage — a tree of “nodes” with different relationships depending on how they’re arranged in the HTML document.

<div id="container"> 
    <div class="menuSection"></div> 
    <div class="footerSection"></div> 
</div>

Here, the <div class="menuSection"></div> is a “child” of <div id="container"></div> and a sibling to <div class="footerSection"></div>. Think of it like a family tree. <div id="container"></div> is a parent, with its children on the next level, each on their own “branch”.

Adding nodes to the DOM

New nodes can be added to the DOM with Javascript. createElement() method creates a new element node. appendChild() method adds a child node to the existing node.

let box = document.createElement("div");
box.style.color = "blue";
box.textContent = "new element"; 
document.body.appendChild(box);

This looks good, but imagine if we have a loop which repeatedly adds node to the document body. Every time the node is added it triggers a reflow of the document and affects the performance of your application.

for(let i=0; i< 10; i++) {
  let list = document.createElement("li");
  list.style.color = "blue";   
  list.textContent = "List Element" + i;   
  document.body.appendChild(list); 
}

Below topic helps to implement the scenario more efficiently.

DocumentFragment

DocumentFragment is a document object which has no parent. It is used to append nodes. And it is not a part of active document tree structure. Thus our prevents reflow of the document.

You can consider DocumentFragment as a temporary box where you store your nodes before adding it to the actual DOM.

let fragment = document.createDocumentFragment();
for(let i=0; i< 10; i++) {
  let list= document.createElement("li");
  list.style.color = "blue"; 
  list.textContent = "List Element" + i; 
  fragment.appendChild(list); 
}
document.body.appendChild(fragment);

Target Nodes with Selectors

When working with the DOM, use “selectors” to target the nodes you want to work with. You can use a combination of CSS-style selectors and relationship properties to target the nodes you want. Let’s start with CSS-style selectors. In the example below

<div id="container">
  <div class="display"></div>
  <div class="controls"></div>
</div>

You can also use relational selectors (i.e. firstElementChild or lastElementChild etc.) with special properties owned by the nodes.

const container = document.querySelector('#container');
// select the #container div (don't worry about the syntax, we'll get there)

console.dir(container.firstElementChild);                      
// select the first child of #container => .display

const controls = document.querySelector('.controls');   
// select the .controls div

console.dir(controls.previousElementSibling);                  
// selects the prior sibling => .display

So we are identifying a certain node based on its relationships to the nodes around it.

DOM Methods

Query Selectors

  • element.querySelector(selector) returns reference to the first match of selector
  • element.querySelectorAll(selectors) returns a “nodelist” containing references to all of the matches of the selectors

Element Creation

  • document.createElement(tagName, [options]) creates a new element of tag type tagName. [options] in this case means you can add some optional parameters to the function. Don’t worry about these at this point.

Append Elements

  • parentNode.appendChild(childNode) appends childNode as the last child of parentNode
  • parentNode.insertBefore(newNode, referenceNode) inserts newNode into parentNode before referenceNode

Remove Elements

  • parentNode.removeChild(child) removes child from parentNode on the DOM and returns reference to child

Adding inline style

  • First, select the element by using DOM methods such as querySelector(selector). The selected element has the style property that allows you to set the various styles to the element.
  • Then, set the values of the properties of the style object.

. . . . .

Thanks for reading this story. Enjoy learning and sharing.

Sourabh Sinha

Add comment

Follow us

Feel free to get in touch. I love meeting interesting people and making new friends.

Any suggestions will be appreciated.