What is DOM?

When a web page is loaded, the browser creates a Document Object Model of the page.The DOM defines a standard for accessing documents .The HTML DOM model is constructed as a tree of Objects:

Structure of the DOM:

The DOM represents the structure of a web page as a tree-like hierarchy of nodes.
The root of the tree is the document object, which corresponds to the entire web page. Each element on the page is represented by a node in the tree, and the relationships between elements are represented by parent-child relationships between nodes.

For example:
```
  <body>
  <div> this is div</div>
  <p> this is paragraph</p>
  </body>
```
The <body> element is the parant node of the <div> and <p> elements, which are child nodes.

Types of node:-

There are several different types of nodes in the Dom.Each nodes with a specific purpose or set of propertiess and methods.

some node's are:-

document :- The root node of the DOM tree, representing the entire web page.
Element: Represents an HTML element on the page, such as <p> or <div>.
Text: Represents the text content of an element.
Attribute : Represents an attribute of an element, such as href in <a href="https://example.com">Example</a>

Accessing Elements:-
1. The most basic way to access an element in the DOM is to use the document.getElementById() method, which returns the element with the specified ID.
2. we will access any element with the help of there classname, tagname, id name .
3. For example, the following code gets the element with the ID "paraTag" and sets its text content to "A new para is ganerated":

```javascript
// access by id name
let p = document.getElementById("paraTag");
p.textContent = "A new para is genrated";

//access by class name
let heading = document.getElementByClass("headingtag");
heading.textContent = "changed into new heading";

//access all Tag name
let divss = document.querrySelector("div");
divss.style.background = "yellow";
```

## **Creating and Modifying Elements**

In addition to accessing elements, you can also create new elements and modify existing ones. The document.createElement() method creates a new element, while the appendChild() method adds it to the DOM as a child of a specified element.
For example: we will creates a new <p> element with the text "A new p element is generated in js" and adds it to the end of the <body> element. so, come and let's create
```
  let newPtag = document.createElement("p");
  newPtag.textContent = "hello everyone";
  document.body.appendChild(newPtag);
```

You can also use the innerHTML property to set the HTML content of an element.

let newPtag = document.getElementById("para");
newPtag.innerHTML = "<ol><li>apple</li><li>banana</li></ol>

You can also remove elements from the DOM using the removeChild() method. This method removes a specified child node from the DOM, along with all of its children.

For example

let newPtag = document.getElementById("para");
document.body.removeChild(newPtag);

Manipulating Attributes

You can also manipulate the attributes of an element using the setAttribute() and getattribute() methods.

for example we can select any element and set some attribute at the element like selecet a heading tag and set class name on it.

// setAttribute
let heading = document.getElementByID('heading_one');
heading.setAttribute("class","head");
heading.setAttribute("style","background: gray");

//getAttribute
let heading2 = document.getElementByID("para2");
console.log(heading2.getAttribute("class"));
console.log(heading2.getAttribute("style"));

Manipulating Styles

You can also change the style of an element using the style property.Firstyle we select any element who want to change or set some style.

For example:

we select h1 heading and set a style on it:

let heading = dosument.getElementByID("hFirst");
heading.style.backgroundColor = "orange";
heading.style.color = "white";

Traversing the DOM:

Traversing the DOM refers to moving through the different nodes in the tree structure of the DOM.
There are several properties that can be used to traverse the DOM, including childNodes, firstChild, lastChild, nextSibling, previousSibling, parentNode, etc.

For example:

we can travers any child node or parent node with the help of access of any element id ,class:
```
  //direct access body nodes
  console.log(document.body.firstChild); 
  console.log(document.body.firstElementChild);
  console.log(document.body.childNodes);
```

In these article, we learn and understand about the DOM. Cover all important topics.Read and learn about DOM.

DOM in JS

Table of contents