Manipulating the DOM with JavaScript

The Document Object Model, or DOM, is one of the most important components when it comes to web development in general. It is a representation of a web page in HTML format. More specifically, a document object consists of the content, structure, and the style of a web page, all of which can be changed at any time. JavaScript is the language enabling such actions on the document object. Such knowledge is most crucial when building interactive and dynamic websites. This article will read more about how JavaScript language can be helpful in DOM manipulations in order to create an interesting user experience on the website.

What Exactly Is The DOM?

The DOM is a programming interface for web documents. It takes an HTML or XML document and creates a document object model of it as a tree structure with the element of a webpage in it represented as a node. These nodes can be changed in order to dynamically alter the content, the structure or the style of the page and therefore a mode of interactivity by allowing the modification in response to various user actions.

The document is represented as an intricate hierarchy according to the standards determined by the DOM. The tree structure has a root level which is denoted as the document node which as a rule of thumb encapsulates the entire web page. This level has various other nodes as its children such as element nodes, text nodes and attribute nodes among numerous others. By performing actions on these nodes, a user is successfully able to change how their webpage looks and performs in its functions.

The HTML elements within the webpage can be switched and altered in terms of their attributes or content using various javascript methods.

Accessing DOM Elements

Getting the desired outcome will first require you to access the right HTML elements and then only the changes can be made. Numerous Javascript methods as well as functions assist in element selection in the DOM. From searching for the element using tag name or class or even id or a combination of elements or their relations, all is possible using the following methods.

1. getElementById : Every web page has unique ids and this is how pages identify each other. Since in most cases Id's have to be unique on a page this specific method is super fast and easy.

getElementById Example

  let element = document.getElementById("myElement");

2. getElementsByClassName : If you wish to select and modify any of the elements in bulk. For selecting such elements one might have to refer to a specific class as the method selects all elements which share certain characteristics. The method returns live HTML Collection as in if anyone removes a class it is automatically updated.

getElementsByClassName Example

  let elements = document.getElementsByClassName("myClass");

3. getElementsByTagName : This method selects all elements with a specified tag like `div`, `p`, or `span`. As with `getElementsByClassName`, this method also returns a live HTMLCollection.

getElementsByTagName Example

  let elements = document.getElementsByTagName("p");

4. querySelector : The method allows you to include the first element that matches a specific CSS selector. When compared with the previous methods, it is a more flexible way of selecting elements since it allows lots of CSS selectors.

querySelector Example

  let element = document.querySelector(".myClass");

5. querySelectorAll : This method is similar to `querySelector`, except that instead of returning a single element, it returns a NodeList which contains all the elements that match the selector.

querySelectorAll Example

  let elements = document.querySelectorAll("div.myClass");

Modifying HTML Elements

Once you have accessed an HTML element using JavaScript, you are free to change its content or modify its attributes. Element properties can be modified in several ways:

1. Changing the Element's Text Content : You can change the inner text of an element with the use of the `textContent` property. This is mainly useful for dynamically changing paragraphs, headings or any text within divs.

Changing Text Content Example

  element.textContent = "New content here!";

2. Changing HTML Content : If you want to keep the HTML structure within an element but aim to enhance it, then you have to use the `innerHTML` property. It gives you the access to substitute any content in an element by inserting HTML tags again.

Changing HTML Content Example

  element.innerHTML = " New HTML content! ";

3. Changing Attributes : The `setAttribute` method gives you an option to change the attributes of an element for example class, id and even the `src` for an image. In the same way, you can find the value of an attribute with the help of `getAttribute` method.

Changing Attributes Example

  element.setAttribute("class", "newClass");
 
let srcValue = element.getAttribute("src");

4. Changing Styles : It is possible to change an element's inline styles including its class via `style` property which gives the access to the internal CSS of the particular element such as colors, margins to be changed as well as font size.

Changing Styles Example

  element.style.color = "blue"; 
 
element.style.fontSize = "20px";

Creating and Inserting Elements

JavaScript enables you to have new elements of HTML created and integrated into the DOM on the go. This is especially relevant for while list appending new items or form fields addition that depend on the user actions.

1. New Elements Creation : You can utilize the `document.createElement` method to create new elements in the Web form. For instance, to create a new `

` element, you can do the following.

Creating New Elements Example

  let newDiv = document.createElement("div");

2. Element Appending : After creating a new element, it can be appended to the Document Object Model (DOM) tree using the `appendChild` method. Appending is where the newly created element is added as the last child to a selected parent node.

Appending Elements Example

  parentElement.appendChild(newDiv);

3. Inserting Elements at a Particular Position : In case you want more flexibility regarding placing the newly added content, you can make use of methods like `insertBefore`. The `insertBefore` method inserts the new node before the reference node as a child of the specified parent node.

Inserting Elements Example

  parentElement.insertBefore(newDiv, referenceElement);

Deleting Elements

Another operation that one can perform in the DOM is deleting an element. For instance, in JavaScript, there is a `removeChild` method that allows a user to remove elements from its parent. Otherwise, you can also use the method `remove` directly on the element that you want to remove.

Removing Elements Example

  parentElement.removeChild(element); // Removes the element from its parent
 
element.remove(); // Removes the element itself

Addons

Removing elements is quite a task to do, but it is also significant. It is worth learning - using the understanding of examples: how to remove an element `x` from the page, regardless of whether a parent is given to that element or not. For instance let us consider how we can remove an element `x` from an arbitrary parent `y`, if that parent exists on the page. Note, at this juncture we focus solely on JavaScript. Once we figure out how to directly we will use a properly written code.