Introduction

Installation

Questions fréquemment posées

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

Distribution standard

Implémentation de import

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

 

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 "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 de l'écranL
abs_topentierposition de l'élément par rapport au bord supérieur de l'écranL
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 -
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

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

zone = document['zone']
del 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]