Using Javascript to manipulate HTML elements via the DOM
Tags: javascript, html, dom
Published: 2020-02-29 21:40:26

As you might be familiar, HTML and CSS are not ‘programming’ languages in the true sense. HTML is a ‘markup’ language that is used to create and display the elements of a webpage. CSS is a ‘stylesheet’ language that is used to write rules that will dictate the style and appearance of said elements. Although CSS does allow for some pseudo-programming with the help of pseudo-classes, it still isn’t considered as a programming language. Moreover, the functionality of CSS to manipulate elements during runtime is limited.

This is where Javascript comes in. It was initially created to be a programming language for the web browser, allowing us to be able to observe and manipulate the HTML and CSS code at run-time. The web browser interacts with Javascript by providing it a ‘host environment’ to run its commands on. This host environment provides certain objects and additional functions, which allow us to access additional features of the browser and elements of the HTML page at run-time.

### The ‘window’ object

At the root of the browser, we have the window object. The window object is a global object in Javascript and provides methods to control the browser window through it. Here are some examples to make you understand better

```javascript
    console.log(window.innerHeight); // This returns the height of the 
    // content area of the browser window

    function doSomething() {
        // some action
    }

    window.doSomething(); // Since window is a global object, we can use 
    // it to call functions with global scope too
```

The window object is further divided into three components, namely the **DOM**, the **BOM,** and **Javascript object**s. We shall be further looking at how DOM works in this article.

## DOM (Document Object Model)

The DOM is basically the container for all the objects that can be accessed and manipulated in a web page. Think of all the HTML elements in a web page as a collection of nested objects, for whom the root object is the DOM. The DOM is accessed in code by using the `document` keyword. So, we can access the `<body>` tag of the HTML page by calling `document.body`.

```javascript
    document.body; // This is the object corresponding to the <body> tag
```

Now say that you wish to access some other element of the page, like say a `<p>` element. Before we get to that, we need to first understand how elements in a web page are mapped to their corresponding objects in the DOM. Let’s take the example of a simple page

```html
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>This is the title</title>
      </head>
      <body>
        <p id="paragraph-1" class="class-1">This is a paragraph.</p>
        <ul>This is a list
          <li class="class-1">Item 1</li>
          <li>Item 2</li>
          <li class="class-1">Item 3</li>
        </ul>

      </body>
    </html>
```

The DOM treats every HTML element in the above page as a node. There are 12 different types of nodes. However, we shall be looking only at 4 of them for now.

1. `document`: The root node, present at the very top of the DOM.

2. Element node: Nodes corresponding to the HMTL tags in the page.

3. Text node: Nodes containing the inner text content of the tags.

4. Comment: The comments that we include in between code. Although they are not visible on the page, they are still accessible by the DOM.

In the above code, the `<html>` tag is an element node. DOM follows a tree structure while organizing nodes. Hence, the `<head>` and `<body>` tags are element nodes that are considered as the child nodes of the `<html>` tag.

Selecting the nodes of these tags in Javascript is pretty simple as there as built-in functions for the same

```javascript
    document.documentElement; // Points to the node of the <html> tag
    document.head; // Points to the node of the <head> tag
    document.body; // Points to the node of the <body> tag
```

If we wished to select any other node, like say a `<p>` tag, DOM provides us with additional searching methods

### document.getElementById

This method allows us to select an element in the web page that contains a particular id attribute.

```javascript
    document.getElementById("paragraph-1"); // This points to the HTML 
    // element with id as paragraph-1
```

### document.querySelector

This method allows us to select the first element that matches the given CSS selector

```javascript
    document.querySelector("li"); // This will return the node of the 
    // first <li> tag
```

### document.querySelectorAll

This method allows us to select all elements that match the given CSS selector

```javascript
    document.querySelectorAll("li.class-1"); // This will return the     
    // collection of nodes of all <li> tags with the class class-1
```

### document.getElementsByTagName

This method allows us to select all elements of a particular tag

```javascript
    document.getElementsByTagName("li"); // This will return the 
    // collection of nodes of all <li> tags
```

### document.getElementsByClassName

This method allows us to select all elements with the given class

```javascript
    document.getElementsByClassName("class-1"); // This will return the 
    // collection of nodes of all elements with the class class-1
```

## Manipulating elements

Now that we have seen some basic methods to select elements in DOM, let us also see a few examples of how we can modify those elements too. Let us say we have a page like this

```html
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>This is the title</title>
      </head>
      <body>
        <p id="paragraph-1">This is a paragraph.</p>

    </body>
    </html>
```

### Change the content of an element

Let us say we wish to change the text of the first paragraph. We can do so by using the innerHTML property as follows

```javascript
    document.getElementById("paragraph-1").innerHTML = "This is an edited 
    // paragraph."
```

You can also add other tags within the value of innerHTML and the browser will render them as HTML text. For example, if you wished to change the text of the paragraph as well as make it bold, we can do something like this

```javascript
    document.getElementById("paragraph-1").innerHTML = "<b>This is an 
    // edited paragraph.</b>"
```

### Change the style of an element

In order to change the style of an element, we use the style property. For example, in order to set a simple border to the paragraph, we write

```javascript
    document.getElementById("paragraph-1").style.border = "1px solid red";
```

In this post, we have attained a basic understanding of how DOM works and how it can be used to manipulate HTML elements. In the coming weeks, I shall be adding more posts into the deeper workings of Javascript. Till then, happy coding!

> This post was originally published [here](https://medium.com/@kabir4691/using-javascript-to-manipulate-html-elements-via-the-dom-fa84e38f63cd) on Medium.