Understanding the HTML DOM API

HTML DOM API

Application Programming Interface

The DOM API, or Application Programming Interface, is a collection of methods and properties that JavaScript uses to modify the content, structure, and styling of HTML elements.

An API Method represents an action that can be performed on an HTML element, while an API Property is a value that can be accessed on an HTML element.

---

Example Explained

In JavaScript, document refers to the HTML document itself. The function getElementById() is a method used to locate a specific element by its ID. For example, myPara = getElementById("demo") retrieves the element with the ID "demo". The innerHTML property allows you to modify the element's content. By setting myPara.innerHTML = "Hello World!", you change its displayed text.

---

HTML DOM API Abilities

The DOM API enables several capabilities, including:

• Locating and selecting elements
• Modifying element content and attributes
• Adding, removing, or altering elements
• Modifying CSS styles
• Adding event listeners to handle user interactions

---

JavaScript and the DOM

The DOM API provides a standard way to access and manipulate HTML DOM elements. JavaScript is the primary language used in web browsers to interact with the DOM through this API.

---

API Methods and Properties

Developers utilize global objects such as document and window to access the API. To manipulate any element on an HTML page, you start by accessing the document object, which represents the entire web page. The first step in manipulating HTML with JavaScript is to select an element.

Here are some examples of how you can use the document object to access HTML:

---

Selecting HTML Elements

| Method | Description | |-------------------------------------|--------------------------------------------------| | document.getElementById(id) | Finds an element by its ID | | document.getElementsByTagName(name) | Finds elements by their tag name | | document.getElementsByClassName(name) | Finds elements by their class name | | document.querySelector(selector) | Finds the first element matching a CSS selector | | document.querySelectorAll(selector) | Finds all elements matching a CSS selector |

The document object owns all other objects on your web page.

---

Accessing Element Content

| Property | Description | |--------------------|--------------------------------------| | element.innerHTML | Returns the HTML content of an element | | element.textContent | Returns the text content of an element |

---

Accessing Element Attributes

| Property | Description | |-------------------------|--------------------------------------------------| | element.attribute | Modifies the attribute value of an HTML element | | element.style.property | Represents the style of an HTML element |

---

Changing Element Attributes

| Method | Description | |-------------------------|--------------------------------------------------| | element.setAttribute()| Creates or changes an attribute |

---

Manipulating Structure

| Method | Description | |-------------------------|--------------------------------------------------| | document.createElement()| Creates a new HTML element | | document.removeChild() | Removes an HTML element | | document.appendChild() | Adds an HTML element | | document.replaceChild() | Replaces an HTML element |

---

Adding Event Handlers

| Method | Description | |-------------------------|---------------------------------------------------| | document.getElementById(id).onclick = function(){code} | Adds event handler code to an onclick event |

---