1 Vue d'ensemble du DOM

1.1 Qu'est-ce que le DOM

• Le Modèle d'Objets de Document (Document Object Model)
• Le DOM est une API fondamentale pour représenter et manipuler le contenu des documents HTML et XML
• Le DOM est une interface de programmation standard recommandée par le W3C pour traiter les documents XML

1.2 Classification du DOM

• DOM Core - Modèle standard pour tout document structuré
• DOM XML - Modèle spécifique aux documents XML
• DOM HTML - Modèle spécifique aux documents HTML

1.3 Niveaux du DOM

• Niveau 1

Le DOM de niveau 1 est devenu une recommandation du W3C en octobre 1998, composé de deux modules : le cœur DOM et le DOM HTML. Le cœur du DOM peut mapper la structure des documents basés sur XML, permettant d'accéder et de manipuler n'importe quelle partie du document. Le DOM HTML étend le cœur du DOM en ajoutant des objets et fonctions spécifiques au HTML.

• Niveau 2

En étendant le DOM existant, le DOM de niveau 2 ajoute le support pour les événements souris et interface utilisateur, les plages, la traversée (exécution répétée du document DOM) et les feuilles de style en cascade (CSS) via des interfaces d'objets.

• Niveau 3

Le DOM de niveau 3 étend davantage le DOM en introduisant des méthodes unifiées pour charger et sauvegarder des documents ainsi que pour la validation. DOM3 inclut un nouveau module appelé "DOM Load and Save". Le cœur du DOM étendu supporte maintenant toutes les fonctionnalités de XML 1.0, y compris XML Infoset, XPath et XML Base.

1.4 Arbre DOM

2 Nœuds

2.1 Qu'est-ce qu'un nœud

Chaque partie d'un document est un nœud, y compris le document, les éléments, les attributs, le texte...

2.2 Types de nœuds

• Document Élément Attribut
• Texte
• Commentaire

2.3 Propriétés des nœuds

• nodeName Nom du nœud

document : #document
élément : nom de balise
attribut : nom d'attribut
texte : #texte
commentaire : #commentaire

• nodeValue Valeur du nœud

document : null
élément : null
attribut : valeur d'attribut
texte : contenu textuel
commentaire : contenu du commentaire

• nodeType Type de nœud

document : 9
élément : 1
attribut : 2
texte : 3
commentaire : 8

3 Obtenir des éléments

• Par identifiant

document.getElementById()
L'attribut id devient automatiquement une variable globale accessible par le script

• Par valeur de l'attribut name

document.getElementsByName()
    IE9+ et les navigateurs standards considèrent que tous les éléments ont un attribut name
    IE9- considère que seuls certains éléments ont un name
        Formulaires et contrôles de formulaire
        img iframe embed object ....

Le document crée parfois des propriétés pour certains éléments basées sur leur nom
    <form>
    ![]()
    ......

• Par nom de balise

document.getElementsByTagName()
element.getElementsByTagName()
document.images    Références à toutes les images
document.forms    Références à tous les formulaires
document.links    Références à tous les liens
document.anchors    Références à toutes les ancres

• Par nom de classe (IE9+)

document.getElementsByClassName()
element.getElementsByClassName()

• Par sélecteusr CSS

document.querySelectorAll()
document.querySelector()
element.querySelectorAll()
element.querySelector()

• Obtenir tous les éléments

document.all

4 Structure du document et parcours

4.1 Relations entre nœuds

• Nœud parent Élément parent
• Nœud enfant Élément enfant
• Nœud frère Élément frère
• Nœud ancêtre Élément ancêtre
• Nœud descendant Élément descendant

4.2 Document comme arbre de nœuds

• parentNode Nœud parent
• childNodes Collection de tous les nœuds enfants
• firstChild Premier nœud enfant
• lastChild Dernier nœud enfant
• nextSibling Nœud frère suivant
• previousSibling Nœud frère précédent

4.3 Document comme arbre d'éléments

• parentElement Élément parent (la plupart du temps identique à parentNode)
• children Collection de tous les éléments enfants
• firstElementChild IE9+ Premier élément enfant
• lastElementChild IE9+ Dernier élément enfant
• nextElementSibling IE9+ Élément frère suivant
• previousElementSibling IE9+ Élément frère précédent
• childElementCount IE9+ Nombre d'éléments enfants
• ownerDocument Retourne l'objet document auquel l'élément appartient

5 Attributs

5.1 Attributs des balises HTML et propriétés des objets élément

L'objet HTMLElement mappe les attributs HTML de l'élément

5.2 Obtenir et définir des attributs HTML non standard

• getAttribute(nomAttribut) Obtenir la valeur d'un attribut personnalisé ou intégré
• setAttribute(nomAttribut, valeur) Définir un attribut personnalisé ou intégré
• hasAttribute(nomAttribut) Vérifier si l'attribut existe
• removeAttribute() Supprimer un attribut personnalisé ou intégré

5.3 Comme nœuds Attr

• attributs Collection d'attributs
• setAttributeNode()
• getAttributeNode()
• document.createAttribute() Créer un nœud d'attribut

6 Contenu des éléments

6.1 Contenu comme HTML

• innerHTML
• outerHTML

6.2 Contenu comme texte pur

• textContent IE9+
• innerText Ignore les espaces superflus

