React 18 — What is new?

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>

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"); = "blue";
box.textContent = "new element";

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"); = "blue";
list.textContent = "List Element" + i;

Below topic helps to implement the scenario more efficiently.


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"); = "blue";
list.textContent = "List Element" + i;

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>

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)

// select the first child of #container => .display

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

// selects the prior sibling => .display

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

DOM Methods

  • 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
  • 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.
  • parentNode.appendChild(childNode) appends childNode as the last child of parentNode
  • parentNode.insertBefore(newNode, referenceNode) inserts newNode into parentNode before referenceNode
  • parentNode.removeChild(child) removes child from parentNode on the DOM and returns reference to child
  • 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.

Reference —

Originally published at

New to Medium — Associate consultant by profession — JS and ReactJS Developer — Loves cooking and travelling.