What is DOM Manipulation in JavaScript?

DOM manipulation in javascript is an important factor while creating a web application using HTML and JavaScript. It is the process of interacting with the DOM API to change or modify an HTML document that will be displayed in a web browser. This HTML document can be changed to add or remove elements, update existing elements, rearrange existing elements, etc.

By manipulating the DOM, we can create web applications that update the data in a web page without refreshing the page and can change its layout without doing a refresh. Throughout the document, items can be deleted, moved, or rearranged.

Definition of the DOM and Basic concepts

The DOM in dom manipulation in javascript stands for Document Object Model. The Document Object Model (DOM) is a tree-like structure illustrating the hierarchical relationship between various HTML elements. It can be easily explained as a tree of nodes generated by the browser. Each node has unique properties and methods that can be changed using JavaScript.

A visual representation of the DOM tree is shown in the image below.

• Document is the core/foundation of the DOM.
• HTML root element is the child of the document object.
• Body and Head elements are the children of the HTML element and siblings to each other.
• Title element is the parent to the text node: "my text” and the child of the head element.
• a tag and h1 tag are the children of the body element and siblings to each other.
• href attribute is the children of the a(anchor) tag.

Few Points to Keep in Mind

• A node can have more than one child.
• Siblings are nodes with the same parent like brothers or sisters.
• Except for the top node, which has no parent, each node has exactly one parent.

How to Select Elements in the DOM

In order to change or modify an element in the DOM, you need to select that specific element. Thus, JavaScript has six methods to select an element from a document in dom manipulation in javascript.

• getElementById: returns an element whose id matches a passed string. Since the ids of elements are unique, this is the fastest way to select an element.
• getElementsByTagName: returns a collection of all the elements present in the document that have the specified tag name, in the order of their appearance in the document.
• getElementsByClassName: returns an HTMLCollection of elements that match the passed class name. Bypassing the class names separated by whitespace, we can search for multiple class names.
• getElementsByName: returns a NodeList Collection of the elements that match the value of the name attribute with the passed string.
• querySelector: returns the very first element within the document that matches the given selector. It only returns the element that matches with one of the specified CSS selectors, or a group of selectors.
• querySelectorAll: returns a static NodeList of elements that matches with one or a group of selectors. If no element matches, an empty NodeList is returned.

How to Traverse and Move Around the DOM

With the HTML DOM, we can navigate through the tree nodes and access them using node relationships that we have discussed earlier parent, children, siblings, etc.

In this section, we will learn how to get the parent element, and children of an element, and siblings of an element.

Get the Parent Element

To get the parent node of a particular node in the DOM tree, we can use the parentNode property. for example,

ParentNode is a read-only object. There is no parent for the Document and DocumentFragment nodes. As a result, the parentNode is always empty. The parentNode of a newly created node that hasn't been connected to the DOM tree will also be null.

Get Child Elements

To Get all child elements use the firstChild property that returns the first child element of a specified element.

To Get the last child element use the lastChild property that returns the first element node, text node, or comment node.

To Get all child elements use the childNodes property that returns a live NodeList of child elements of a specified element.

Get Siblings of an Element

To Get the next siblings use the nextElementSibling property

To Get the previous siblings use the previousElementSibling property.

How to Manipulate Elements in the DOM

Create a New Element

The document.createElement() returns a new Node with the Element type. It takes an HTML tag name as a parameter.

Get and Set the Text Content of a Node

The textContent property returns the concatenation of the textContent of all child nodes and does not include the comments.

Get and Set the HTML Content of an Element

The innerHTML is a property of the Element that allows us to get or set the HTML markup contained within the element.

Append a Node to a List of Child Nodes of a Particular Parent Node

The appendChild() method allows us to insert a node at the end of the list of child nodes of a particular parent node.

Insert One Element Before an Existing Node as a Child Node of a Specified Parent Node

The insertBefore() JavaScript method takes two parameters, the newNode, and the existingNode. insertBefore() returns the inserted child node.

Replace a Child Element by a New Element

The replaceChild() JavaScript method takes two parameters to replace our first element with the newly created one.

Remove Child Elements of a Node

The removeChild() JavaScript method takes just one parameter i.e the element you want to remove.

Clone an Element and All of Its Descendants

This method allows us to clone an element. The cloneNode() method takes a parameter deep that is optional. If the deep is true, then the original node and all of its descendants are already cloned, false otherwise.

Working with Events

Here are some events used in dom manipulation in javascript:

• Handling events: includes HTML event handler attribute, element’s event handler property, and addEventListener().
• Page Load Events: includes DOMContentLoaded, load, beforeunload, and unload.
• load event: includes dependent resources like JavaScript files, CSS files, and images.
• Unload event: The unload event is fired after before unload event and pagehide event.
• Mouse events: includes mousedown, mouseup, and click.
• Keyboard events: includes keydown, keypress, and keyup.
• Scroll events: includes scrollX and scrollY properties that returns the number of pixels that the document is currently scrolled horizontally and vertically.

Manipulating Element’s Styles

style property

The style property returns the read-only CSSStyleDeclaration object that includes a list of CSS properties.

getComputedStyle()

The getComputedStyle() method returns the object that contains the computed style of an element.

className Property

The className property returns a space-separated list of CSS classes of the element as a string.

classList Property

The classList returns a live collection of CSS classes. It is a read-only property of an element.

Event Handling in the DOM

Since the beginning of the language, event handling has been a part of dom manipulation in javascript.  They correspond to specific, user-imitated actions within the webpage, such as the moving of your mouse over a link, clicking on a link, or submitting a form. Thanks to event handling, our scripts are more interactive and are able to perform certain actions depending on the users.

The DOM of modern web browsers such as NS6+, IE5+, and Firefox provide expanded methods and flexibility for capturing events.

Scripting Web Forms

JavaScript Form

To create a form in HTML, you use the <form> element, for example

Output

Radio Button

To know which radio button is checked, we need to use the value attribute, For example

Output

Checkbox

To create a checkbox, you use the <input> element with the type of checkbox, for example

Output

Select Box

To create a <select> element, you use the <select> and <option> elements. For example:

Output

Handling Input Event

The input event fires each time whenever the value of the <input>, <select>, or <textarea> element updates.

Output