Introduction

In this article, we learn about DOM (Document Object Model) in JavaScript. The DOM is created when the web page is loaded. It allows access to the entire HTML Page. JavaScript can change the HTML elements, HTML attribute, CSS styles in the page. JavaScript can add and remove the HTML elements and attributes, and react to all the existing elements in the event.

DOM Structure

When you open any web page in the browser, the HTML of the page is loaded and presented to the screen. JavaScript can be used to dynamically add a page's DOM to add, delete, and modify elements. The DOM represents a document as a tree structure.
Document Object Model in JavaScript
Since the body is an element of the DOM, you can access it using the document object and modify the content of the internal HTML property.
For Example: document. bodyinnerHTML = (“text”)

DOM Nodes

All HTML Elements are treated as nodes or objects. The nodes are attributes, elements, text, link, document, etc.…

DOM Properties & Methods

Properties
Used to change the values of HTML elements.
Methods
Action that Perform on Html elements

DOM Manipulation

Manipulation means to create, modify, delete and add attributes to all functionalities.
The following example shows how to display title in a web page.
Example
Try it yourself:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Document Object In JavaScript</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. document.write(document.title); // to get the title
  10. </script>
  11. </body>
  12. </html>
Output
Document Object Model in JavaScript
Get the Image count in a Web page
Example
Try it yourself:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Document Object In JavaScript</title>
  6. </head>
  7. <body>
  8. <h2>click Button show Images And Image Length in Document Object in JavaScript</h2>
  9. <img src="image 1.png" width="500px">
  10. <img src="image 2.png" width="150px">
  11. <img src="image 3.png" width="500px">
  12. <p><h3>Number of images on the web page:
  13. <script type="text/javascript">
  14. document.write(document.images.length);
  15. </script>
  16. </p>
  17. </h3>
  18. </body>
  19. </html>
Output
Document Object Model in JavaScript

Conclusion

This article will demonstrate the basics of document objects. In my next article, I will explain the Methods and Properties in DOM. I hope this article is useful to you. Thanks for reading.