Notes-de-Cours/Web/X - API JS-DOM/index.md

---
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)