Document Object Model (DOM)

(Pictures come from the Internet)

HTML DOM is HTML Document Object Model or short for. HTML DOM is a W3C (World Wide Web Consortium) standard that defines HTML elements as objects. Each HTML element (i.e. <h1>, <p>, <a>, etc.) can be thought of as an object containing :

Methods (actions that can be performed on HTML elements)
Properties (HTML values that can be set or changed)
Events (things that can happen to HTML elements)

Therefore, the HTML DOM defines:

Standard for accessing HTML documents
Properties, methods and events for all HTML elements

HTML DOM provides a standard so that:

Change existing HTML elements and attributes
Add and remove HTML elements and attributes
Change the style of HTML elements
Respond to or add HTML events

DOM document object

The document object sits at the top of the HTML DOM and is the parent of all other objects loaded on the page. If we need to access any other element on the page, now, start with the Document object.

When looking at how to run some JavaScript when a button's onclick event is fired (i.e. the button is clicked).

In the following sections, the following methods will be studied :

getElementById

The following three properties will also be looked at :

innerHTML
style
attribute

getElementById method

The document object has a special method called getElementById , which is used as follows:

document.getElementById(id)

A practical example:

<!DOCTYPE html>
<html>
<body>
    <button onclick="getById()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function getById() {
            document.getElementById("test");           
        }
    </script>
</body>
</html>

In the above example, the getById function is called when the button onclick event occurs , and then:

We use the getElementById method to get the element by id test , in this case it is the paragraph

What happens then? Well, nothing... We didn't do anything to that element.

innerHTML property

The previous section shows how to get an element by its id. Now let's do something with it.

<!DOCTYPE html>
<html>
<body>
    <button onclick="changeHTML()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function changeHTML() {
            document.getElementById("test").innerHTML = "We are learning JavaScript!";
        }
    </script>
</body>
</html>

In the example above, when the button onclick event occurs , the changeHTML function is called and then:

We use the getElementById method to get the element by id test , in this case it is the paragraph
We change the content of the paragraph by assigning the value "We are learning JavaScript!" to its internal HTML attribute .

style attribute

Another property that can be changed when getting an element by id. Please look at the code below:

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.color = "blue";
      }
    </script>
  </body>
</html>

In the above example, when the button click event occurs, the changeColor function is called and then:

Use getElementById method to get element by id test , in this case paragraph
Change the color of text in a paragraph by assigning the value "blue" to its style.color property

Here is another example code:

<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.fontSize = "40px";
      }
    </script>
  </body>
</html>

This contains a button and a paragraph. When the button is clicked, a changeColour() JavaScript function called. This function document.getElementById("test") gets an id="test" element with , and then uses style.fontSize the attribute to set the font size of that element to "40px". That is, when the button is clicked, the text in the paragraph will be rendered at 40 pixels.

attribute attribute

How do I change the value of an HTML attribute? In this case the src attribute of the image.

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeImage()">Push me</button>
    <img id="someImage" src="smile.png">  
    <script>
      function changeImage() {
        document.getElementById("someImage").src = "frown.png";
      }
    </script>
  </body>
</html>

This contains a button and an image. When the button is clicked, a changeImage() JavaScript function called. This function document.getElementById("someImage") gets an id="someImage" element with , and then uses src the attribute to change the image address of the element to "frown.png". That is, when the button is clicked, the image will change from "smile.png" to "frown.png".

createElement method

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");   
      paragraph.innerHTML = "This is a paragraph.";   
    }
  </script>
</body>
</html>

In the above code:

Create an HTML element and assign it to a variable
and setting the inner HTML of the element

What happens then? Well, nothing... We haven't added that element to the document yet.

appendChild method

Simply creating a new element is not enough. It also needs to be added to the document.

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");
      paragraph.innerHTML = "This is a paragraph.";
      document.body.appendChild(para);
    }
  </script>
</body>
</html>

In the above code, after creating the element and assigning the string to the element innerHTML, the appendChild method is used to add the element to the document.

remove method

<!DOCTYPE html>
<html>
<body>
  <button onclick="remove()">Push me</button>
  <p id="someText">This is a paragraph.</p>
  <script>
    function remove() {
      let paragraph = document.getElementById("someText")
      paragraph.remove();
    }
  </script>
</body>
</html>

The above code contains a button and a paragraph. When the button is clicked, a remove() JavaScript function called. This function document.getElementById("someText") takes an id="someText" element with and then uses remove() the method to completely remove the element from the document. In other words, when the button is clicked, the paragraph will be deleted from the page.