L’API du DOM
Langage de programmation
Afin de pleinement tirer partie des possibilités de navigation qu’offre le DOM, il faut utiliser un langage de programmation. Du fait de l’environnement des pages HTML basées principalement au cœur d’un navigateur, le Javascript semble tout à fait indiqué. Mais tout autre langage de programmation peut dialoguer avec le DOM.
L’API du DOM propose un ensemble de méthodes et de propriétés qui répondent totalement à nos besoins.
Description de l’API du DOM
Bien que la liste suivante ne soit pas exhaustive, elle reprend les principales méthodes et propriétés de l’API du DOM qui permettent de lire, écrire ou manipuler l’arborescence d’un document HTML.
Si vous souhaitez obtenir plus d’informations sur ce sujet, n’hésitez pas à vous rapprocher des recommandations du w3c qui listent l’ensemble des méthodes et propriétés disponibles… attention toutefois, à vous assurer que les navigateurs cibles de votre production, les aient également implémentées.
Document & récupération
La gestion du document
- le document en question, document
- l’élément racine du document, documentElement
- un raccourci vers la partie body du document, body
Bien faire la distinction entre document et documentElement. En effet, par défaut les deux contiennent 2 childNodes, mais le premier contient, <!DOCTYPE> et <HTML> alors que le second contient <HEAD> et <BODY>.
Accéder à un ou des nœuds
- atteindre un élément par son id, getElementById(id)
- récupérer tous les éléments par leur name, getElementsByName(name), renvoyé sous forme de tableau.
- récupérer tous les éléments ayant une balise donnée, getElementsByTagName(balise), renvoyé sous forme de tableau
Gestion et information sur les nœuds
Informations sur un nœud
- le type d’un nœud, nodeType
- le nom d’un nœud, nodeName
- la valeur d’un nœud, nodeValue
- la valeur d’une id, nodeId
Parentalité du nœud
- le parent d’un nœud, parentNode
- la liste des nœuds qu’un nœud contient, childNodes, renvoyés sous forme de tableau
- interrogé sur la descendance d’un nœud, hasChildNode(), renvoie true ou false
- la liste des attributs d’un nœud, attributes, renvoyée sous forme de tableau
Naviguer entre les nœuds
- obtenir le premier enfant d’un nœud, firstChild
- obtenir le dernier enfant d’un nœud, lastChild
- atteindre le nœud suivant d’un nœud, nextSibling
- atteindre le nœud précédent d’un nœud, previousSibling
Les attributs
accéder et manipuler les attributs
- obtenir la valeur d’un attribut d’un nœud, getAttribute(attribut)
- définir la valeur d’un attribut d’un nœud, setAttribute(attribut, valeur)
- supprimer un attribut d’un nœud, removeAttribute(attribut)
Création et gestion
Créer un élément ou un texte
- créer un nœud, createElement(noeud), ajoute une chaîne de caractère
- créer un nœud de texte, createTextNode(texte), ajoute une chaîne de caractère
- cloner un nœud de l’arborescence, cloneNode(parametre), paramètre est un booléen qui définis sur false permet de renvoyer uniquement le nœud, et sur true renvoie l’arborescence découlant de ce nœud
Insérer ou gérer un nœud
- l’ajout d’un nœud à un nœud appendChild(noeud), ajoute un objet
- la suppression d’un nœud, removeChild(noeud)
- l’insertion d’un nœud, insertBefore(noeud), ajoute un objet
- lire ou définir la valeur HTML d’un nœud, innerHTML, attention c’est une propriété pas une fonction.