JavaScript: What is HTML DOM?

In this article, I will try to explain what the HTML DOM (Document Object Module) is, and I will provide examples using the JavaScript programming language.

Photo by Growtika on Unsplash

The W3C Document Object Model is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

There are three different DOM standards. These are core dom, XML dom, and HTML dom. In this article, I will explain HTML DOM, that is to say I will use the standard model defined for HTML documents.

HTML DOM is a standard on how to change, get, add, or delete HTML elements. Elements of HTML documents see as objects on DOM. DOM is the name of the model. The document is the container for these objects. It can also be defined as the page we prepared with HTML.

Get Canan Korkut’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Node: All elements in the HTML document are nodes like a head tag, a body tag, etc.

HTML DOM methods are actions you can perform (on HTML elements). It can access HTML elements or nodes through methods.

HTML DOM properties are values (of HTML elements) that you can set or change.

I will access the HTML DOM using the javascript language. First of all, some of the methods we will use in the HTML DOM are as follows:

• getElementsByTagName(): To find elements by tag name
• getElementById(): To find elements by id
• getElementsByClassName(): Used to find elements by class name.

Let’s examine a few examples to reinforce what I said.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>My first assignment</h1>
    <p id="first"></p>
    <script>
        document.getElementById("first").innerHTML = "Hello World!";
    </script>
</body>
</html>

In this example, we have accessed the element whose id is first, and we have written Hello World in it. With the document, we specify that we will access an element in the HTML document. getElementById() is a method. innerHTML is a property used to get or replace any HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p>Make a select:</p>
    <form>
        Bag: <input name="a" type="radio" value="Bag">
        Shoes: <input name="a" type="radio" value="Shoes">
        Ring: <input name="a" type="radio" value="Ring"> 
    </form>
    <p class="first"></p>
    <script>
        document.getElementsByClassName("first")[0].innerHTML = "The number of your selects: " + document.forms.length;
    </script>
</body>
</html>

In this example, we reached the class named first and added it to it. Differently, we also added an index number after the getElementsByClassName() method. This is because id names are singular in the HTML document. Class name and tag name can be used more than once. Therefore, the index number must be specified when class and tag are used.

References:

JavaScript HTML DOM

Document Object Model (DOM) - Web APIs | MDN