Please enable JavaScript.
Coggle requires JavaScript to display documents.
DOM : ''Document Object Model'' (Les principales…
DOM : ''Document Object Model''
❖ Méthodes de sélection DOM
getElementsByTagName(typeBalise)
Description:
Renvoie un ensemble d’éléments (de type nodeList) dont
le type de balise est spécifié. Un élément est accessible de
2 manières
getElementsByClassName(nomClasse)
Description:
Renvoie un ensemble d’éléments dont on spécifie la
classe
getElementById(id)
Description:
Renvoie un élément dont on spécifie l’identifiant (attribut id), null sinon
getElementsByName(name)
Description:
Renvoie un ensemble d’éléments portant une valeur
d’attribut name spécifique
querySelector(sélecteur)
Retourne le premier élément qui correspond au sélecteur
spécifié
querySelectorAll(sélecteur)
Retourne tous les éléments qui correspondent au
sélecteur spécifié
Les principales propriétés
textContent ou innerText
Contenu texte simple
string
innerHTML
Contenu HTML d’un élément
string
outerHTML
Contenu HTML de l’élément même
string
tabindex
Index de tabulation
long
className
Valeur de l’attribut de classe affecté à l’élément
string
id
Valeur de l’attribut id
string
tagName
Type de l’élément (nom de la balise)
string
childNodes
Liste des nœuds enfants contenus dans l’éléments
NodeList
classList
Enumère les classes individuelles présentes dans
l’attribut class
DOMTokenList
lastChild
Dernier nœud enfant
HTMLElement
firstChild
Premier nœud enfant
HTMLElement
parentNode
Nœud parent
HTMLElement
nextSibling
Nœud frère suivant
HTMLElement
prevSibling
Nœud frère précédent
HTMLElement
attributes
Attributs de l’élément
NameNodeMap
❖ Manipulation DOM
Création d’un nouveau nœud
Clonage d’un nœud
Ajout d’un nœud
Remplacement d’un nœud
Suppression d’un nœud
Le DOM définit une norme pour l'accès aux documents, La norme DOM W3C est séparée en trois
parties distinctes
DOM XML - modèle standard pour les documents XML
DOM HTML - modèle standard pour les documents HTML
Noyau DOM - modèle standard pour tous les types de documents
L’arbre DOM
Le modèle d'arbre est une arborescence de nœuds.
DOM de HTML
Le code HTML DOM est une interface de programmation objet et un modèle standard pour HTML. Il
définit :
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
Les éléments HTML comme des objets
DOM HTML en Javascript
JavaScript peut changer tous les éléments,les attributs HTML les styles CSS dans la page
Les types de nœuds
Document : la racine
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 : les commentaires
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
par sa balise
par son attribut class
par un sélecteur CSS
Trouver des éléments HTML par identifiant
Trouver des éléments HTML par nom de balise
Trouver des éléments HTML par nom de classe
Trouver des éléments HTML par des collections d'objets HTML
Manipuler les Attributs
e.id : chaîne de caractères (si l'élément a un id...)
e.hasAttribute(name) : booléen
e.getAttribute(name) : chaîne de caractères
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
La navigation dans l'arbre se fait en appelant :
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
L'ajout d'un noeud se fait en deux temps :
o Création du nœud
o Insertion dans l'arbre DOM
La suppression d'un nœud se fait directement
Création de noeuds
window.document.createElement(tagName) : retourne l'élément créé
window.document.createAttribute(name) : retourne le nœud attribut créé
window.document.createComment(text) : retourne le nœud commentaire créé
window.document.createTextNode(text) : retourne le nœud texte créé
window.document.createElementNS(namespaceURI, tagName)
Modification de l'arbre DOM
n.removeChild(nodeToRemove) : retourne l'objet supprimé
n.insertBefore(nodeToInsert, childRef) : retourne l'objet inséré
n.appendChild(nodeToAppend) : retourne l'objet inséré
n.replaceChild(newNode, oldNode) : retourne l'objet remplacé
n.cloneNode(deepOrNot) : retourne l'objet résultat de la copie
Changer des éléments HTML
Changer le contenu HTML
document.getElementById(id).innerHTML