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.
176 lines
4.3 KiB
176 lines
4.3 KiB
---
|
|
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<HTMLDivElement>($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)
|
|
|
|
|