Ultimativer Leitfaden für die 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'
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.
Bsp. btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));
Das obige ist der detaillierte Inhalt vonUltimativer Leitfaden für die DOM-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1660
276
JavaScript-Multi-Kondition-Filterung: Implementieren Sie die dynamische Produktfilterung basierend auf und/oder Logik
Aug 22, 2025 am 10:00 AM
In diesem Tutorial wird detailliert eingeführt, wie JavaScript verwendet wird, um die dynamische Filterfunktion mit mehreren Konditionen zu implementieren, sodass Benutzer Produkte basierend auf mehreren Attributen wie Farbe und Größe filtern können. Durch klare HTML -Struktur und JavaScript -Code -Beispiele zeigt der Artikel, wie man flexibel behandelt und und oder logisch die komplexen Bedürfnisse der Benutzerfilterung erfüllt und Optimierungsvorschläge liefert.
Optimieren Sie das Ereignishandling von dynamischen externen Link-Sprüngen im Jquery-Popup-Fenster
Sep 01, 2025 am 11:48 AM
Dieser Artikel zielt darauf ab, das Problem der Umleitung der externen Link-Umleitungstaste im Jquery-Popup-Fenster zu lösen, wodurch Sprungfehler verursacht werden. Wenn ein Benutzer nacheinander mehrere externe Links klickt, kann die Sprungschaltfläche im Popup immer auf den ersten Klick-Link verweisen. Die Kernlösung besteht darin, die OFF -Methode ('Click') zu verwenden, um den alten Ereignishandler vor jeder Bindung eines neuen Ereignisses rückgängig zu machen, um sicherzustellen, dass das Sprungverhalten immer auf die neueste Ziel -URL zeigt, wodurch eine genaue und kontrollierbare Umleitung von Link erreicht wird.
Wie wählen Sie Elemente nach einem Datenattribut in JavaScript aus?
Aug 30, 2025 am 01:57 AM
Sie können Elemente mit Datenattributen in JavaScript über den CSS -Attribut -Selektor auswählen und die Methode des document.querySelector () oder document.querySelectorAll () verwenden, um dies zu erreichen. 1. Verwenden Sie [data-attribute], um ein Element mit dem angegebenen Datenattribut (beliebiger Wert) auszuwählen. 2. Verwenden Sie [data-attribute = "value"], um ein Element auszuwählen, dessen Attributwert genau übereinstimmt. 3.. Zugreifen
Erstellen Sie JavaScript -Zähler, die an Arbeitstagen und Arbeitszeiten ausgeführt werden
Aug 31, 2025 am 06:30 AM
In diesem Artikel wird beschrieben, wie Sie einen genauen Zeitschalter mit JavaScript erstellen. Der Zähler wird einmal pro Minute inkrementiert, läuft jedoch nur innerhalb voreingestellter Arbeitstage (Montag bis Freitag) und Arbeitszeiten (z. B. 6 bis 20 Uhr). Es kann während der Nichtbearbeitungszeiten in Erkrankungen innehalten, aber den aktuellen Wert anzeigen und am ersten Tag eines jeden Monats automatisch zurückgesetzt werden, um die Genauigkeit und Flexibilität der Zähllogik zu gewährleisten.
PyTest und Selenium: Implementierungsstrategien für dynamische datengesteuerte Tests
Aug 30, 2025 am 06:00 AM
Dieser Artikel zielt darauf ab, das Problem zu lösen, dass der Dekorator @pyTest.mark.Parametrize die zur Laufzeit generierten Daten bei Verwendung von PyTest und Selen für dynamische datengesteuerte Tests nicht direkt verarbeiten kann. Wir werden die Einschränkungen von PyTest.mark.Parametrize Tiefe untersuchen und ausführlich festlegen, wie parametrisierte Tests auf der Grundlage der Dynamischen Datenerfassung von Selen durch PyTest von PyTest_Generate_Tests Hook -Funktion von PyTest implementiert werden können, um die Flexibilität und Effizienz von Testfällen zu gewährleisten.
Rendering der React-Komponenten optimieren: Lösen
Aug 22, 2025 pm 01:36 PM
Dieser Artikel zielt darauf ab, über-rendering-Probleme zu lösen, die von OnmouseOver in React-Anwendungen ausgelöst werden. Durch den Austausch von Onmouseover durch Onmouseenter und in Kombination mit Onmouseout durch OnmousEleave können Sie unnötige Komponenten-Wiederaufnahmen erheblich reduzieren und die Anwendungsleistung verbessern, insbesondere wenn Sie mit einer großen Anzahl von Komponenten umgehen. Der Artikel enthält Beispielcode und detaillierte Erklärungen, mit denen Entwickler diese Optimierungstechnik verstehen und anwenden können.
JS bekommen die Höhe und Breite eines Elements
Aug 22, 2025 pm 04:16 PM
Useclientwidth/clientHeightForvisibleContentareAincludingPadding; 2. UseStetWidth/OffsetheightheighthEightForTalrenderedSizeIncludingContent, Padding und BordersCludeTeScrollwidthe/ScrollHeightfors -Incontententasingoverflow;
Wie dynamisch erstellte DOM -Elemente von vorgeladenen Skripten zugegriffen und betrieben werden
Aug 30, 2025 am 11:57 AM
In diesem Artikel wird untersucht, wie JavaScript -Skripte effektiv zugegriffen und manipuliert werden können, wenn sie vor der Erstellung von DOM -Elementen in der Webentwicklung geladen und ausgeführt werden. Wir werden drei Kernstrategien einführen: Übergeben von Elementreferenzen direkt über Funktionsrückgabewerte, verwenden benutzerdefinierte Ereignisse, um die Kommunikation zwischen Modul zu erreichen und mit MutationObserver auf Änderungen der Dom-Struktur zu hören. Diese Methoden können Entwicklern helfen, die Herausforderungen zwischen dem Timing von JavaScript-Ausführungen und dem Laden von dynamischem Inhalt zu lösen und sicherzustellen, dass das Skript anschließend Elemente ordnungsgemäß funktionieren kann, z. B. sie schleppend machen.
