DOM IN JAVASCRIPT

1.DOM - Document Object Model
It is a programming interface for web documents that allow javascript to access and manipulate the structure,style,and content of a webpage.
(One line answer:allows javascript to access and manipulate HTML elements)

2.why we use DOM?

• change text on a webpage
• change styles(color,size)
• get user input values
• add or remove elements
• Respond to events(click,input)

3.How do you select an element using id?
document.getElementById("id")

4.Difference between innerText and innerHTML?**
innerText = "Text"
innerHTML = "<b>Bold</b>"

5.How do you change text color using DOM?
element.style.color = "red";

6.How to create a new element?
document.createElement("p");

7.how to add an element to the page?
parent.appendchild(child);

8.what is an event in javascript?
An event is an action like click,keypress,or mouse movement

9.HTML Events?

1. onclick
2. onsubmit
3. onchange
4. onfocus
5. onblur
6. onload
7. onkeydown

10.Dom Methods:
document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("p")
document.querySelector("class")
document.querySelectorAll("p")

11.document.getElementById("id")

<h1 id="title">hello</h1>
  <script>
        function changeText(){
            const p =document.getElementById("title");
         console.log(p)
        }
    </script>

output:<h1 id="title">hello</h1>

12.document.getElementsByClassName("class")

<p>class="text">One</p>
<p>class="text">Two</p>

<script>
  const p = document.getElementsByClassName("text");
  console.log(p)
</script>

output: HTMLCollection(2)
0: <p class="text">One</p>
1: <p class="text">Two</p>

11.document.getElementsByTagName("p")

<p>A</p>
<p>B</p>
<script>
  let p = document.getElementsByTagName("p");
  console.log(p[0])
</script>

output:<p>A</p>

12.document.querySelector("class")

<p class="text">A</p>
<p class="text">B</p>
<script>
  let p = document.querySelector(".text");
  console.log(p);
</script>

output:<p class="text">A</p>

13.document.querySelectorAll("p")

<p class="text">A</p>
<p class="text">B</p>
<script>
  let p = document.querySelectorAll(".text");
  console.log(p);
</script>

output:NodeList(2)
0: <p class="text">A</p>
1: <p class="text">B</p>