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 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'