Document Object Model(DOM)
The Document Object Model is a javascript class that defines HTML elements as an object.
Javascript language was initially created for web browser science than it has evolved and become a language with many uses and platforms. when javascript run on a browser there is a ‘’root’’ object called “Window”.
Window: It is a global object for the javascript code. And it also represents the browser window.
Document: The document object is the main “entry point” to the page. We can change or create anything on the page using it and represents all page content as objects that can be modified.
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.
The DOM allows us to do anything with elements and their contents, but first, we need to reach the corresponding DOM object.
DOM tree structure:
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.All these objects are accessible using JavaScript, and we can use them to modify the page.
Top DOM tree nodes are directly available as document properties
<html> : document.documentElement
<body>:document.body
<head>: document.head
To target an arbitrary element of the page.
document.getElementById(id-name) — Find an element by element id. document.getElementsByTagName(tag-name) — Find elements by tag name.
document.getElementsByClassName(class-name) — Find elements by class name.
Most powerful and commonly used Method is
document.querySelector(CSS-selector) — The most versatile method .it select the first element of the selected CSS selector.
document.querySelectorAll(CSS-selector) — to select all the elements of targeted type.
