What is the DOM?
When a web page is loaded, the browser creates a Document Object Model(DOM) of the page.
The DOM defines the logical structure of the page.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The document object is the owner of all other objects in your web page.
If you want to access objects in an HTML page, you always start with accessing the document object.
The DOM describes the relationships of HTML elements(nodes). Element objects can have child nodes. Elements on the same node tree level are called siblings.
1.Node Relationship
The DOM represents a document as a tree, which is made up of parent-child relationships.
2.Working with DOM
In the DOM, all HTML elements are defines as objects. Objects have properties and methods. A property is a value that you can get or set(like changing the content of an HTML element).
A method is an anction that you can do(like adding or deleting an HTML element).
Once you have reached the node, you can access its properties.
3.DOM EVents
HTML DOM allows JavaScript to react to HTML events(is a object). A JavaScript can be executed when an event occurs, such as when a user clicks on an HTML element.
When an event occurs on a target element, a handler function is executed.