diff --git a/Web/X - API JS-DOM/index.md b/Web/X - API JS-DOM/index.md index 8d787e6..d64afd3 100644 --- a/Web/X - API JS-DOM/index.md +++ b/Web/X - API JS-DOM/index.md @@ -39,10 +39,66 @@ include_toc: true $ELEM.matches($CSS_SELECTOR) // retourne un booléen. ``` - - 💡 En Typescript, vous pouvez préciser le type de retour : ```typescript document.querySelector($CSS_SELECTOR) // retourne un DIV ``` + +# Modifier un élément HTML + +- Classes : + + ```javascript + $ELEM.classList.add($CLASSNAME) + $ELEM.classList.remove($CLASSNAME) + $ELEM.classList.toggle($CLASSNAME [, $FORCE]) // "alterner" + $ELEM.classList.contains($CLASSNAME) // retourne un booléen + ``` + +- Attributs : + + ```javascript + $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: + + ```javascript + // 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` : + +```javascript +// [JS] Javascript +for( let name in $ELEM.dataset ) + $ELEM.dataset[name] +``` + +```python +# [🐍] 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.](https://developer.mozilla.org/en-US/docs/Web/API/Element) + +