// Selecting Elements: document is not the real DOM element.
document.documentElement; // Select the entire page
document.head; // Select the head
document.body; // Select the body

document.querySelector('.header');    // return first match
const allSections = document.querySelectorAll('.section'); // return all-matches in a static NodeList

document.getElementById('id-name');        // 
document.getElementsByClassName('');        // return all-matches in an live HTMLCollection
const allBtns = document.getElementsByTagName('button');   // return all-matches in an live HTMLCollection

// Creating & Inserting Elements: insertAdjacentHTML
const msg = document.createElement('div'); // create a DOM element, stores it into msg
msg.classList.add('cookie-msg');
// msg.textContent = 'We use cookies for improved functionality & analytics';
msg.innerHTML = 'We use cookies for improved functionality & analytics Got it';
header.append(msg);

// prepend: Adds the element as the first child.
// append: Adds the element as the last child.
// DOM element is unique, it can exist at only one place at a time.

// To insert multiple copies of the same element, true refers all childNodes will also be copied.
header.append(msg.cloneNode(true));

header.before(msg); // insert before header element as a sibling.
header.after(msg); // insert after header element as a sibling.

// Delete Elements: document.querySelector will also work, but below is another way.
// remove() is a recent method, earlier we could only remove child elements by selecting the parent element first, then removing the child. Ex msg.parentElement.removeChild(msg);
document.querySelector('btn-close').addEventListener('click', function(){
  msg.remove();
});


// Styles: will be applied as inline styles.
msg.style.backgroundColor = '#37383d';
msg.style.width = '120%';

msg.style.height; // won't show anything. This works only for properties which we have explicitly set like the above properties.

getComputedStyle(msg).color; // will show a huge object containing all styles.
getComputedStyle(msg).height;

// Increase height by 10px
msg.style.height = Number.parseFloat(getCOmputedStyle(msg).height,10)   40   'px';

document.documentElement.style.setProperty('--color-primary','orangered');

// Attributes
const logo = document.querySelector('.nav__logo');
logo.alt;
logo.className;

// Setting an attribute using JS.
logo.alt = 'Beautiful minimalist logo'

// won't work as its not a standard attribute for that element.
logo.designer; 

// Now it will work.
logo.getAttribute('designer'); 
logo.setAttribute('company', 'Google');

logo.src; // absolute path
logo.getAttribute('src'); // relative path

// Both will be same as they are absolute in both cases.
link.href;
link.getAttribute('href');

// Data-attributes written in 
// HTML as data-version-number
// JS as logo.dataset.versionNumber;
// such special attributes are always stored in dataset object.


// Classes
logo.classList.add()     // Can take multiple classes as args
logo.classList.remove()  // Can take multiple classes as args
logo.classList.toggle()
logo.classList.contains()

// Overwrite all existing classes, replace with the bottom class mentioned.
logo.className = 'xyz'

नोट्स:
एंकर लिंक पर क्लिक करने से पेज शीर्ष पर पहुंच जाएगा। इसे e.preventDefault()
का उपयोग करके रोका जाता है NodeList कोई सारणी नहीं है, लेकिन इसमें forEach विधि है।
उदाहरण के लिए btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));