A web page in a browser window is considered to be a document. Each document has properties that refer to objects that allow us to access and modify them.

The way of accessing and modifying these documents is called Document-Object Model or DOM.

There are four primary objects in the DOM model
 
 Window object
     The window object is the outermost object in the object hierarchy. The document object is the webpage which loads into the window object. 

 Document object
    The document object is created when the webpage loads into the window. This object contains all the content of the web-page. All the manipulations are done within the document object.  

Form object
    Every attribute enclosed in the form tags is considered to be a form object. Each form object has a combination of different form elements within it. 

Form-control elements
    They are all the elements that are present in the form object. Form-control elements include text-input, radio buttons, and checkboxes. 

Javascript can add, change and remove all the elements present inside the window, document and the form.

DOM Methods

There are multiple ways by which we can access the HTML elements in a document.

The getElementById Method: 
    The best way to access the attributes of an HTML element is to obtain it using its id. This method uses the id as a reference to access the element.

Syntax and Example

The getElementByTagName Method:
     This method is used to access all the html elements with a particular html tag like <p>: paragraph, <a>: anchor tag, etc.
Syntax and Example

The getElementByClassName Method: 
    This method can be used to access all the HTML elements in the document having the same class name.
Syntax and Example

DOM Methods can also be used to manipulate HTML elements in the document

Consider the statement
var x 
= document.getElementById(‘random').X 

Different values of X can be 

innerHTML: It is the easiest way to write content into an HTML element

Attribute: This represents the attribute of an HTML element. 

We can change the value of the attribute. 

Style.property: This method is used to change the style of an HTML element. The property of the CSS element that is defined for the HTML element can be manipulated.

Event Objects

The event object that keeps track of everything that is happening on a web page such as clicking a button or hovering the mouse. The event model is implemented differently in different web browsers.

Events Types

When specific events occur on the webpage, javascript gives us the ability to trigger or execute code. A few of the possible events are as follows

  • Click on an element
  • Loading of a page
  • Change in input fields

Event Attributes

Javascript provides us with many event attributes. A few of them are

  • onclick() => This is triggered when the HTML element is clicked.
  • onchange() => This is triggered when the value of the HTML element changes.
  • onload() => This is triggered when user visits the page.
  • onunload() => This is triggered when the user leaves the page.
  • onmouseover() => This is triggered when the mouse is over the HTML element.

Event Listener

addEventListener() method: This method adds an Event Handler to the specified HTML Attribute without disturbing any existing event handlers.

Syntax

HTMLElement.addEventListener(event, function, useCapture);

Event => This is a type of event. All the event Attributes mentioned earlier are valid as events if we remove 'on' in the beginning of the string. 
Ex: 'onclick' becomes 'click'

Function => This is the function that has to be executed when the event is triggered.

useCapture => This is a boolean value used to specify whether to use event bubbling or event capturing. Event bubbling and event capture come into picture when the current HTML element is a child of another HTML element. Eg: The element is a <div> within a <form>. By default, useCapture is set to false.

Note:

1.When a child element is clicked, In case of Event Bubbling the child element is executed before the parent element. The vice versa is true in case of Event Capturing. 
2.We can add multiple event listeners to the same the same HTML attribute. 
3.We can apply the event listener to any object in the hierarchy.