--- gitea: none include_toc: true --- [TOC] # Sélectionner des éléments HTML - Sélectionner un élément à partir d'un sélecteur CSS : ```javascript document.querySelector($CSS_SELECTOR) // retourne un noeud ou undefined. ``` - Sélectionner tous les éléments à partir d'un sélecteur CSS : ```javascript document.querySelectorAll($CSS_SELECTOR) // retourne une liste ``` - Sélectionner un élément descendant de `$ELEM` à partir d'un sélecteur CSS : ```javascript $ELEM.querySelector($CSS_SELECTOR) // retourne un noeud ou undefined. ``` - Sélectionner un élément ancestre de `$ELEM` à partir d'un sélecteur CSS : ```javascript $ELEM.closest($CSS_SELECTOR) // retourne un noeud ou undefined. ``` - Est-ce que `$ELEM` correspond au sélecteur CSS ? ```javascript $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) # Envoyer une requête REST ```javascript // [JS] Javascript async query() { const anwser = fetch($URL); // ou const anwser = fetch($URL, {method: "POST", body: $PARAMS); // [🚩] TODO: tester mode: "no-cors" const json = await anwser.json(); // récupérer du JSON const text = await anwser.text(); // récupérer du texte } query(); ``` ```python # [🐍] Python async query(): anwser = fetch($URL) # ou anwser = fetch($URL, {"method": "POST", "body": $PARAMS) # [🚩] TODO: tester mode: "no-cors" json = await anwser.json() # récupérer du JSON text = await anwser.text() # récupérer du texte aio.run( query() ) # [🚩] TODO: Supplier Pierre pour avoir top-level await. ``` 📖 [Plus d'informations dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/Response) Pour construire la chaîne de paramètre : ```javascript // [JS] Javascript // client const params = new URLSearchParams(); params.set($NAME, $VALUE) fetch( `${URL}?${params.toString()}` ); // serveur const params = new URLSearchParams($STR); for(let key in params.keys() ) params.get(key); // retourne undefined si pas trouvé. params.has($NAME); // retourne un booléen params.get($NAME) ?? $DEFAULT_VALUE; // avec une valeur par défaut ``` ```python # [🐍] Python # client params = URLSearchParams.new() params.set($NAME, $VALUE) fetch( f"{URL}?{params.toString()}" ) # serveur params = URLSearchParams.new($STR); for key in params.keys(): params.get(key); # retourne undefined si pas trouvé. params.has($NAME) # retourne un booléen ``` 📖 [Plus d'informations dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)