You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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.

📖 Plus de méthodes disponibles dans la documentation.