Categories
JavaScript

Introduction to DOM Manipulation

gray animal
Spread the love

Making websites dynamic is important for a lot of websites. Many of them have animations and dynamically display data. To change data without refreshing the page, we have to manipulate the document being displayed. Web pages are displayed in the browser by parsing them in the tree model called the Document Object Model (DOM).

The DOM tree is made up of individual components, called nodes. All web pages’ DOMs start with the root node, which is the document node. The node under the document node is the root element node.

For web pages, the root element node is the HTML node. Below that, every other node is under the HTML node, and there lie nodes below some of the nodes which are linked to the parent node. Together, the nodes form something that’s like an inverted tree.

There are several types of nodes in the DOM:

  • Document node — the root of the DOM in all HTML documents
  • Element node — the HTML elements
  • Attribute nodes — attributes of the element nodes
  • Text nodes — text content of HTML elements
  • Comment nodes — HTML comments in a document

Relationship of Nodes

The DOM is a tree with a root node and elements linked to the root node.

Every node has one parent node — except the root node. Each node can have one or more children. Nodes can also have siblings that reside at the same level of the given node.

If there are multiple elements of the same type, then you can get the node by getting the same type of node as a node list and then get the one you want by its index. A node list looks like an array, but it’s not one. You can loop through the elements of a node list, but array methods aren’t available in node lists.

For example, if we have the following HTML document …

<html>  
  <head>  
    <title>HTML Document</title>  
  </head>  
  <body>  
    <section>  
      <p>First</p>  
      <p>Second</p>  
      <p>Third</p>  
    </section>  
  </body>  
</html>

… then we can get the document p tags, by adding the following:

const list = document.body.childNodes\[1\].childNodes;  
for (let i = 0; i < list.length; i++) {  
  console.log(list)  
}

In the script of the document to get the nodes, the script gets the body and then gets the second child node (which is the section tag). Then it gets the child node by accessing the childNodes property again, which will get the p tags.

Together, we have:

<html>  
  <head>  
    <title>HTML Document</title>  
  </head>  
  <body>  
    <section>  
      <p>First</p>  
      <p>Second</p>  
      <p>Third</p>  
    </section>  
    <script>  
      const list = document.body.childNodes[1].childNodes;  
      for (let i = 0; i < list.length; i++) {  
        console.log(list)  
      }      
    </script>  
  </body>  
</html>

There are also convenience properties for accessing the first and last child and siblings of elements of a given node.

In a node element, we have the firstChild property to get the first child of a node. In the lastChild property, we can get the last child of a given node. nextSibling gets the next child node in the same parent node, and previousSibling gets the previous child node of the same parent node.

Each node has some properties and methods that allow us to get and set properties of a node. They are the following:

  • anchors gets a list of all anchors, elements with name attributes, in the document
  • applets gets an ordered list of all the applets in the document
  • baseURI gets the base URI of the document
  • body gets the <body> or the <frameset> node of the document body
  • cookie gets/sets a key value pair in the browser cookie
  • doctype gets the document type declaration of a document
  • documentElement gets the root document element
  • documentMode gets the mode used by the browser to render the document
  • documentURI gets/sets the location of the document
  • domain gets the domain name of the server that loaded the document
  • embeds gets all the embed elements in the document
  • forms gets all the form elements in the document
  • head gets the head element of the document
  • images gets all the img elements in the document
  • implementation gets the DOMImplementation object that handles the document
  • lastModified gets the latest date and time the document was modified
  • links gets all area and a tags that contain the href attribute
  • readyState gets the loading status of the document. readyState is loading when the document is loading, interactive when the document finishes parsing, and complete when it completes loading.
  • referrer gets the URL the current document is loaded from
  • scripts get the script elements in the document
  • title get the title element of the document
  • URL get the URL of of the document

The DOM has methods to get and manipulate elements and handle events by attaching event handlers. The methods are below:

  • addEventListener() attaches an event handler to the document
  • adoptNode() adopts a node from another document
  • close() closes the output writing stream of the document that was previously opened with document.open()
  • createAttribute() creates an attribute node
  • createComment() creates a common node
  • createDocumentFragment() creates an empty document fragment
  • createElement() creates an element node
  • createTextNode() creates a text node
  • getElementById() gets an element in the document with the given ID
  • getElementByClassName() gets all elements with the given class name
  • getElementByName() gets all elements with the given name attribute
  • getElementsByTagName() gets all elements with the given tag name
  • importNode() imports a node from another document
  • normalize() clears the text node and joins together adjacent nodes
  • querySelector() gets one element with the given CSS selector(s)
  • querySelectorAll() gets all elements with the given CSS selector(s)
  • removeEventListener() removes an event handler that’s been added using the addEventListener() method from the document
  • renameNode() renames an existing node
  • write() write JavaScript or HTML code to a document
  • writeln() write JavaScript or HTML code to a document and adds a new line after each statement

