JavaScript DOM

• DOM stands for Document Object Model.
• Document can be any file(HTML, XML), object can be Tags and Elements (h1 and p) And the model is the layout of the structure

What is HTML DOM:

• The HTML DOM is a standard object model and programming interface for HTML
• It defines:
  • The HTML elements as objects and the properties of all HTML elements, and also the methods to access the elements.
• In simple words, it is a standard for how to get, change, add, or delete HTML elements

Why is DOM needed:

• Using this, we can change the HTML elements, attributes, and CSS styles in the page
• We can add/remove existing HTML elements and attributes
• React to events from HTML elements

How to select Elements:
-Selecting HTML elements using JavaScript so we can interact with them.

There are several ways to find elements:

1. Finding Elements by id
2. Finding Elements by tag name
3. Finding Elements by class name
4. Finding Elements by css selectors
5. Finding Elements by HTML object collections

1. Find Elements by id:

• If the element is found, the method will return the element as an object(in Element)
• If the element is not found then it will contain null

<h1 id="title">Hello World</h1>
let el = document.getElementById("title");
console.log(el.innerText);//Hello World

2. Find Elements by TagName:

<h1 id="title">Hello World</h1>
<p>First</p>
<p>Second</p>
<script>
const eleByTag=document.getElementsByTagName("p");
console.log(eleByTag[0].innerText);/First
</script>

3. Find Elements by ClassName:

<h1 id="title">Hello World</h1>
<p class="one">First</p>
<p class="two">Second</p>
<script>
const eleByTag=document.getElementsByClassName("two");
console.log(eleByTag[0].innerText);//Second
</script>

4. Find Elements by CSS selectors:

• CSS selectors allow us to access DOM elements using querySelector and querySelectorAll by specifying id, class, tag, or more complex patterns.

What is querySelector():

• It will return the first matching Element

<p class="text">Hello</p>
<p class="text">World</p>

let el = document.querySelector(".text");
console.log(el.innerText);/ return only the first match and second is ignored

• If you want to select all matching elements then go for querySelectorAll()

What is querySelectorAll():

• It will return the all matching elements(Node List)
• If you want to access one element at a time then mention the index

   <p class="one">First</p>
   <p class="two">Second</p>
   <p class="two">Third</p>
<script>
const selector=document.querySelectorAll(".two")
console.log(selector[1].innerText);/Third
    </script>

• You can also Loop through all when using querySelectorAll()

   <p class="one">First</p>
   <p class="two">Second</p>
   <p class="two">Third</p>

<script>
const selector=document.querySelectorAll(".two")
for(let i=0;i<selector.length;i++){
    console.log(selector[i].innerText);//Second,Third
} </script>

5. Find Elemnts using Collections(HTML collection/NodeList):

-It will return multiple elements so use getElementsBy

• When multiple elements are returned, we must iterate through the collection using loops or forEach to access individual elements.

   <p class="one">First</p>
   <p class="two">Second</p>
   <p class="two">Third</p>

<script>
const selector=document.querySelectorAll(".two")
for(let i=0;i<selector.length;i++){
    console.log(selector[1].innerText);//Third
}
</script>

How to Change Elements:

• The HTML DOM allows JavaScript to change both the text and the content of HTML elements.

1. Change the content of an

element:

   <h1 id="title">Hello World</h1>
<script>
const Ele=document.getElementById("title").innerText="Changed Element";
console.log(Ele)//Changed Element
    </script>

2. Changing the attribute:

<img id="img" src="old.png">
let img = document.getElementById("img");
img.setAttribute("src", "new.png");//new.png

3. Changing CSS style:

   <h1 id="title">Hello World</h1>
<script>
const Ele=document.getElementById("title");
Ele.style.color="red";
Ele.style.fontSize="20px";
Ele.style.backgroundColor="Blue"
</script>

How to create elements:

• The createElement() method creates an element node.

<p>Old content:</p>

<script>
// Create element:
const para = document.createElement("p");
para.innerText = "changed paragraph";
// Append to body:
document.body.appendChild(para);
</script>
O/P: Testing Paragraph:
     changed Paragraph

How to remove Elements:

• The remove() method removes an element (or node) from the document.

element.remove()

How to setAttribute():

-setAttribute() is used to add or update an HTML attribute of an element

<button id="btn">Click Me</button>
let btn = document.getElementById("btn");
btn.setAttribute("type", "submit");