Please enable JavaScript.
Coggle requires JavaScript to display documents.
DOM : ''Document Object Model'' (DOM HTML en Javascript…
DOM : ''Document Object Model''
définition
Le DOM est une interface de programmation
Le DOM définit une norme pour l'accès aux documents, La norme DOM W3C est séparée en trois
parties distinctes
Noyau DOM - modèle standard pour tous les types de documents
DOM XML - modèle standard pour les documents XML
DOM HTML - modèle standard pour les documents HTML
DOM
arbre DOM
DOM est conçu de façon générique, et comporte des objets. Il s'agit d'un modèle abstrait, indépendant
de tout langage.
Le modèle d'arbre est une arborescence de nœuds
Les objets du DOM disposent de propriétés et de méthodes permettant de les manipuler avec JavaScript
Chaque nœud est un objet, et des méthodes permettent d'accéder aux nœuds en relation avec un nœud
donné.
DOM et HTML
Le code HTML DOM est une interface de programmation objet et un modèle standard pour HTML. Il
définit :
Les éléments HTML comme des objets
Les propriétés de l'ensemble des éléments HTML
Les méthodes pour accéder à tous les éléments HTML
Les événements pour tous les éléments HTML
DOM HTML en Javascript
Avec le DOM HTML, JavaScript obtient toute la puissance dont il a besoin pour créer HTML
dynamique
JavaScript peut changer tous les styles CSS dans la page
JavaScript peut supprimer des éléments et attributs HTML existants
JavaScript peut changer tous les attributs HTML dans la page
JavaScript peut ajouter de nouveaux éléments et attributs HTML
JavaScript peut changer tous les éléments HTML dans la page
JavaScript peut réagir à tous les événements de HTML existants dans la page
JavaScript peut créer de nouveaux événements HTML dans la page
Les types de nœuds
Document : la racine
Lorsqu'une page web se charge, un objet particulier est créé à savoir. L’objet window.document
correspond à l'élément <html>. Il est le propriétaire de tous les autres objets dans la page Web
Element
les balises standards comme <body> ou<p>. Ces nœuds peuvent avoir des sousnœuds, appelés fils ou enfants(children).
Text
le texte Ces nœuds ne peuvent pas avoir de fils.
Comment
Attr
les attributs des balises
Processing instructions
les balises spécifiques
Manipuler les Éléments
Recherche des éléments dans l'arbre
par son attribut id
var e = window.document.GetElementById(id of element)
par sa balise
: getElementsByTagName("Nom de balise").
par son attribut class
getElementsByClassName("Nom de la classe").
par un sélecteur CSS
Manipuler les Attributs
document.getElementById(id).innerHTML
Manipuler les Attributs
e.id : chaîne de caractères (si l'élément a un id...)
et de façon générale:
e.hasAttribute(name) : booléen
e.getAttribute(name) : chaîne de caractères
On peut aussi modifier les attributs d'un noeud
e.setAttribute(name, value)
e.removeAttribute(name)
Changement d’un contenu HTML en utilisant les événements
Un script JavaScript peut être exécuté lorsqu'un événement se produit, comme quand un utilisateur
clique sur un élément HTML.
Exploration générique de l'arbre
parent : le parent d'un noeud
child : les fils d'un nœud
attribute : les attributs d'un nœud
sibling : les nœud-frères
Modification de l'arbre
Création de noeuds
Insertion dans l'arbre DOM
La suppression d'un nœud