Les navigateurs fournissent une interface de programmation appelée Document Object Model (DOM) qui permet aux scripts, JavaScript en particulier, d'interagir avec la mise en page d'une page Web. Le modèle d'objet de document (DOM) d'une page Web, une structure hiérarchique arborescente qui organise les composants de la page en objets, est créé par le navigateur lors de son chargement. Le style, l'organisation et le contenu d'un document peuvent tous être consultés et modifiés de manière dynamique à l'aide de ce paradigme.
De nombreuses opérations peuvent être effectuées sur le Modèle Objet de Document (DOM) par JavaScript, notamment :
Vous pouvez utiliser JavaScript pour modifier le contenu d'un élément en le ciblant avec la fonction document.getElementById(), puis en modifiant la propriété innerHTML de l'élément :
// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";
L'objet document est à la base du DOM, qui est organisé sous forme d'arborescence d'objets. Chaque élément HTML est représenté sous forme de nœud dans l'arborescence, et ces nœuds sont capables d'avoir des événements, des méthodes et des propriétés associés. En offrant des moyens de naviguer et de travailler avec ces nœuds, le DOM permet aux scripts de modifier la page en temps réel.
Voici un exemple de base de ce à quoi peut ressembler l'arborescence DOM d'un document HTML typique :
document ├── html │ ├── head │ │ └── title │ └── body │ ├── h1 │ └── p
Le DOM est essentiel au développement web pour plusieurs raisons.
Le World Wide Web Consortium (W3C) maintient la norme DOM, qui garantit sa fiabilité et sa cohérence sur les différents navigateurs et systèmes Web. La norme est divisée en différentes sections et niveaux, notamment :
Plus de capacités et de fonctionnalités sont ajoutées avec chaque version standard DOM, permettant des manipulations et des interactions de documents en ligne plus complexes.
Voici une illustration concrète de la façon dont vous pouvez communiquer avec un document HTML à l'aide du DOM :
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button onclick="changeHeader()">Change Header</button>
<script>
function changeHeader() {
// Use the DOM to access and modify the h1 element
var header = document.getElementById("header");
header.textContent = "DOM Manipulation in Action!";
header.style.color = "blue";
}
</script>
</body>
</html>
Dans cet exemple, cliquer sur le bouton appelle la fonction changeHeader(), qui utilise le DOM pour accéder au
Utilisez document.querySelector() pour saisir des éléments avec une précision extrême.
Explication : querySelector() vous permet de sélectionner des éléments à l'aide de sélecteurs CSS, ce qui en fait un moyen puissant et flexible d'accéder aux éléments DOM.
// Select the first element with class 'myClass'
const element = document.querySelector('.myClass');
// Select a specific element by ID
const header = document.querySelector('#header' );
// Select the first <p> inside a <div>
const paragraph = document.querySelector('div p');
Modifiez innerHTML ou textContent pour mettre à jour le contenu de la page à la volée.
Explication : innerHTML ou textContent vous permet de modifier dynamiquement le contenu des éléments, permettant des pages Web interactives et réactives.
// Using innerHTML (can include HTML tags)
document.querySelector('#myDiv').innerHTML = '<strong>New content!</strong>';
// Using textContent (plain text only, safer for user inputs)
document.querySelector('#myParagraph').textContent = 'Updated text content';
Attachez addEventListener() aux éléments pour des expériences utilisateur interactives.
Explication : addEventListener() vous permet de répondre aux actions de l'utilisateur telles que des clics, des pressions sur des touches ou des mouvements de souris, créant ainsi des applications Web interactives.
const button = document.querySelector('#myButton' );
button. addEventListener( 'click', function( ) {
alert( 'Button clicked!')
});
// Using arrow function
document.addEventListener('keydown', (event) => {
console. log( 'Key pressed:', event.key);
});
Naviguez dans l'arborescence DOM avec les propriétés parentNode, children et siblings.
Explication : DOM Traversal vous permet de vous déplacer dans la structure du document, en accédant aux éléments associés en fonction de leur position dans l'arborescence DOM.
const child = document.querySelector('#childElement');
// Access parent
const parent = child.parentNode;
// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;
// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;
The DOM is a powerful tool in JavaScript that enables developers to create rich, interactive web experiences. By understanding and utilizing the DOM, developers can control the behavior and appearance of web pages, making them more engaging and responsive to user interactions.
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!
Comment utiliser le survol en CSS
Explication détaillée de la commande Linux dd
Comment configurer au mieux la mémoire virtuelle
tableau d'insertion de mots
Comment convertir un singe en wav
La différence entre serveur et hôte cloud
Instruction SQL pour sauvegarder la base de données
Comment activer le service de connexion secondaire
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
