JavaScript - Inheritance of Methods and Properties

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