Le héros caché des sites Web: comprendre le DOM

«Le DOM» est un terme qui est beaucoup utilisé dans la conception et le développement de sites Web frontaux. Il signifie "Document Object Model", et c'est une partie fondamentale des sites Web.

Aussi important que soit le DOM, beaucoup de gens ne le comprennent pas. En fait, vous pouvez programmer des sites Web pendant des années sans en apprendre beaucoup à ce sujet. Mais à mesure que la technologie frontale progresse, la compréhension du DOM devient de plus en plus importante.

Comprendre le contrat DOM

Dans la programmation orientée objet, il existe une construction appelée interface. Une interface ne fait rien par elle-même. Au lieu de cela, cela crée un contrat. Il dit que tout peut interagir avec tout le reste, à condition de respecter les règles du contrat d'interface.

Avoir une interface permet à n'importe quelle partie d'un programme d'interagir avec n'importe quelle autre partie du programme d'une manière contrôlée et prévisible. L'interface permet également à une partie d'un programme de fonctionner avec n'importe quelle autre partie, même si elle ne sait rien de la partie du programme de l'autre côté de l'interface.

Une interface est comme une prise électrique dans votre mur. Votre appareil n'a pas besoin de savoir d'où provient l'alimentation tant que la tension est correcte. Le transformateur du coin n'a pas besoin de savoir ce qu'il alimente. Il suffit d'envoyer de l'électricité à la tension appropriée dans votre maison.

Le DOM est une couche d'interface entre la page Web et le code qui la crée et la modifie. Lorsque vous visitez un site Web, vous voyez comment le navigateur rend le DOM de ce site Web. Lorsque vous écrivez du HTML, vous programmez en fait à l'aide de l'API du DOM (interface de programmation).

Le standard DOM est maintenu par une organisation appelée le World Wide Web Consortium, ou W3C. Ils ont créé documentation très détaillée définissant le DOM la norme.

À ce stade, vous pensez peut-être qu'ils ne font pas un très bon travail. Après tout, il y a tellement de problèmes causés par des problèmes de compatibilité entre navigateurs.

Le problème n'est pas avec la norme. C'est avec les navigateurs eux-mêmes. De nombreux navigateurs ont ajouté des fonctionnalités à leur implémentation DOM qui ne sont pas conformes aux normes W3C. Parfois, cette fonctionnalité devient populaire et est implémentée dans la norme DOM, obligeant les autres navigateurs à rattraper leur retard.

Un autre problème est que certaines personnes utilisent encore des versions plus anciennes de navigateurs qui n'ont pas la dernière norme DOM intégrée. Et parfois, les navigateurs n'implémentent pas correctement la norme.

Comment le DOM est structuré

Vous pouvez considérer le DOM comme un arbre. Le L'élément est le tronc, et tous les éléments à l'intérieur de celui-ci sont des branches. Lorsque vous imbriquez des éléments HTML à l'intérieur d'un élément parent, vous créez en fait des branches à partir de cette branche. Le terme propre à chaque branche est «nœud».

La structure arborescente crée des relations logiques entre les nœuds, comme un arbre généalogique. Chaque nœud peut avoir un parent et des ancêtres à partir desquels il se branche. Ils peuvent avoir des frères et sœurs. Et les nœuds peuvent avoir des enfants et des descendants. Penser en ces termes aide beaucoup lorsque vous utilisez JavaScript et CSS pour interagir avec le DOM.

Comment HTML interagit avec le DOM

Le DOM est défini en créant un objet document avec l'interface du document. Votre code HTML est le moyen le plus direct de créer un document. HTML vous donne un moyen simple de définir le document sans avoir besoin de faire de la programmation traditionnelle.

Si vous ne faites que commencer avec HTML, voici cinq conseils pour vous familiariser avec.

5 étapes pour comprendre le code HTML de base

Le HTML est l'épine dorsale de chaque page Web. Si vous êtes un débutant, laissez-nous vous guider à travers les étapes de base pour comprendre le HTML.

Le HTML est plus simple et plus indulgent que les langages de programmation traditionnels. Il facilite l'interaction avec le DOM pour les concepteurs Web débutants.

Comment le CSS interagit avec le DOM

Une fois que votre HTML a structuré le document DOM, CSS peut styliser ce document. Pour ce faire, il doit pouvoir trouver les éléments que vous souhaitez styliser. Il le fait de plusieurs manières.

Vous pouvez accéder aux nœuds de document en référençant les éléments par leur nom, comme et. CSS peut également accéder directement aux éléments en référençant classer et identifiant noms. Le style de classe est appliqué à plusieurs éléments afin que vous puissiez tous les styliser en même temps. À l'inverse, le style des identifiants n'applique les modifications qu'à un seul élément.

Vous pouvez également accéder à la structure de l'arbre généalogique avec CSS et affiner l'accès pour plus de contrôle. Les sélecteurs CSS vous permettent de choisir plusieurs éléments et vous offrent un tas d'astuces pour les trouver. Vous pouvez rechercher des enfants par leur ascendance, des combinaisons de classes et bien plus encore.

Comment JavaScript interagit avec le DOM

JavaScript a le plus de contrôle sur le document car JavaScript est un véritable langage de programmation avec des objets, un contrôle de flux, des variables, etc. Le DOM fournit plusieurs interfaces qui permettent à JavaScript de manipuler le document, les éléments et d'autres nœuds.

En rapport: Qu'est-ce que JavaScript?

JavaScript peut ajouter et supprimer des nœuds ainsi que modifier leur style. Et JavaScript peut surveiller les événements dans le document, comme passer la souris sur un élément, cliquer et appuyer sur des touches.

JavaScript peut rechercher et naviguer dans l'arborescence des documents d'une manière très similaire à CSS. Il est capable de trouver des éléments par identifiant et classe. Et il peut récupérer des listes d'éléments enfants sous forme de tableaux.

L'avenir du développement Web et du DOM

Internet a beaucoup changé depuis les débuts. Au début, JavaScript était principalement utilisé pour des effets spéciaux et des affichages de données simples. La plupart des sites Web n'étaient guère plus que des brochures numériques. AJAX a changé tout cela, cependant.

AJAX permet aux sites Web de mettre à jour les données affichées à partir d'un serveur à la volée sans recharger la page. Avant AJAX, chaque modification des données ne pouvait être vue que lorsque la page était rechargée ou que l'utilisateur naviguait vers une autre page.

Après AJAX, les applications Web sont devenues de plus en plus populaires. Internet n'est plus une collection de sites Web statiques simples et de quelques applications hautement fonctionnelles, comme eBay. Maintenant, Internet est presque un deuxième système d'exploitation, plein d'applications hautement fonctionnelles.

À mesure que les attentes des utilisateurs grandissent, la technologie doit suivre le rythme. JavaScript n'est pas le langage le plus puissant ou le plus rapide. Il souffre également de quelques problèmes tels que des erreurs de nombres à virgule flottante qui le rendent moins souhaitable pour les développeurs. C'est là qu'intervient WebAssembly.

WebAssembly apporte de nombreux avantages du code natif au navigateur, notamment une vitesse améliorée et un meilleur accès au matériel. Il permettra aux programmeurs d'utiliser d'autres langages pour créer des sites Web comme C ++ et Rust.

Mais même avec les vastes améliorations apportées par WebAssembly, le DOM sera toujours là, offrant une interface cohérente entre le code et ce qui est affiché dans le navigateur.

Comment utiliser Outlook en mode sombre

Réduisez la fatigue oculaire et augmentez la durée de vie de votre batterie en basculant Microsoft Outlook en mode sombre.

A propos de l'auteur