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 n'importe quoi peut interagir avec n'importe quoi d'autre, tant qu'il suit 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).
La norme DOM est gérée par une organisation appelée World Wide Web Consortium , ou W3C. Ils ont créé une documentation très détaillée définissant la norme DOM .
À 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 mise en œuvre dans la norme DOM, obligeant les autres navigateurs à se rattraper.
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. L'élément <html> est le tronc, et tous les éléments à l'intérieur 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 offre un moyen simple de définir le document sans avoir à faire de programmation traditionnelle.
Si vous ne faites que commencer avec HTML, voici cinq conseils pour vous familiariser avec celui-ci .
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 <div> et <p> . CSS peut également accéder directement aux éléments en référençant les noms de classe et d' identifiant . Le style de classe est appliqué à plusieurs éléments afin que vous puissiez tous les styliser en même temps. Inversement, le style des identifiants applique les modifications à 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 donnent 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.
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.
Alors que les attentes des utilisateurs grandissent, la technologie doit suivre. 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à que WebAssembly entre en jeu.
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.