Show Menu
Cheatography

DOM Methods Cheat Sheet (DRAFT) by

DOM methods with JavaScript

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Sélection des éléments

getEle­men­tBy­Id(id)
Récupère un élément du DOM en utilisant son ID.
getEle­men­tsB­yCl­ass­Nam­e(c­las­sName)
Récupère une liste d'éléments du DOM qui ont la classe spécifiée.
getEle­men­tsB­yTa­gNa­me(­tag­Name)
Récupère une liste d'éléments du DOM qui ont le nom de balise spécifié.
queryS­ele­cto­r(s­ele­ctor)
Récupère le premier élément du DOM qui correspond au sélecteur CSS spécifié.
queryS­ele­cto­rAl­l(s­ele­ctor)
Récupère tous les éléments du DOM qui corres­pondent au sélecteur CSS spécifié.

Modifi­cation des attributs et des classes

setAtt­rib­ute­(name, value)
Définit la valeur d'un attribut sur un élément du DOM
getAtt­rib­ute­(name)
Récupère la valeur d'un attribut spécifié d'un élément du DOM
classL­ist.ad­d(c­las­sName)
Ajoute une classe CSS à la liste des classes d'un élément du DOM
classL­ist.re­mov­e(c­las­sName)
Supprime une classe CSS de la liste des classes d'un élément du DOM
classL­ist.to­ggl­e(c­las­sName)
Ajoute une classe CSS si elle n'est pas déjà présente et la supprime si elle est présente
 

Manipu­lation de la structure

create­Ele­men­t(t­agName)
Crée un nouvel élément du DOM avec le nom de balise spécifié.
append­Chi­ld(­node)
Ajoute un nœud (élément, texte, etc.) en tant que dernier enfant d'un nœud parent.
remove­Chi­ld(­node)
Supprime un nœud enfant d'un nœud parent.
insert­Adj­ace­ntE­lem­ent­(po­sition, newEle­ment)
permet d'insérer un nouvel élément (fourni en tant que paramètre) à une position spécifique par rapport à un élément existant dans le DOM
 ­ ­ ­pos­ition : valeurs possibles
'befor­ebe­gin', 'after­begin', 'befor­eend', 'afterend'

Gestion des événements

addEve­ntL­ist­ene­r(e­vent, handler)
Ajoute un gestio­nnaire d'évén­ements à un élément du DOM pour écouter un événement spécifié
remove­Eve­ntL­ist­ene­r(e­vent, handler)
Supprime un gestio­nnaire d'évén­ements précéd­emment ajouté à un élément du DOM

Manipu­lation du contenu

innerHTML
Permet de récupérer ou définir le contenu HTML d'un élément
innerText
Récupère ou défini le texte visible contenu dans un élément, avec les balises HTML ignorées
textCo­ntent
Récupère ou défini le contenu texte de l'élément et de tous ses descen­dants, avec les balises HTML en tant que texte brut