Document Object Model|dom

Document Object Model (DOM):-

            The DOM is the structured representation of the HTML document created by the browser. It allows JavaScript to manipulate, structure, and style your website.

Document Object:-

It is the entry point of the DOM. For accessing any HTML Element, you should always start with accessing the document object first.

HTML DOM Tree:-

The DOM tree represents an HTML document as nodes. Each node is referred to as an Object.

Methods

 getElementById

The getElementById() method helps to select the HTML Element with a specific ID.

Properties:-

 textContent:-

To manipulate the text within the HTML Element, we use textContent.

style:-

The style property is used to get or set a specific style of an HTML Element using different CSS properties.

Note:- Use Camel Case naming convention (starting letter of each word should be in the upper case except for the first word) for naming the Style Object Properties.

For example:- color, fontFamily, backgroundColor, etc.

 Events:-

Events are the actions by which the user or browser interacts with the HTML Elements. Actions can be anything like clicking a button, pressing keyboard keys, scrolling the page, etc.

onclick Event:-

The onclick event occurs when the user clicks on an HTML Element. We will give the name of the function as a value for the HTML onclick attribute.