Ultimate Guide for DOM API

// 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 <button class="btn">Got it</button>';
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'

Notes:
Click on anchor link will make the page jump to top. This is prevented by using e.preventDefault()
NodeList is not an array, but it has forEach method.
Ex btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));

The above is the detailed content of Ultimate Guide for DOM API. For more information, please follow other related articles on the PHP Chinese website!