6.3 Contenu comme nœuds Texte

Méthodes des nœuds texte

appendData()    Ajouter du contenu à un nœud texte
deleteData()    Supprimer une partie du contenu d'un nœud texte
insertData()    Insérer du contenu dans un nœud texte
replaceData()    Remplacer du contenu
substringData()    Extraire une partie du contenu

Créer des nœuds texte

document.createTextNode()

7 Création, insertion, suppression de nœuds

7.1 Création de nœuds

document.createElement()

7.2 Insertion de nœuds

appendChild()    Ajouter un élément enfant à la fin
insertBefore()    Insérer un élément enfant à une position spécifique

7.3 Suppression de nœuds

removeChild()

7.4 Remplacement de nœuds

replaceChild(nouveau_nœud, ancien_nœud)

7.5 Clonage de nœuds

cloneNode()
    Paramètres
    true    Clone l'élément et tous ses nœuds descendants
    false    Clone uniquement le nœud lui-même

7.6 DocumentFragment

document.createDocumentFragment() Crée cet objet

L'interface DocumentFragment représente une partie d'un document (ou un segment). Plus précisément, il représente un ou plusieurs nœuds Document adjacents et tous leurs nœuds descendants.

Un nœud DocumentFragment n'appartient pas à l'arbre du document, la propriété héritée parentNode est toujours null.

Lorsqu'on demande d'insérer un nœud DocumentFragment dans l'arbre du document, ce n'est pas le DocumentFragment lui-même qui est inséré, mais tous ses nœuds descendants. Cela rend le DocumentFragment utile comme espace réservé temporaire pour stocker les nœuds à insérer dans le document en une seule fois

8 Dimensions, position, défilement des éléments

8.1 Coordonnées d'élément

offsetLeft    Distance par rapport à gauche, règles relatives au positionnement CSS
offsetTop    Distance par rapport en haut, règles relatives au positionnement CSS
offsetParent    Obtenir le premier élément ancêtre positionné
clientLeft    Peu utile, c'est la largeur de la bordure
clientTop    Peu utile, c'est la largeur de la bordure
getBoundingClientRect()        Retourne un objet contenant les informations de position et de taille

8.2 Déterminer si un élément est à un point donné

document.elementFromPoint()

8.3 Interroger les dimensions géométriques d'un élément

getBoundingClientRect()
getClientRects()
offsetWidth
offsetHeight
clientWidth
clientHeight
scrollWidth
scrollHeight

8.4 Défilement

scrollLeft
scrollTop

9 Objet Document

Chaque document HTML chargé dans le navigateur devient un objet Document. L'objet Document nous permet d'accéder depuis un script à tous les éléments d'une page HTML.

9.1 Propriétés

URL        URL de la page actuelle, en lecture seule
domain        Nom de domaine
referrer        URL de la page précédente, en lecture seule
title        
location    
lastModified    
cookie

9.2 Méthodes

write()        
writeln()

10 Objets liés aux formulaires HTML

10.1 Sélection de formulaires et de leurs éléments

10.2 Propriétés des formulaires et de leurs éléments

10.3 Objet form

Propriétés

elements    Collection de tous les contrôles du formulaire

Méthodes

submit()    Soumettre le formulaire
reset()        Réinitialiser le formulaire

​

10.4 Objets bouton (button, submit, reset)

Méthodes

focus()    Obtenir le focus
blur()    Perdre le focus
click()    Simuler un clic sur le bouton

10.5 Cases à cocher et boutons radio

Méthodes

focus()    Obtenir le focus
blur()    Perdre le focus
click()    Simuler un clic

​

10.6 Objets texte (input, textarea)

Méthodes

focus()    Obtenir le focus
blur()    Perdre le focus
select()    Sélectionner tout le contenu

​

10.7 Objet select

Propriétés

options
selectedIndex
length    Nombre d'options

Méthodes

add()    Ajouter une option
remove()    Supprimer une option, paramètre est l'index de l'option
focus()    Obtenir le focus
blur()    Perdre le focus

11 Objets liés aux tableaux

11.1 Objet table

Propriétés

cells    Retourne un tableau contenant toutes les cellules du tableau.
rows     Retourne un tableau contenant toutes les lignes du tableau.

Méthodes

createCaption()    Crée un élément caption pour le tableau.
deleteCaption()    Supprime l'élément caption et son contenu du tableau.
createTHead()    Crée un élément tHead vide dans le tableau.
deleteTHead()    Supprime l'élément tHead et son contenu du tableau.
createTFoot()    Crée un élément tFoot vide dans le tableau.
deleteTFoot()    Supprime l'élément tFoot et son contenu du tableau.
insertRow()    Insère une nouvelle ligne dans le tableau.
deleteRow()    Supprime une ligne du tableau.

11.2 Objet tr

Propriétés

cells    Retourne un tableau contenant toutes les cellules de la ligne.
rowIndex    Retourne la position de la ligne dans le tableau.

Méthodes

deleteCell()    Supprime la cellule spécifiée de la ligne.
insertCell()    Insère un élément <td> vide à la position spécifiée dans une ligne.

​

11.3 Objets td, th

Propriétés

cellIndex    Retourne la position de la cellule dans la collection de cellules de la ligne.

​

​

​