Things you gotta know about the DOM

• DOM stands for Document Object Model.
• It is especially a basic representation of an HTML document.
• We can assume that it's a tree of nodes or elements created by the Browser.
• Document Object is a built-in object which has many properties and methods which can be used to manipulate the content, structure and style of the project and the ability to manipulate the DOM

Node or element means any of the HTML Tags, body tags, h1 etc Also, the main point is that we can use Javascript to manipulate these DOM elements or nodes

---

The DOM is Object-Oriented meaning that each one has its own set of properties and methods that we can add, remove and change.

• The browser actually gives us the window object and inside that, we have a document object and it simply represents just a loaded document or Web page.

• Underneath the document, there is an HTML tag or Element. and from there we have the Body tag and the Head tag which are also siblings because there are on the same tree.

• Everything in this diagram is a type of node, the elements, the attribute, the text content and even the line breaks, the comment is even considered as nodes and all these make up the dom tree.

• DOM object itself is the property of the window object which is a global top-level object representing a tab in a browser and this window object has access to such information the toolbars, the height, the width of the window prompts and even the alerts.

• The topmost node or document node here is the root node of the document tree, which we use to access the DOM and manipulate the content.

• This document node has one child node which is the HTML element.

• The HTML element is the parent node to the head and body element.

• The Head and Body elements which you can call as siblings since they are on the same level in the DOM tree

• Underneath the head element you can easily see it has one child node which is the title element and followed by the text which is the title of my website which is the child node of the title element and these relationships are similar on the other side.

• In the Head Tag, we have things like the Meta tag and Title tag.

In the body, we have the output like-

• h1 tags, links, Html5 tags like Header tags, Footer tags, Section tags etc. These tags are also known as semantic HTML.

• If anyone has written HTML, the above diagram will be quite familiar. There is a library jquery which makes things quite easier but it is always worth learning to manipulate with Vanilla Javascript.

• The body element is the parent of the h1 element, link and attribute.

• H1 elements, links etc are siblings to each other.

• And the text contained inside are the child nodes

---

Features of DOM-

• It can manipulate style, content as well as Structure.
• Most unique and useful tools of Javascript.
• Almost every time when the website performs the actions such as toggling a navigation menu or rotating between the slide show images or even displaying the error when the user submits an incomplete form this is the result of javascript accessing and manipulating the dom