"Le DOM" est un terme qui est beaucoup utilisé dans la conception et le développement Web front-end. Il signifie "Document Object Model", et c'est un élément fondamental 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 plus importante.
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, il crée un contrat. Il dit que n'importe quoi peut interagir avec n'importe quoi d'autre, tant qu'il respecte 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 de manière contrôlée et prévisible. L'interface permet également à une partie d'un programme de travailler 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ù vient l'alimentation tant que la tension est correcte. Le transformateur du coin n'a pas besoin de savoir ce qu'il alimente. Il a juste besoin d'envoyer de l'électricité à la bonne tension à 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 (interface de programmation) du DOM.
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 ne vient pas de 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, forçant 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.
Vous pouvez considérer le DOM comme un arbre. Le L'élément est le tronc et tous les éléments à l'intérieur sont des branches. Lorsque vous imbriquez des éléments HTML dans un élément parent, vous créez en fait des branches à partir de cette branche. Le terme approprié pour 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 ramifie. 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.
Le DOM est défini en créant un objet document avec l'interface 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 débutez avec le HTML, voici cinq conseils pour vous familiariser avec celui-ci.
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.
Une fois que votre HTML a structuré le document DOM, CSS peut styliser ce document. Pour ce faire, il doit être capable de 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
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 sac d'astuces pour les trouver. Vous pouvez rechercher des enfants par leur ascendance, des combinaisons de classes et bien plus encore.
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 du document 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.
Internet a beaucoup changé depuis les premiers jours. 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 cependant changé tout cela.
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 apportée aux 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 simples sites Web statiques et de quelques applications hautement fonctionnelles, comme eBay. Aujourd'hui, 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 d'une poignée de problèmes tels que les erreurs de nombre à virgule flottante qui le rendent moins souhaitable pour les développeurs. C'est là qu'intervient WebAssembly.
WebAssembly apporte au navigateur de nombreux avantages du code natif, 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 que WebAssembly apportera, le DOM sera toujours là, fournissant une interface cohérente entre le code et ce qui est affiché dans le navigateur. et
Comment JavaScript interagit avec le DOM
L'avenir du développement Web et du DOM
[]
Google annonce un nouveau haut-parleur intelligent Nest Audio à 99 $
Google officialise le Pixel 5 avec un prix incroyablement bas
