DOM Notes

Full form: Document Object Model

1. Selection methods:

   1. let id = document.getElementById("idName");

   2. let class = document.getElementsByClassName("className");

   3. let tag = document.getElementsByTagName("tagName");

   4. id.innerText = "Hi there"; (changing the text)

   5. query selector : let qs= document.querySelector("#id \ .class \ tagname");

2. To manipulate style

   1. tag[2].style.color = "red";

3. To manipulate classes

   1. qs.className = "class1";

   2. qs.classList = "class1, class2, class3";

4. To manipulate attributes

   1. qs.setAttribute("att1", "att2");

5. To create an element

   1. let title = document.createElement("h1");

      title.className = "pwSkills";

      title.style.fontSize = "25px";

      title.textContent = "Hello";

      document.body.appendChild(title);

6. To delete an element

   1. let ul = document.querySelector("ul");

      let lists = document.quertySelectorAll("li");

      for(list of lists){

      ul.removeChild(list);

      }

7. Event Listener

   1. document.addEventListener("click",functionToCall);

      function functionToCall(){

      code to be exectued

      }

   2. <button onclick="hey()">Submit</button>

      function hey(){
      code to be executed

      }