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.

105 lines
2.6 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)