Element objects have special properties that can be get or set to modify the given element. The are:

  • accessKey gets/sets the accessKey attribute of an element
  • attributes gets all attributes of a node
  • childElementCount gets the number of child elements of a node
  • childNodes gets the child nodes of a node
  • children gets the child elements of an element
  • classList gets all the class names of an element
  • className gets or sets the class names of an element
  • clientHeight gets the height of an element including padding
  • clientLeft gets the left border width of an element
  • clientTop gets the top border width of an element
  • clientWidth gets the width of an element including padding
  • contentEditable gets or sets whether content is editable
  • dir gets or sets the dir attribute of an element
  • firstChild gets the first child node of an element
  • firstElementChild gets the first child element of an element
  • id gets or sets the ID of an element
  • innerHTML gets or sets the content of an element
  • isContentEditable gets whether the content ID is editable as a Boolean
  • lang gets or sets the language of the element or attribute
  • lastChild gets the last child node of an element
  • lastElementChild gets the last child element of an element
  • namespaceURI gets the namespace URI of the first node of an element
  • nextSibling gets the next node at the same node level
  • nextElementSibling gets the next element at the same level
  • nodeName gets the selected node’s name
  • nodeType gets the node type
  • nodeValue gets the value of the node
  • offsetHeight gets the height of the node, which includes padding, borders, and the scrollbar
  • offsetWidth gets the width of the node, which includes padding, borders, and the scrollbar
  • offsetLeft gets the horizontal offset of an element
  • offsetParent gets the offset container of an element
  • offsetTop gets the vertical offset of an element
  • ownerDocument gets the root element of an element
  • parentNode gets the parent node of an element
  • parentElement gets the parent element of an element
  • previousSibling gets the previous node of an element
  • previousElementSibling gets the previous element of an element at the same level
  • scrollHeight gets the height of an element, including padding
  • scrollLeft gets the number of pixels of the element that has been scrolled horizontally
  • scrollTop gets the number of pixels of the element that has been scrolled vertically
  • scrollWidth gets the width of an element, including padding
  • style gets the CSS styles of the element
  • tabIndex gets the tabindex attribute of an element
  • tagName gets the tag name of an element
  • textContent gets or sets the text content of an element
  • title gets or sets the title attribute of an element
  • length gets the number of nodes in a NodeList

An element has the following methods for manipulating it:

  • addEventLIstener() attaches an event handler to an element
  • appendChild() adds a child node to an element at the end
  • blur() removes the focus from an element
  • click() clicks on an element
  • cloneNode() clones the given node
  • compareDocumentPosition() compares the position of two elements
  • contains() checks if an element has a given node
  • focus() focuses on an element
  • getAttribute() gets an attribute of an element
  • getAttributeNode() gets an attribute of an element
  • getElementsByClassName() gets an element with the given class name
  • getElementByTagName() gets an element with the given tag name
  • getFeature() gets an object that implements the API of a given feature
  • hasAttribute() returns true if an element has the given attribute or false otherwise
  • hasAttributes() returns true if an element has the given attributes or false otherwise
  • hasChildNodes() returns true if an element has child node or false otherwise
  • insertBefore() adds a child node before the given element
  • isDefaultNamespace() returns true if the stated namespaceURI is the default or false otherwise
  • isEqualNode() checks whether two nodes are equal
  • isSameNode() checks if two nodes are the same
  • isSupported() returns true if a given feature is supported on an element
  • querySelector() gets the first element with the given CSS selector
  • querySelectorAll() gets all elements with the given CSS selector
  • removeAttribute() removes an attribute from the given element
  • removeAttributeNode() removes an attribute node from the given element
  • removeChild() removes the first child node
  • replaceChild() replaces a specified child node with another
  • removeEventListener() removes a specified event handler
  • setAttribute() sets the stated attribute to the specified value
  • setAttributeNode() sets the stated attribute node
  • toString() converts an element to a string
  • item() gets a node with the given index in the NodeList

