Documentation Brython

Version

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:

Nom	Type	Description	L = lecture seule L/E = lecture + écriture
abs_left	entier	position de l'élément par rapport au bord gauche du document (3)	L
abs_top	entier	position de l'élément par rapport au bord supérieur du document (3)	L
bind	méthode	gestionnaire d'événements, voir la section événements	-
children	liste	les "enfants" de l'élément qui sont de type élément (pas texte)	L
child_nodes	liste	les "enfants" de l'élément de tout type	L
class_name	chaine	le nom de la classe de l'élément (attribut class de la balise)	L/E
clear	méthode	`elt.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é.	-
get	méthode	sélectionne des éléments (cf accéder aux éléments)	-
height	entier	hauteur de l'élément en pixels (2)	L/E
html	chaine	le code HTML contenu dans l'élément	L/E
index	méthode	`elt.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	-
inside	méthode	`elt.inside(autre)` teste si `elt` est contenu dans l'élément `autre`	-
left	entier	la position de l'élément par rapport au bord gauche du premier parent positionné (1)	L/E
parent	instance de `DOMNode`	l'élément parent de l'élément (`None` pour `document`)	L
select	méthode	`elt.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
text	chaine	le texte contenu dans l'élément	L/E
top	entier	la position de l'élément par rapport au bord supérieur du premier parent positionné (1)	L/E
width	entier	largeur 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]

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

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Attributs et méthodes des éléments

Attributs et propriétés DOM

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

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

Version 3.133.123.113.10

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

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

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

Version