Guide ultime pour l'API DOM
// 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'
Remarques :
Cliquez sur le lien d'ancrage pour faire passer la page en haut. Ceci est évité en utilisant e.preventDefault()
NodeList n'est pas un tableau, mais il a la méthode forEach.
Ex btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1658
276
Filtrage multi-conditions JavaScript: implémentation de filtrage de produit dynamique basé sur et / ou logique
Aug 22, 2025 am 10:00 AM
Ce tutoriel présente en détail comment utiliser JavaScript pour implémenter la fonction de filtrage dynamique multi-conditions, permettant aux utilisateurs de filtrer les produits en fonction de plusieurs attributs tels que la couleur et la taille. Grâce à une structure HTML claire et à des exemples de code JavaScript, l'article montre comment gérer de manière flexible et / ou logique pour répondre aux besoins complexes de filtrage des utilisateurs et fournit des suggestions d'optimisation.
Optimiser la gestion des événements des sauts de liaison externe dynamique dans la fenêtre contextuelle jQuery
Sep 01, 2025 am 11:48 AM
Cet article vise à résoudre le problème de la redirection du bouton de redirection de liaison externe dans la fenêtre pop-up jQuery provoquant des erreurs de saut. Lorsqu'un utilisateur clique sur plusieurs liens externes successivement, le bouton Jump dans la fenêtre contextuelle peut toujours pointer vers le premier lien cliqué. La solution principale consiste à utiliser la méthode OFF ('Click') pour annuler l'ancien gestionnaire d'événements avant chaque liaison d'un nouvel événement, garantissant que le comportement de saut pointe toujours vers l'URL cible, réalisant ainsi une redirection de liens précise et contrôlable.
Créer des compteurs JavaScript en cours d'exécution par les jours ouvrables et les heures de travail
Aug 31, 2025 am 06:30 AM
Cet article détaille comment créer un compteur de synchronisation précis à l'aide de JavaScript. Le comptoir est incrémenté une fois par minute, mais ne se déroule que dans les jours ouvrables prédéfinis (du lundi au vendredi) et les heures de travail (comme 6 h à 20 h). Il peut interrompre les incréments pendant les heures de travail, mais afficher la valeur actuelle et réinitialiser automatiquement le premier jour de chaque mois, assurant la précision et la flexibilité de la logique de comptage.
Comment sélectionnez-vous les éléments par un attribut de données dans JavaScript?
Aug 30, 2025 am 01:57 AM
Vous pouvez sélectionner des éléments avec des attributs de données dans JavaScript via le sélecteur d'attribut CSS et utiliser la méthode document.QuerySelector () ou document.QuerySelectorAll () pour y parvenir. 1. Utiliser [Data-Attribute] pour sélectionner un élément avec l'attribut de données spécifié (n'importe quelle valeur); 2. Utilisez [data-attribut = "Value"] pour sélectionner un élément dont la valeur d'attribut correspond exactement; 3. Accédez à l'attribut de données via Element.Dataset, où Data-User-ID correspond à DataSet.Userid (Remplacer
Pytest et sélénium: stratégies de mise en œuvre pour les tests dynamiques basés sur les données
Aug 30, 2025 am 06:00 AM
Cet article vise à résoudre le problème selon lequel le décorateur de @ pytest.mark.Marametrise ne peut pas gérer directement les données générées lors de l'exécution lors de l'utilisation de PyTest et du sélénium pour des tests dynamiques basés sur les données. Nous explorerons les limites de pytest.mark.Parametrize en profondeur et introduirons en détail comment implémenter gracieusement les tests paramétrés en fonction de l'acquisition de données dynamiques de sélénium via la fonction de crochet Pytest_GenEReate_tests de Pytest pour assurer la flexibilité et l'efficacité des cas de test.
Optimiser le rendu des composants React: résoudre les problèmes de sur-rendu causés par le plan de la souris
Aug 22, 2025 pm 01:36 PM
Cet article vise à résoudre les problèmes de sur-rendu déclenchés par OnMouseOver dans les applications React. En remplaçant OnMouseover par OnMouseEnter et combiné avec OnMouseout par OnMouseleave, vous pouvez réduire considérablement la rediffusion des composants inutile et améliorer les performances de l'application, en particulier lorsque vous traitez un grand nombre de composants. L'article fournira un exemple de code et des explications détaillées pour aider les développeurs à comprendre et à appliquer cette technique d'optimisation.
Comment les éléments DOM créés dynamiquement sont accessibles et exploités par des scripts préchargés
Aug 30, 2025 am 11:57 AM
Cet article explore comment les scripts JavaScript peuvent être effectivement accessibles et manipulés lorsqu'ils sont chargés et exécutés avant la création d'éléments DOM dans le développement Web. Nous présenterons trois stratégies de base: passer directement les références d'élément via des valeurs de retour de fonction, en utilisant des événements personnalisés pour réaliser une communication intermodule et en utilisant MutationObserver pour écouter les changements de structure DOM. Ces méthodes peuvent aider les développeurs à résoudre les défis entre le synchronisation de l'exécution JavaScript et le chargement dynamique du contenu, garantissant que le script peut fonctionner correctement des éléments ajoutés par la suite, tels que les rendre glisserables.
JS obtient la hauteur et la largeur d'un élément
Aug 22, 2025 pm 04:16 PM
UseclientWidth / ClientHeightForvisibleContentAreAncludepadding; 2. UseOffsetWidth / OffsetheightFortTOrAnderedSize ye
