loading...
Cover image for Using Javascript to manipulate HTML elements via the DOM

Using Javascript to manipulate HTML elements via the DOM

kabir4691 profile image Kabir Nazir ・5 min read

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

    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 objects. 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.

    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

    <!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

    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.

    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

    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

    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

    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

    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

    <!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

    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

    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

    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 on Medium.

Posted on Feb 29 by:

kabir4691 profile

Kabir Nazir

@kabir4691

Ex Android developer. Currently learning full stack web development.

Discussion

markdown guide
 

Great article. I am looking into React and Redux right now. I've built apps the hard way with custom Js and CSS it is easy at first then quickly becomes an unmanageable mess the more your app grows and new features popup.

 

Oh. I haven't yet started React or Redux, so I don't know much about them. I'm spending a lot of time nowadays just to get my Javascript fundamentals right.

 

I spent years getting the fundamentals right because they kept changing, Javascript is like that LOL really I have been waiting for better support for the cooler parts of Javascript in browsers and now it is here. I am about to relearn since I took like 1.5 years off. LMAO