The Document Object Model (DOM) in JavaScript: An Introduction

DOM (Document Object Model)

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree-like structure called the DOM tree. Each node in the tree represents an element, attribute, or piece of text in the document.

In JavaScript, the DOM can be accessed and manipulated using the DOM API, which allows developers to dynamically update and modify the content and style of web pages. Using JavaScript, you can manipulate DOM elements by changing their properties, adding or removing classes, and updating their content.

DOM manipulation is a core aspect of client-side web development, allowing developers to create dynamic and interactive web pages that respond to user actions. With the DOM, you can add event listeners to elements and respond to user events such as clicks, hovers, and key presses.

To manipulate the DOM in JavaScript, you first need to select the elements you want to work with using methods such as document.getElementById, document.getElementsByClassName, and document.querySelector. Once you have a reference to an element, you can manipulate its properties and attributes using standard JavaScript syntax.

Overall, the DOM is an essential part of web development, enabling developers to create powerful, interactive, and responsive web applications.

What is DOM ?

The DOM is not part of the JavaScript language but is instead a Web API used to build websites
The DOM was designed to be independent of any particular programming language.
The browser creates the DOM to render the page.
The Browser gives JavaScript access to the DOM which is a programming language.
The DOM is not a part of JavaScript Engine.
Brower gives the DOM API Function likes getElemtentById(),createElement() etc. and these functions are not from JavaScript but these all are provided by DOM API
In order to speak with DOM the browser gives us access by DOM API Application Programming Interface.
JavaScript is programming language that browsers can execute.
We can divide the browser into two components
1. DOM
2. JavaScript Engine (Chrome V8 Engine)
DOM API is the bridge between the DOM and JavaScript Engine
The JavaScript engine is also present in the browser independently.

What we can do with DOM

Change css styles applied to elements.
Remove HTML Elements
We can add Event Listeners to HTML elements like (click, keyup, etc..)
Change attribute values dynamically (e.g href, src, alt)
Create new dynamic HTML element.

Environments

A JavaScript environment is a collection of tools, libraries, and resources that allow developers to write and execute JavaScript code. It includes everything that is needed to run JavaScript, such as the JavaScript engine, libraries, and a set of APIs for interacting with the browser or server environment.There are several JavaScript environments, including the

Browser environment
Node.js environment
Mobile environment.

Browser environment

The browser environment is the most commonly used JavaScript environment, which runs JavaScript code directly in the browser. The browser provides a JavaScript engine (such as V8 for Chrome), the DOM API for manipulating the HTML and CSS of a web page, and other APIs for interacting with the browser, such as the window and document objects.

Node.js environment

Node.js is another popular JavaScript environment, which allows JavaScript to run on the server-side. It provides a set of APIs for accessing the file system, network, and other resources that are not available in the browser environment. Node.js also includes a package manager (npm) that allows developers to easily install and manage third-party libraries and frameworks.

Mobile environment

The mobile environment includes mobile web browsers and hybrid mobile apps, which run JavaScript code in a native environment. It provides a set of APIs for accessing device features, such as the camera, accelerometer, and GPS.

Overall, the JavaScript environment is essential for developers to create web and mobile applications using JavaScript. Understanding the different environments and their APIs is crucial for developing efficient and reliable JavaScript applications.

Here is an Example for DOM in javascript

Source Code

<html lang="en">
  <head>
    <title>Tutor Joes</title>
  </head>
  <body>
    <h3 id="brand">Tutor Joe's</h3>
    <h1>ACCESSING THE DOM</h1>
    <h3 class="sub-title">JavaScript Tutorial</h3>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus accusantium ab quam? Perferendis similique velit inventore, quibusdam omnis ad earum. Illum repellat eum saepe laboriosam
      ea, a non soluta quo.
    </p>
    <h3 class="sub-title">DOM Tutorial</h3>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus accusantium ab quam? Perferendis similique velit inventore, quibusdam omnis ad earum. Illum repellat eum saepe laboriosam
      ea, a non soluta quo.
    </p>
    <script src="106_dom.js"></script>
  </body>
</html>

JavaScript File

let brand = document.getElementById("brand");
console.log(brand);
console.log(brand.nodeType);
console.log(brand.nodeName);
brand.style.backgroundColor = "purple";
brand.style.color = "white";

let stitle = document.getElementsByClassName("sub-title");

console.log(stitle);

stitle[0].style.color = "Red";
stitle[1].style.color = "Red";
/*
stitle.forEach((element) => {
  element.style.color = "Red";
});
*/
for (let i = 0; i < stitle.length; i++) {
  stitle[i].style.color = "blue";
}

let para = document.getElementsByTagName("p");
console.log(para);

for (let i = 0; i < para.length; i++) {
  para[i].style.color = "purple";
}

let heading = document.querySelector("h1");
console.log(heading);
heading.style.color = "orange";

let qpara = document.querySelectorAll("p");
console.log(qpara);
qpara.forEach((element) => {
  element.style.color = "blue";
});

This code is an example of using the Document Object Model (DOM) API in JavaScript to manipulate the style of HTML elements on a web page.

The first line selects an HTML element with the ID "brand" using the getElementById method and assigns it to a variable called brand. The code then logs the brand variable to the console and retrieves information about the node type and name of the element using the nodeType and nodeName properties.

The next few lines change the background color and text color of the brand element using the style property.

The code then selects all elements with the class "sub-title" using the getElementsByClassName method and assigns them to a variable called stitle. The stitle variable is logged to the console, and the text color of each element is changed to either red or blue using a for loop.

The code then selects all p elements using the getElementsByTagName method and assigns them to a variable called para. The para variable is logged to the console, and the text color of each element is changed to purple using a for loop.

The code then selects the first h1 element using the querySelector method and assigns it to a variable called heading. The heading variable is logged to the console, and the text color of the element is changed to orange using the style property.

Finally, the code selects all p elements using the querySelectorAll method and assigns them to a variable called qpara. The qpara variable is logged to the console, and the text color of each element is changed to blue using a forEach loop.

Overall, this code demonstrates how to select and manipulate HTML elements using the DOM API in JavaScript.