Version

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Packages Brython

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs, propriétés et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Interactions avec Javascript

Modules intégrés propres à Brython

browser
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

Widgets
browser.widgets.dialog
browser.widgets.menu

interpreter
javascript

Travailler avec Brython

Options d'exécution
Test et débogage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

Accéder aux éléments de la page

Pour accéder à un élément, on peut utiliser plusieurs méthodes. La plus courante est de se servir de son identifiant, c'est-à-dire de son attribut id : si on a une zone de saisie définie par

<input id="data">

on peut obtenir une référence à ce champ par

from browser import document
data = document["data"]

L'objet document du module browser référence le document HTML. Il se comporte comme un dictionnaire dont les clés sont les identifiants des éléments de la page. Si aucun élément ne possède l'identifiant spécifié, le programme déclenche une exception KeyError.

Tous les éléments de la page possèdent une méthode get() qui permet de rechercher des éléments de plusieurs façons :

  • elt.get(name=N) retourne une liste avec tous les éléments descendant de elt dont l'attribut name est égal à N
  • elt.get(selector=S) retourne une liste avec tous les élements descendant de elt dont le sélecteur CSS correspond à S

elt.select(S) est équivalent à elt.get(selector=S).

Quelques exemples :

document.select('.foo')       # éléments avec la classe "foo"
document.select('form')       # liste des éléments "<form>"
document.select('H1.bar')     # éléments H1 avec la classe "bar"
document.select('#container') # liste avec l'élément dont l'id vaut "container",
                              # similaire à [document["container"]]
document.select('a[title]')   # éléments A avec un attribut "title"
document.select('#tid td')    # les éléments TD dans l'élément avec l'id #tid

Pour sélectionner un seul élément, utiliser select_one() au lieu de select(). Si le sélecteur correspond à plusieurs éléments, select_one() renvoie le premier.

Voir la documentation MDN pour plus d'informations et d'exemples de sélecteurs CSS.