DOM and Array in JavaScript

#webdev #javascript #programming #payilagam

What is the DOM?

The DOM is a programming interface provided by the browser that represents the structure of a web page as a tree of objects. Each element in an HTML document becomes a node (object) in this tree. JavaScript can use the DOM to access and manipulate HTML and CSS.

<!DOCTYPE html>
<html>
  <head><title>My Page</title></head>
  <body>
    <h1 id="title">Hello, DOM!</h1>
  </body>
</html>

let heading = document.getElementById("title");
heading.textContent = "Welcome to JavaScript DOM!";

What Does the HTML DOM Look Like?

Imagine your webpage as a tree

The document is the root.

HTML tags like ,

, and are branches.

Attributes, text, and other elements are the leaves.

Why is DOM Required?

Dynamic Content Updates: Without reloading the page, the DOM allows content updates (e.g., form validation, AJAX responses).

User Interaction: It makes your webpage interactive (e.g., responding to button clicks, form submissions).

Flexibility: Developers can add, modify, or remove elements and styles in real-time.

Cross-Platform Compatibility: It provides a standard way for scripts to interact with web documents, ensuring browser compatibility.

Reference:https://www.geeksforgeeks.org/html/dom-document-object-model/

Concept	Description
`document`	The root object representing the whole HTML document.
`getElementById()`	Selects an element by its ID.
`querySelector()` / `querySelectorAll()`	Select elements using CSS selectors.
`innerHTML` / `textContent`	Get or set the content of elements.
`createElement()`	Create new HTML elements dynamically.
`appendChild()` / `removeChild()`	Add or remove elements.
`addEventListener()`	Handle user interactions (e.g., clicks).

Increasing and Decreasing Count:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        .elem{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: aqua;
        }
        .element{
            border: 1px solid blue;
            border-radius: 10px;
            width: 250px;
            height: 20vh;
            padding: 15px;
            text-align: center;
            background-color: wheat;

        }
        button{
            padding: 5px;
            border-radius: 10px;
            background-color: rgb(48, 48, 179);
            color: white;
            width: 80px;
            height: 5vh;
         }
         h1{
            font-size: 40px;
         }
    </style>
</head>
<body>

    <div class="elem">

        <div class="element">
            <h1 id="result"></h1>
    <button onclick="increase()">+</button>
    <button onclick="decrease()">-</button>
    <button onclick="reset()">Reset</button>
        </div>
    </div>

    <script>
        let count=0;
        document.getElementById('result').innerHTML=count
function increase(){
count=count+1;
document.getElementById('result').innerHTML=count
}
function decrease(){
count=count-1;
document.getElementById('result').innerHTML=count
}
function reset(){
count=0;
document.getElementById('result').innerHTML=count
}

    </script>
</body>
</html>

What is array?

In JavaScript, an array is a special type of object used to store an ordered collection of elements. These elements can be of any data type, including numbers, strings, objects, and even other arrays. JavaScript arrays are dynamic, meaning their size can change, and they are zero-indexed, so the first element is accessed with index 0.

Create Array using Literal

let b = [10, 20, 30];

Create using new Keyword

let a = new Array(10, 20, 30);

Method	What It Does
`push()`	Adds item to end
`pop()`	Removes last item
`shift()`	Removes first item
`unshift()`	Adds item to start
`length`	Number of items in array
`includes()`	Checks if an item exists
`indexOf()`	Gets position of an item
`join()`	Joins all items into a string
`slice()`	Copies part of an array
`splice()`	Adds/removes items at a position

Changing BackGroundColor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body{

        display: flex;
        justify-content: center;
        align-items: center;
        height: 60vh;
      }
      .hello{
        padding: 15px;
        border-radius: 5px;
        width: 20;
        background-color: red;
        color: white;
      }
    </style>
</head>
<body>
 <button class="hello" onclick="changecolor()">Change Color</button>   

 <script>
    function changecolor()
    {
let color=["white","blue","yellow","black"];
let len=color.length;
let randomNumber=Math.random()*len;
 let num=Math.floor(randomNumber);
 document.body.style.backgroundColor=color[num];
    }
 </script>
</body>
</html>

DEV Community

DOM and Array in JavaScript

Top comments (0)