Vigneshwaran V

Posted on Jul 3

JavaScript HTML DOM API

#html #javascript #webdev #frontend

What is API?

An API (Application Programming Interface) is a set of rules that allows two software programs to communicate with each other.
Think of it like a waiter in a restaurant:

You (the user) place an order.
The waiter (API) takes your order to the kitchen.
The kitchen (server/application) prepares the food.
The waiter (API) brings the food back to you.
You don't need to know how the kitchen works—you just use the waiter to get what you need.
Real-world example
Suppose you use a weather app:
You open the app and search for "New York."
The app sends an API request to a weather service.
The weather service processes the request and sends back the current temperature and forecast.
The app displays the information.

Simply, an API is a messenger that enables different software systems to communicate and exchange information.

What is HTML DOM API?

The HTML DOM API is a collection of methods, properties, and objects provided by the browser that allows JavaScript to interact with and manipulate an HTML document.

What is DOM?

DOM (Document Object Model) is a tree-like representation of an HTML page.
For Example

<body>
    <h1 id="title">Hello</h1>
    <button>Click Me</button>
</body>

The browser converts it into a DOM tree:

Document
  |
  └── html
       |
       └── body
            |
            ├── h1
            |    └── "Hello"
            |
            └── button
                 └── "Click Me"

What is the DOM API?

The browser provides JavaScript with APIs to access and modify this DOM tree.
Examples:
1. Finding an element

const heading = document.getElementById("title");

Here:

document is a DOM object.
getElementById() is a DOM API method.
2. Changing text

heading.innerText = "Welcome";

Output

<h1 id="title">Welcome</h1>

Why is it called an API?
Because the browser exposes a set of functions and properties that JavaScript can use.

We use:

document.getElementById(); // DOM API

DOM = the browser's representation of the HTML document.
DOM API = the methods and properties the browser provides to access and modify that DOM using JavaScript.

That's why methods like getElementById(), querySelector(), createElement(), and properties like innerText, src, and style are all considered part of the HTML DOM API.

good way to think about it.

The communication is actually:

JavaScript
     │
     ▼
DOM API (provided by browser)
     │
     ▼
DOM Tree (HTML document)
     │
     ▼
Browser updates the webpage

For example:

<h1 id="title">Hello</h1>

When JavaScript runs:

document.getElementById("title").innerText = "Welcome";

Here's what happens:

JavaScript calls the DOM API method getElementById().
The browser's DOM API searches the DOM tree for the element whose id is "title".
It returns a reference of that < h1 > element to the JavaScript.
JavaScript changes its innerText property.
The browser updates the page and displays:

<h1 id="title">Welcome</h1>

So yes, JavaScript does not directly communicate with HTML source code. Instead:

HTML → converted into a DOM tree by the browser.
Browser exposes the DOM API.
JavaScript uses the DOM API.
DOM API manipulates the DOM tree.
Browser reflects those changes on the webpage.
That's why methods like:

document.getElementById()
document.querySelector()
document.createElement()
element.remove()
element.setAttribute()

are called DOM APIs—they are functions provided by the browser for JavaScript to work with HTML documents.

The browser provides the DOM API to JavaScript. JavaScript uses this API to access and modify the DOM representation of the HTML document, which changes the structure, content, or properties of HTML elements on the webpage.

There are several ways to access HTML elements using the DOM API.

1. getElementById()
Accesses an element by its id.

<h1 id="title">Hello</h1>

const element = document.getElementById("title");

Returns a single element.

2. getElementsByClassName()
Accesses elements by their class name.

<p class="text">One</p>
<p class="text">Two</p>

const elements = document.getElementsByClassName("text");

Returns an HTMLCollection (similar to an array).

console.log(elements[0]); // Access the first paragraph
console.log(elements[1]); // Access the second paragraph

3. getElementsByTagName()
Accesses elements by tag name.

<p>Hello</p>
<p>World</p>

const paragraphs = document.getElementsByTagName("p");

console.log(paragraphs[0]); // First paragraph
console.log(paragraphs[1]); // Second paragraph

Returns an HTMLCollection.

HTMLCollection

4. querySelector()
Accesses the first element that matches a CSS selector.

<p class="text">One</p>
<p class="text">Two</p>

const element = document.querySelector(".text");

Returns only the first matching element.
You can use:

document.querySelector("#title"); // id
document.querySelector(".text");  // class
document.querySelector("p");      // tag

5. querySelectorAll()
Accesses all elements matching a CSS selector.

<p class="text">First</p>
<p class="text">Second</p>
<p class="text">Third</p>

const elements = document.querySelectorAll(".text");

Returns a NodeList.

NodeList(3) [p.text, p.text, p.text]

You can expand it:

NodeList(3)
  0: <p class="text">First</p>
  1: <p class="text">Second</p>
  2: <p class="text">Third</p>

Accessing elements
Just like an array:

console.log(elements[0]); // First <p>
console.log(elements[1]); // Second <p>
console.log(elements[2]); // Third <p>

elements.forEach(element => {
    console.log(element);
});

Checking the type

const elements = document.querySelectorAll(".text");

console.log(elements);
console.log(elements.length);

Output:

NodeList(3)
3

6. document.getElementsByName()
getElementsByName() is a DOM API method that selects all HTML elements that have a specified name attribute and returns them as a collection.

<input type="text" name="username">
<input type="text" name="username">

const inputs = document.getElementsByName("username");

console.log(inputs);

Output

NodeList(2)

console.log(inputs[0]); // First input
console.log(inputs[1]); // Second input

Which one is most used?

Nowadays developers mostly use:

document.querySelector();
document.querySelectorAll();

because they work with CSS selectors, making them very flexible.
Examples:

document.querySelector("#title");
document.querySelector(".btn");
document.querySelector("div p");
document.querySelectorAll(".card");

References

https://www.w3schools.com/js/js_htmldom_methods.asp
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

DEV Community