// 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 '; 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'
Hinweise:
Wenn Sie auf den Ankerlink klicken, springt die Seite nach oben. Dies wird durch die Verwendung von e.preventDefault()
verhindert.
NodeList ist kein Array, verfügt aber über die Methode forEach.
Ex btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));
Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.
Copyright© 2022 湘ICP备2022001581号-3