Selecting Elements
Selection of the elements using document
- document.documentElement
- document.head
- document.body
Query selection
- document.querySelector(‘.header’) // only select 1 element
- document.querySelectorAll(‘.section’) // all element with class section
- document.getElementById(‘section1’) // you can find element by ID
- document.getElementsByTagName(‘button’) // all element by tag – this is live collection
- document.getElementsByClassName(‘btn’) // all element have class btn
Creating and Inserting elements
- .insertAdjacentHTML // use to insert first in element
- document.createElement(‘div’) // create DOM in javascript, you can append or insert in your page.
- .prepend() // add element as first child
- .append() // add element as last child
- .before() // add before the element
- .after() // add after the element
- .remove() // delete the element
Important to know about Class
const logo = document.querySelector(‘.nav__logo’); // element- logo.classList.add(‘a’, ’b’) // add class to element
- logo.classList.remove(‘a’, ‘b’) // remove class
- logo.classList.toggle(‘c’) // toggle
- logo.classList.contains(‘c’) // this will check if class is present in the element or not