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

Objets et librairies 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 de la fonction brython()
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
 

Attributs et méthodes des éléments

Attributs et propriétés DOM

Le DOM définit deux concepts différents pour les éléments d'une page:

  • les attributs, qui sont définis dans une balise HTML (ou SVG) : par exemple, <img src="icon.png"> définit l'attribut src de l'élément créé par la balise <img>
  • les propriétés, qui peuvent être attachés à l'élément par la syntaxe pointée : affectation par element.nom_propriete = valeur, lecture par valeur = element.nom_propriete

Le DOM définit également une relation entre certains attributs et certaines propriétés:

  • en général, en ce qui concerne les attributs attendus pour une balise donnée (par exemple "id" ou "class" pour n'importe quel type de balise, "src" pour une balise IMG, "href" pour une balise A, etc), quand on affecte une valeur à l'attribut, une propriété correspondante reçoit aussi une valeur
  • dans la plupart des cas, le nom de la propriété est le même que celui de l'attribut, mais il y a des exceptions : la propriété pour l'attribut "class" est "className"
  • en général, la valeur de la propriété est la même que celle de l'attribut, mais pas toujours : par exemple, dans le cas d'un élément défini par <INPUT type="checkbox" checked="checked">, la valeur de l'attribut "checked" est la chaine de caractères "checked", et la valeur de la propriété "checked" est le booléen true.

En plus des attributs définis par la spécification pour une balise donnée, des attributs additionnels peuvent être définis (les moteurs de template en utilisent souvent) ; pour ces attributs, il n'y a pas de propriété du même nom. Des propriétés spécifiques peuvent aussi être définies pour un élément, et ceci ne définit pas d'attribut du même nom.

Les valeurs des attributs sont toujours des chaines de caractères, alors que les valeurs des propriétés peuvent être de n'importe quel type.

Les attributs sont insensibles à la casse pour les éléments HTML et sensibles à la casse pour les éléments SVG ; les propriétés sont toujours sensibles à la casse.

Gestion des attributs et des propriétés en Brython

Brython gère les attributs DOM à travers l'attribut attrs des instances de DOMNode ; et les propriétés par la syntaxe pointée.

element.attrs est un objet qui se comporte comme un dictionnaire.

# affecte une valeur à un attribut
element.attrs[nom] = valeur

# lit la valeur d'un attribut
valeur = element.attrs[nom] # déclenche une KeyError si l'élément n'a pas
                            # l'attribut "nom"
valeur = element.attrs.get(nom, defaut)

# teste si un attribut est présent
if nom in element.attrs:
    ...

# enlève un attribut
del element.attrs[nom]

# itère sur les attributs d'un élément
for nom in element.attrs:
    ...

for nom in element.attrs.keys():
    ...

for valeur in element.attrs.values():
    ...

for nom, valeur in element.attrs.items():
    ...

Propriétés et méthodes propres à Brython

Par commodité, Brython définit un certain nombre de propriétés et de méthodes:

NomTypeDescriptionL = lecture seule
L/E = lecture + écriture
abs_leftentierposition de l'élément par rapport au bord gauche du document (3)L
abs_topentierposition de l'élément par rapport au bord supérieur du document (3)L
bindméthodegestionnaire d'événements, voir la section événements-
childrenlisteles éléments "descendants" de l'élémentL
class_namechainele nom de la classe de l'élément (attribut class de la balise)
L/E
clearméthodeelt.clear() supprime tous les descendants de l'élément-
closest méthode elt.closest(nom_balise) renvoie le premier élément parent de elt avec la balise spécifiée. Déclenche une KeyError si aucun élément n'est trouvé. -
getméthodesélectionne des éléments (cf accéder aux éléments)-
heightentierhauteur de l'élément en pixels (2)L/E
htmlchainele code HTML contenu dans l'élémentL/E
indexméthodeelt.index([selector]) renvoie le rang (entier) de l'élément parmi les enfants de son parent. Si selector est spécifié, seuls les enfants correspondant à ce sélecteur sont retenus ; dans ce cas, si l'élément ne correspond pas au sélecteur, la méthode renvoie -1-
insideméthodeelt.inside(autre) teste si elt est contenu dans l'élément autre-
leftentierla position de l'élément par rapport au bord gauche du premier parent positionné (1)L/E
parentinstance de DOMNodel'élément parent de l'élément (None pour document)L
selectméthodeelt.select(css_selector) renvoie les éléments correspondant au sélecteur CSS spécifié-
select_one méthode elt.select_one(css_selector) renvoie l'élément correspondant au sélecteur CSS spécifié, sinon None -
scrolled_left entier position de l'élément par rapport au bord gauche de la partie visible du document (3)L
scrolled_top entier position de l'élément par rapport au bord supérieur de la partie visible du document (3)L
textchainele texte contenu dans l'élémentL/E
topentierla position de l'élément par rapport au bord supérieur du premier parent positionné (1) L/E
widthentierlargeur de l'élément en pixels (2)L/E

(1) En remontant dans l'arbre DOM, on s'arrête au premier élément dont l'attribut style.position est défini à une valeur autre que "static". left et top ont le même mode de calcul que style.left et style.top mais sont des valeurs entières et pas des chaines de caractères se terminant par px.

(2) Même mode de calcul que style.height ou style.width mais ce sont des valeurs entières

(3) Au chargement d'une page, les propriétés abs_left et scrolled_left d'un élément sont égales, et de même pour abs_top et scrolled_top. Si on déplace le document de n pixels vers le bas, abs_top garde toujours la même valeur mais scrolled_top est diminué de n.

Pour ajouter un descendant à un élément, on utilise l'opérateur <= (à visualiser comme une flèche vers la gauche, pas comme "inférieur ou égal")

from browser import document, html
document['zone'] <= html.INPUT(Id="data")

On peut itérer sur les enfants d'un élément par la syntaxe classique Python :

for child in element:
    (...)

Pour détruire un élément, utiliser le mot-clé del

del document['zone']

La collection options associée à un objet SELECT a l'interface d'une liste Python :

  • accès à une option par son index : option = elt.options[index]
  • insertion d'une option à la position index : elt.options.insert(index,option)
  • insertion d'une option en fin de liste : elt.options.append(option)
  • suppression d'une option : del elt.options[index]