The JavaScript DOM (Document Object Model) is an interface that enables developers to manipulate a website's content, structure, and style. In this tutorial, we will learn what the DOM is, how to create it and how it can be modified using JavaScript. Generally, a website consists of an HTML and CSS document, and the browser makes up a representation of the document, known as the Document Object Model (DOM). This document allows JavaScript to manipulate and work with the elements and styles of a website. The model is mostly built using a tree structure of objects and defines:

• HTML elements as objects

• Properties of these HTML elements and,

• Methods to access the same elements.

The JavaScript DOM Structure

The places of the elements are called nodes, and attributes and text also get their own nodes.

Features of the DOM

It is important to note that with the DOM, JavaScript can access and change all the elements of an HTML document. Hence, the following are the features of the DOM:

1. JavaScript can change all the HTML attributes on the page.

2. JavaScript can change all the HTML elements on the page.

3. JavaScript can change all the CSS styles on the website.

4. JavaScript can remove and manipulate existing HTML elements and attributes.

5. JavaScript can also add new HTML elements and attributes.

6. JavaScript can react to all existing HTML events on the page.

7. JavaScript can also create new HTML events on the page.

Below is a table that specifies the DOM methods and their descriptions.

How to Create DOM in JavaScript

In this part, we will create the DOM in JavaScript and attach it to the DOM tree.

• First, we use the createElement() method. javascript const element = document.createElement(htmlTag);

• In our example, we will create a <div> element. javascript const e = document.createElement('div');

• We will fill the <div> with HTML content. javascript e.innerHTML = 'JavaScript DOM';

• Then, we attach the <div> element to the DOM tree by using the appendChild() method: javascript document.body.appendChild(e);

• We can now use the DOM methods to create text nodes and append the text nodes to the new Element: javascript var textnode = document.createTextNode('JavaScript DOM'); e.appendChild(textnode);

• After that, we can now use the appendChild() method to attach the new Element to the DOM tree.

Fundamental Data Types and how they affect the DOM

The following table briefly describes the essential data types while creating the DOM in JavaScript.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Core interfaces in the DOM

The document and window objects are the objects whose interfaces we mostly use often in DOM programming. Basically, the window object represents something like the browser, and the document object is the root of the document itself. The following is a brief list of common APIs in web and XML page scripting using the DOM.

• [document.querySelector(selector)](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

• [document.querySelectorAll(name)](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

• [document.createElement(name)](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)

• [parentNode.appendChild(node)](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)

• [element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)

• [element.style.left](https://www.w3schools.com/jsref/prop_style_left.asp)

• [element.setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)

• [element.getAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)

• [element.addEventListener()](http://w3schools.com/jsref/met_element_addeventlistener.asp)

• [window.content](https://developer.mozilla.org/en-US/docs/Web/API/Window/content)

• [GlobalEventHandlers/onload](https://reference.codeproject.com/dom/GlobalEventHandlers/onload)

• [window.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)

DOM modification using Code examples

How to set text content;

• To get the text content of a node and its descendants, we will use the textContent property: let text = node.textContent;

• And we have the following HTML snippet already: ```

JavaScript textContent Demo Hidden Text

• This example will use the textContent property to get the text of the <div> element: javascript let note = document.getElementById('note'); console.log(note.textContent);

The above code is explained below;

• First, select the div element with the id note using the getElementById method.

• Then, display the node's text by accessing the textContent property.

The Code Output; ``` JavaScript textContent Demo

Hidden Text ```

• As you can see clearly from the output, the textContent property returns the concatenation of the textContent of every child node.

How to add a Child Element

The following example uses the appendChild() method to add three list items to the <ul> element:

• Assuming that we have the following HTML code: ```html

-  We create the following JavaScript code;
```javascript
    function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));

The code is explained below:

• First, the createMenuItem() function creates a new list item element with a specified name using the createElement() method.

• After which, we elect the <ul> element with id menu using the querySelector() method.

• Finally, we call the createMenuItem() function to create a new menu item and use the appendChild() method to append the menu item to the <ul> element.

Code Output;

How to get a collection of elements in the document

We will use the getElementsByTagName() method in HTML to return the collection of all the elements in the document with a given tag name.

Syntax:

var elements = document.getElementsByTagName(name);

Where:

• elements is a collection of all the found elements in the order they appear with the given tag name in the document.

• name is a string representing the name of the elements.

Code Example ```html

Great minds

DOM getElementsByTagName()

A computer science portal for nerds.

Try it

The code is explained below:

• First, we created a <p> tag.

• Secondly, we created a function called nerd() and used the getElementsByTagName() method to call the paragraph “p”.

• When a user clicks "Try it", the text written in the <p> tag shows up in green.

Summary

In this tutorial, we explicitly defined the DOM, identified its features and methods, and introduced a demo code that shows how to create the DOM. We also outlined its fundamental data types and core interfaces then, illustrated how to modify the DOM with code examples. It is important to know that a lot can be done using the DOM methods and properties. I believe this tutorial has given the reader better insight and understanding of how to create and modify DOM in JavaScript.

Resources

• https://gabrieltanner.org/blog/javascript-dom-introduction/

• https://linuxhint.com/html-dom-methods-and-properties/

• https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/

• https://learn.saylor.org/mod/book/view.php?id=36824&chapterid=20206

A TIP FROM THE EDITOR: For a related topic, don't miss our Shadom DOM: the ultimate guide article.