DEV Community

Veera Ganapathi
Veera Ganapathi

Posted on

DOM (Document Object Model)

#javascript #webdev #developer #programming

DOM (Document Object Model)

  • The HTML DOM (Document Object Model) is a structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript.
  • It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.

Structure of the HTML DOM

  • The document is the root.
  • HTML tags like html, head, and body are branches.
  • Attributes, text, and other elements are the leaves. 
<html>
<body>

<p id="demo"></p>

<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");

// Change the content of the Element
myPara.innerText = "Hello World!";
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • id="demo" is an HTML property
  • getElementById() is a DOM Method
  • innerText is a DOM Property

Selecting DOM Elements

  • Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript.
  • It allows developers to interact with and manipulate elements on a webpage dynamically.
  • Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or modifying styles.

getElementById(id)

  • getElementById(id) method is used to select an element by its unique ID. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementById Method Example</title>
</head>
<body>
    <h1>DOM getElementById Method</h1>
    <p id="demo"></p>
    <script>
        const name=document.getElementById("demo");
        name.innerText="Front-end Developer";
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

getElementsByClassName(class)

  • getElementsByClassName(class) method retrieves all elements that share a given class name. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementsByClassName Methods Example</title>
</head>
<body>
    <h1>DOM getElementsByClassName Concept</h1>
    <p class="demo"><p>
    <p class="veera"></p>
    <script>
        const name=document.getElementsByClassName("demo");
        name[0].innerHTML="Front-end Developer";

        const nam=document.getElementsByClassName("veera");
        nam[0].innerHTML="Web Developer";

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

querySelector(selector)

  • querySelector(selector) method returns the first element that matches the specified selector. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM querySelector Method Example</title>
</head>
<body>
    <h1>DOM querySelector Concept</h1>
    <p id="demo"></p>
    <p id="veera"></p>
    <script>
        const name=document.querySelector("#demo");
        name.innerHTML="Front-end Developer";

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

querySelectorAll(selector)

  • querySelectorAll(selector) method selects all elements that match the given selector. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM querySelectorAll Methods Example</title>
</head>
<body>
    <h1>DOM Concept</h1>
    <p id="demo">This is a paragraph with an Class Name.</p>
    <p id="demo">This is a paragraph with an Class Name.</p>

    <script>
        const name=document.querySelectorAll("#demo");
        name[0].innerHTML="Front-end Developer";

        const nam=document.querySelectorAll("#demo");
        nam[1].innerHTML="Web Developer";

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

EventListener

addEventListener(event, fn)

  • The addEventListener() method attaches an event handler to the specified element. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM getElementById Method Example</title>
</head>
<body>
    <h1>DOM Concept</h1>
    <p id="demo">This is a paragraph with an ID.</p>
    <button id="btn">Click Me</button>
    <script>
        const element = document.getElementById("btn");
        element.addEventListener("click", myFunction);

        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";
        }
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Mouse Events

onclick

The HTML DOM onclick event occurs when the user clicks on an element.

<!DOCTYPE html>
<html>
<body>
 <button onclick="myFunction()">Click me</button>
 <p id="btn"></p>

 <script>
  function myFunction() {
   document.getElementById("btn").innerText = "Clicked ";
  }
 </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

*oninput *

  • The oninput event occurs when an element gets input.
  • The oninput event occurs when the value of an tags input or textarea or select element is changed. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onInput="getString()" id="show">
    <h1 id="result"></h1>
    <script>
        function getString()
        {
            const element=document.getElementById("show").value;
            // const user=element.value;
            document.getElementById("result").innerText=element.length;
            // h1.innerText=user.length;

        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)