DOM Manipulation

What is DOM ?

4 min readOct 28, 2020

The DOM(Document Object Model) is a programming interface for HTML and XML documents where HTML elements are treated as tree with nodes, branches, and leaves. DOM allows to create, edit and delete HTML elements using JavaScript.

The representational tree that the browser create after it read your document.

When a web page is loaded, the Document object model of the page is created on the browser.

Methods

The DOM has a lot of methods. DOM methods allows access to the tree, by which manipulation in the DOM is done. Some of the methods are mentioned below, but others can be found here.

So, here is the example to see some methods and how events work.

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document Object Model</title>
  </head>
  <body>
     <div class="container">
           <h1>This is h1 element.</h1>
           <h1>Hello World!</h1>
           <ul>
              <li id="testId">Test 1</li>
              <li class="testClass">Test 2</li>
              <li class="testClass">Test 3</li>
           </ul>
     </div>
  </body>
  </html>

getElementById()

This method returns object of the element whose id property matches the string. Id’s should be unique, so this method is useful to get the element preferred.

var testID = document.getElementById('testId');

getElementByClassName()

This method returns collection of all elements in the document with specific class name.

var testClass = document.getElementByClassName('testClass');

getElementByTagName()

This method is similar with the above method. This method returns collection of all elements in the document with specific tag name.

var testTag = document.getElementByTagName('h1');

querySelector()

This method returns the first element that matches the specific CSS selectors. For id attribute, use hash (‘#’) symbols, and for class attribute, use period (‘.’) symbols.

var myTest = document.querySelector('#testId');

querySelectorAll()

This method is similar with querySelector() but returns all the element that matches the specific CSS selectors.

var myTest = document.querySelectorAll('.testClass');

innerHTML

This property returns or sets the HTML or XML content of an element.

<h3>This is h3 element.</h3>
<p id="test"></p>document.getElementById('test').innerHTML = "Hello World!";

attributes

This property returns collection of all attribute nodes registered to the specified node.

<img id="myImg" alt="testimage" src="test.jpg" width="150">var myTest = document.getElementById('myImg').attributes.length;

This method adds value of an attribute on the specified element.

<h3>This is h3 element.</h3>
<p id = "test"></p>document.getElementById('test').setAttribute('style', 'color: red;');

createElement()

This method creates the HTML element by tagName.

var newTest = document.createElement('h1');

createAttribute()

This method creates a new attribute with the specific name, and returns it.

var newTest = document.createAttribute('href');

createTextNode()

This method creates a Text Node with the specific text.

var newTest = document.createElement('h1');
var newNode = document.createTextNode('Hello World!');
newTest.appendChild(newNode);

removeChild()

This method removes a child node of the element.

<ul id = "testremove">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

var myTest= document.getElementById('testremove');
myTest.removeChild(myTest.childNodes[0]);

appendChild()

This method appends node as the last child of of the existing node.

var newTest = document.createElement('h1');
var newNode = document.createTextNode('Hello World!');
newTest.appendChild(newNode);

replaceChild()

This method replaces a child node with a new node.

<ul id = "testremove">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

var newTest = document.createTextNode("Test fail");
var myTest = document.getElementById("testreplace").childNodes[0];
myTest.replaceChild(newTest, myTest.childNodes[0]);

write()

This method writes string of text to a document.

document.write('<h1>Hello World!</h1>');

Events

The DOM has also got events which are responsible for making the page interactive.

var eventTest = document.getElementById('main');

eventTest.onclick = function(e) {
    // do something
    console.log(e.target);
}

Some of the other common events are click, dbclick, mouseup, mousedown, mouseover, mousemove, mouseout, change, keydown, keyup, focus, blur.

For better user experience , before the browser render the page, DOM is constructed. It will not wait until all HTML is delivered to browser. Parts of the content will be delivered and displayed while process continues with rest of the contents that results in rendering the page again and again.