DOM Manipulation – Javascript

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.