DEV Community

Cover image for Document Object Model(DOM) in Javascript
Ezhil Abinaya K
Ezhil Abinaya K

Posted on

Document Object Model(DOM) in Javascript

#html #css #javascript #frontend

Document Object Model(DOM)
The DOM (Document Object Model) is a programming interface for HTML documents. It represents the HTML document as a tree-like structure of objects, allowing JavaScript to access, modify, add, or remove HTML elements, attributes, and styles dynamically. It is used to make web pages interactive.

What can we do using DOM?

  • Access HTML elements
  • Change text (innerText)
  • Change HTML (innerHTML)
  • Change CSS styles (style)
  • Add new elements
  • Remove elements
  • Handle events (click, keypress, etc.) 
<html>
<head></head>

<body>
    <h1 id="demo">This is some text.</h1>
    <button onclick="changeText()">
      Change Text
      </button>

    <script>
        function changeText() {
            let element = document.getElementById("demo");
            element.textContent = "Text changed by JavaScript!";
        }
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
  • The HTML page contains a heading element with the id "demo" and a button.
  • When the button is clicked, the changeText() function is triggered using the onclick event.
  • Inside the function, document.getElementById("demo") is used to access the heading element and store it in the element variable.
  • The textContent property updates the heading text to "Text changed by JavaScript!" dynamically without reloading the page.

Accessing Elements in the DOM
getElementById()
Retrieves an element by its id.

let heading = document.getElementById("title");
console.log(heading.textContent);
Enter fullscreen mode Exit fullscreen mode

Reference
https://www.geeksforgeeks.org/html/javascript-html-dom/

Top comments (0)