Types Of DOM
There are two types of Document Object Model (DOM):
Core DOM: The Core DOM is a standard model for any structured document and is used for manipulating XML documents. It is platform and language-independent.
HTML DOM: The HTML DOM is a standard model for manipulating HTML documents. It is an object-oriented representation of an HTML document, and it is a standard for how to get, change, add, or delete HTML elements. The HTML DOM is a standard for how to access and manipulate HTML documents.
Both Core DOM and HTML DOM are language-independent, meaning that they can be used in any programming language. However, the HTML DOM is specifically designed to work with HTML documents, while the Core DOM can be used with any kind of structured document, including XML and HTML.
Why developers use (DOM) manipulation?
Developers use DOM manipulation because it allows them to create dynamic, interactive web pages that can update in real-time based on user input or other events. This can greatly enhance the user experience by making pages more responsive and interactive.
By manipulating the DOM, developers can create interactive forms, create animations, change the layout of the page, and much more. It also allows to create Single page application which can give a better user experience as the page does not refresh.
Additionally, DOM manipulation allows developers to easily update the page based on data received from a server or other external source, making it an important tool for building dynamic, data-driven web applications.
It also allows developers to work with the web pages in a more programmatic way, making it easy to work with the web pages using the same kind of structures and patterns that they’re used to working with in other areas of programming.
Where you can use (DOM)?
The Document Object Model (DOM) is a programming interface for HTML and XML documents, and it can be used in any programming language that can interact with the web page.
Python: using libraries such as PyQuery or BeautifulSoup
Java: using libraries such as jsoup
And many other programming languages have libraries available for working with the DOM.
These libraries are used to interact with the DOM, so you can use any language you are comfortable with to manipulate the DOM.
<h1 id="myHeading">Hello World!</h1>
<button id="myButton">Click me</button>
// Get the button by its id
var button = document.getElementById("myButton");
// Add an event listener to the button
// Get the heading element by its id
var heading = document.getElementById("myHeading");
// Change the text of the heading
heading.innerHTML = "You clicked the button!";
getElementById() method. Then we are adding a event listener to the button and on event of click, it will call the function where we are getting the heading element with the help of
getElementById() and then we are changing the text of the heading element using the
Hope, You understand (Document object Model)