# JAVASCRIPT DOM MANIPULATION.

Introduction.

what is dom manipulation DOM (Document Object Model) in Javascript refers to the process of using JavaScript to access, add, or remove elements in our html document.

Methods of using Dom
* querySelector()
* querySelectorAll()
* getElementById()
* document.createElement()
* addEventListener()

1 querySelector() :- these helps us to manipulate an id giving to a certain element in our html e.g

<p id="input">Promise is a web developer</p>

<script>
    document.querySelector("#input");
</script>

these is how to call element using querSelector and also querySelector if your are using it for an input it select the first one only

2 querySelectorAll() :- these helps us to manipulate our html elements onlike querySelector querySelectorAll it select all the element with that class name or with their tagname e.g

<p id="input">Promise is a web developer</p>
<p id="input">Promise is a web developer</p>
<p id="input">Promise is a web developer</p>

<script>
    document.querySelectorAll("#input");
</script>

these selects all the paragraph with the id="input" onlike querySelector that only selects the first one.

3 getElementById() :- these is also used to get an id for a particular element onlike querySelector and querySelectorAll that we use a hash sign before the name of the id getElementById we pass the id only to it e.g

<div id="main">
    <p>i love javascript i love using dom manipulation</p>
</div>

<script>
    document.getElementById("main");
</script>

these is how getElementById works it Selects one element by its id.

4 document.createElement() :document.createElement() is used to create a new HTML element using JavaScript — it's a key part of DOM manipulation. e.g

<div id="container"></div>

let container = document.getElementById("container");

<script>
    let text = document.createElement("p");
    text.textContent = "I was added with append!";
    container.appendChild(text);
</script>

so that is what it is use for and also we used the appendChild it is used just like push() it is used to append elements to the div or parentElement you want to be.

5. addEventListener() :- it is a method in JavaScript that is used to attach an event handler to an element it also allows you listen to specific events like buttons, input so when clicked do these or do that e.g

<button id="myButton">Click Me!</button>

<script>
  let button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Button clicked!");
  });
</script>

as i said it is used to listen to events when clicked or on mouseover, on mouseout, keydown, keyup, keypress, change, focus,