La classe RegExp représente les expressions régulières. On peut créer des expressions régulières :
r ::= a (un caractère)
| . (n'importe quel caractère) | r1 | r2 (r1 ou r2) | r? (r répétée au plus 1 fois) | r* (r répétée 0 fois ou plus) | r+ (r répétée 1 fois ou plus) | [c1 … cn] (un caractère parmis c1, …, cn) | [c1-cn] (un caractère parmis c1, …, cn) | [^c1 … cn] (un caractère sauf c1, …, cn) | [^c1-cn] (un caractère sauf c1, …, cn) | ^ (début de texte) | $ (fin de texte) | (r) (r elle même (groupant) | (?:r) (r elle même (non-groupant)
Les fonctions de manipulation des regexps se trouvent sur deux classes :
La représentation textuelles de documents XML ou HTML n'est pas adaptée à la manipulation des données par un programme :
DOM est une spécification du W3C qui
explique comment représenter un document dans un
langage orienté objet.
Avantages :
Inconvénivents :
Le DOM définit des interfaces (c'est à dire, des noms de classes auquels sont associés des propriétés). Il définit aussi des types de bases (chaînes de caractères, entiers, etc.) et des types auxiliaires qui sont implantés par les types de bases du langage.
//attention ce n'est pas du Java
interface Node {
//constantes entières définissant les types de nœuds
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
//nom et valeur du nœud
readonly attribute DOMString nodeName;
attribute DOMString nodeValue;
//L'une des 12 constantes du slide précédent
readonly attribute unsigned short nodeType;
readonly attribute Node parentNode;
readonly attribute NodeList childNodes;
readonly attribute Node firstChild;
readonly attribute Node lastChild;
readonly attribute Node previousSibling;
readonly attribute Node nextSibling;
readonly attribute NamedNodeMap attributes;
Utilise deux interfaces auxiliaires:
interface NodeList {
Node item(in unsigned long index);
readonly attribute unsigned long length;
};
interface NamedNodeMap {
Node getNamedItem(in DOMString name);
…
}
//Renvoie le document auquel appartient le nœud
readonly attribute Document ownerDocument;
Node insertBefore(in Node newChild, in Node refChild)
raises(DOMException);
Node replaceChild(in Node newChild, in Node oldChild)
raises(DOMException);
Node removeChild(in Node oldChild)
raises(DOMException);
Node appendChild(in Node newChild)
raises(DOMException);
boolean hasChildNodes();
//Nécessaire pour copier un nœud d'un document dans un autre
Node cloneNode(in boolean deep);
L'interface Node est spécialisées en 12 sous-interfaces différents (les 12 types de nœuds possibles). Les principales sont:
interface Text : Node {
//renvoie vrai si le nœud ne contient que des espaces
readonly attribute boolean isElementContentWhitespace;
…
}
(La spécification de DOM mentionne d'autres propriétés)
interface Attr : Node {
readonly attribute DOMString name;
readonly attribute DOMString value;
readonly attribute Element ownerElement;
…
};
interface Element : Node {
readonly attribute DOMString tagName;
//manipulation par chaine :
DOMString getAttribute(in DOMString name);
void setAttribute(in DOMString name,
in DOMString value)
raises(DOMException);
void removeAttribute(in DOMString name)
raises(DOMException);
//manipulation par nœud :
Attr getAttributeNode(in DOMString name);
Attr setAttributeNode(in Attr newAttr)
raises(DOMException);
Attr removeAttributeNode(in Attr oldAttr)
raises(DOMException);
//renvoie tous les descendants avec un certain tag
NodeList getElementsByTagName(in DOMString name);
}
inteface Document : Node {
//L'élément racine
readonly attribute Element documentElement;
//Création de nœuds pour ce document :
Element createElement(in DOMString tagName)
raises(DOMException);
Text createTextNode(in DOMString data);
Attr createAttribute(in DOMString name)
raises(DOMException);
//Les descendants avec un tag particulier
NodeList getElementsByTagName(in DOMString tagname);
//Le descendant avec un id particulier
Node getElementsById(in DOMString tagname);
Un nœud (objet implémentant l'interface Node) ne peut avoir qu'un seul parent (structure d'arbre) :
Lien
]]>
//récupère le premier élément <a> du document
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var a = document.getElementByTagName("a").item(0);
p2.appendChild(a); // attention le lien est déplacé pas copié !
//par contre ici le lien est copié
p2.appendChild(a.cloneNode(true));
L'implémentation de DOM faite par Javascript traduit les types DOM dans les types Javascript suivants :
Les attributs des éléments HTML sont disponibles directement comme des propriétés propres des objets DOM correspondants :
Lien
]]>
//récupère le premier élément <a> du document
var p1 = document.getElementById("p1");
console.log(p1.id); // "p1";
var a = document.getElementByTagName("a").item(0);
console.log(a.href); // "https://www.google.com";
Rappel : en Javascript, assigner une propriété à un objet la crée si elle n'existait pas :
var obj = { }; //Objet vide
obj.toto = "1234"; //Woot!
On appelle expando property une propriété rajouté à un objet DOM. Cela peut être pratique pour ajouter de l'information localement sur un nœud du document. C'est cependant une technique à manier avec soin :
Une partie de la spécification DOM s'intéresse à la notion d'évènements (DOM3 Event Specification). Deux buts :
©xkcd
Paradigme de programmation dans lequel le programmeur
associe du code à des évènements. Une boucle
principale attend l'arrivée d'évènements et exécute le code
associé.
Avantages :
Inconvénivents :
Les notions de prog. évènementielle et multi-thread sont orthogonales. Elles sont cependant liées :
Rappel : la manipulation du DOM en Javascript est mono-thread.
L'exécution d'un script sur cette page prend trop de temps, voulez-vous l'interrompre ?
Les évènements DOM permettent de signaler à l'application deux types d'évènements :
L'API DOM permet de mettre en relation les trois acteurs suivants :
Les objets capables de réagir à un évènement possèdent la méthode .addEventListener(event, callback, [capturePhase])
La structure DOM représente des élèments (graphiques)
imbriqués. Que se passe-t'il lors qu'un élément
(imbriqué) reçoit un évènement (par exemple un clic de souris)
?
Supposons le code HTML suivant :
1 2 3 4