Changing Element Content

If we select an element, we can set the innerHTML property to set the content of the element. For example, if we have an element DOM element, then we can write:

element.innerHTML = 'content';

We set the content inside the element and leave the rest unchanged.

Getting Elements

The most convenient way to work with elements is to get them with the methods listed above. The most commonly used ones are getElementById, getElementsByTagName, getElementsByClassName, and querySelector, querySelectorAll.

getElementById

getElementById lets us get an element by its ID, as its name suggested. It doesn’t matter where the element is, the browser will search the DOM until it finds an element with the given ID or returns null if it doesn’t exist.

We can use it as follows:

<html> 
  <head>  
    <title>Hello</title>  
  </head> 
  <body>  
    <p>  
      Hello <span id='name'>  
      </span>  
    </p>  
    <script>  
     const nameEl = document.getElementById('name');  
     nameEl.innerHTML = 'Jane';  
    </script> 
  </body>
</html>

In the code above, we get the element with the ID name and set the content to Jane, so we get “‘Hello Jane” on the screen.

getElementsByTagName

To get all the elements with the given tag name, we use the getElementsByTagName function to get all the elements with the given tag name.

We can use it as follows:

<html> 
  <head>  
    <title>How are You</title>  
  </head> 
  <body>  
    <p>  
      Hello <span></span>  
    </p>  
    <p>  
      How are you <span></span>?  
    </p>  
    <p>  
      Goodbye <span></span>  
    </p>  
    <script>  
      const spanEls = document.getElementsByTagName('span');  
      for (let i = 0; i < spanEls.length; i++) {  
        spanEls[i].innerHTML = 'Jane';  
      }  
    </script>  
  </body>  
</html>

In the code above, we get all the span elements with getElementsByTag to get all the span elements.

getElementsByClassName

To get all the elements with the given class name, we use the getElementsByClassName function.

We can use it as follows:

<html>
  <head>  
    <title>How are You</title>  
  </head><body>  
    <p>  
      Hello <span class='name'>  
      </span>  
    </p>  
    <p>  
      How are you <span class='name'>  
      </span>?  
    </p>  
    <p>  
      Goodbye <span class='name'>  
      </span>  
    </p>  
    <script>  
      const nameEls = document.getElementsByClassName('name');  
      for (let i = 0; i < nameEls.length; i++) {  
        nameEls[i].innerHTML = 'Jane';  
      }  
    </script>  
  </body>  
</html>

Appending Element to an existing Element

We can create a new element and attach it to an existing element as a child by using the createElement method and then using the appendChild method and pass in the element created with createElement as the argument of the appendChild function. We can use it like in the following example:

<html> 
  <head>  
    <title>Hello</title>  
  </head> 
  <body>  
    <h1>  
      Hello,  
    </h1>  
    <ul id='helloList'> </ul> <script>  
      const names = ['Mary', 'John', 'Jane'];  
      const helloList = document.getElementById('helloList');  
      for (let name of names) {  
        const li = document.createElement('li');  
        li.innerHTML = name;  
        helloList.appendChild(li);  
      }  
    </script>  
  </body>
</html>

Removing Elements

We can remove elements with the removeChild function. This means you have to find the child you want to remove and then get the parent node of that node. Then you can pass in that element object to the removeChild function to remove it.

Below is an example of this:

<html> 
  <head>  
    <title>Remove Items</title>  
  </head> 
  <body>  
    <ul>  
      <li id='1'>One <button onclick='remove(1)'>  
          remove  
        </button></li>  
      <li id='2'>Two <button onclick='remove(2)'>  
          remove  
        </button></li>  
      <li id='3'>Three <button onclick='remove(3)'>  
          remove  
        </button></li>  
    </ul> <script>  
      remove = function(id) {  
        const el = document.getElementById(id);  
        el.parentNode.removeChild(el);  
      }  
    </script>  
  </body>
</html>

As you can see, we have to get the node we want to remove and then get the parent node of that by using the parentNode property. Then we call removeChild on that. There’s no easier way to remove a node directly.

Now that we can create, manipulate, and remove nodes, we can make simple dynamic web pages without too much effort. Manipulating the DOM directly isn’t very sustainable for complex pages because lots of elements change in the DOM, making getting DOM elements directly difficult and error-prone. The DOM tree changes too much, so it’s very fragile if we make complex dynamic websites this way.

Related Posts

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *