2.6 KiB
Table of Contents
[TOC]
Sélectionner des éléments HTML
-
Sélectionner un élément à partir d'un sélecteur CSS :
document.querySelector($CSS_SELECTOR) // retourne un noeud ou undefined.
-
Sélectionner tous les éléments à partir d'un sélecteur CSS :
document.querySelectorAll($CSS_SELECTOR) // retourne une liste
-
Sélectionner un élément descendant de
$ELEM
à partir d'un sélecteur CSS :$ELEM.querySelector($CSS_SELECTOR) // retourne un noeud ou undefined.
-
Sélectionner un élément ancestre de
$ELEM
à partir d'un sélecteur CSS :$ELEM.closest($CSS_SELECTOR) // retourne un noeud ou undefined.
-
Est-ce que
$ELEM
correspond au sélecteur CSS ?$ELEM.matches($CSS_SELECTOR) // retourne un booléen.
💡 En Typescript, vous pouvez préciser le type de retour :
document.querySelector<HTMLDivElement>($CSS_SELECTOR) // retourne un DIV
Modifier un élément HTML
-
Classes :
$ELEM.classList.add($CLASSNAME) $ELEM.classList.remove($CLASSNAME) $ELEM.classList.toggle($CLASSNAME [, $FORCE]) // "alterner" $ELEM.classList.contains($CLASSNAME) // retourne un booléen
-
Attributs :
$ELEM.getAttribute($ATTR_NAME) $ELEM.setAttribute($ATTR_NAME, $ATTR_VALUE) $ELEM.removeAttribute($ATTR_NAME) $ELEM.toggleAttribute($ATTR_NAME [, $FORCE]) // "alterner" $ELEM.hasAttribute($ATTR_NAME) // retourne un booléen
-
Interface dataset:
// data-toto-foo ($ATTR_NAME) => totoFoo ($DATA_NAME) $ELEM.dataset[$DATA_NAME] // retourne la valeur $ELEM.dataset[$DATA_NAME] = $DATA_VALUE delete $ELEM.dataset[$DATA_NAME] // [JS] Javascript del $ELEM.dataset[$DATA_NAME] // [🐍] Python ($DATA_NAME in $ELEM.dataset) // retourne un booléen
💡 Vous pouvez parcourrir $ELEM.classList
, $ELEM.attributes
, et $ELEM.dataset
:
// [JS] Javascript
for( let name in $ELEM.dataset )
$ELEM.dataset[name]
# [🐍] Python
for name in $ELEM.dataset:
$ELEM.dataset[name]
-
Modifier le contenu (texte) :
$ELEM.textContent = $STR
-
Modifier une variable CSS :
$ELEM.style.setProperty($CSS_VARNAME, $VALUE)
-
Obtenir la valeur d'une varable CSS:
$ELEM.style.getProperty($CSS_VARNAME)
💡 Pour modifier dynamiquement la mise en forme d'un élément via Typescript/Brython, il est recommandé de lui ajouter (ou retirer) une classe CSS.