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.
Add comment