Javascript et DOM Code: js-dom

Facebook Tweet Pin Email

1. Table des matières détaillée
2. Introduction
2.1 Les DOMs du W3C
2.2 Niveaux et familles DOM
2.3 Implémentations
2.4 Survol des objets DOM
2.5 Le rapport entre DOM et Javascript
3. Eléments du DOM Core et DOM HTML et ECMAScript bindings
3.1 Apperçu du DOM HTML
3.2 Types de données
4. HTML Window
4.1 Contenu de la fenêtre
Exemple 4-1: Quelques informations sur la fenêtre
4.2 Popups
4.3 Fenêtres
5. Navigator
Exemple 5-1: Détection du navigateur et redirection
Exemple 5-2: Afficher quelques propriétés du navigateur
6. Noeuds et éléments
6.1 DOM Node et DOM Element
6.2 Tests
6.3 Informations sur l’élément
Exemple 6-1: Test si le premier noeud d’un document est un commentaire
6.4 Contenu d’un élément
6.5 Voisinage d’un élément
6.6 Style
6.7 Attributs
7. HTML Document
7.1 Ouvrir, écrire (dans) et fermer un document
7.2 Extraction d’éléments et d’attributs
Exemple 7-1: Extraction d’éléments avec leur id
Exemple 7-2: Tree walking: Collectionner les noms d’éléments
7.3 Création et modification d’éléments
Exemple 7-3: Création d’un élément et insertion dans le DOM
Exemple 7-4: Création d’un élément et insertion dans le DOM 2
8. HTML Attribut
9. HTML Table
10. HTML Form et HTML Elements
Exemple 10-1: Interroger les valeurs d’un formulaire
Exemple 10-2: Transformer le contenu d’un formulaire
11. HTML Style
11.1Modifier le style CSS « inline »
Exemple 11-1: Changer dynamiquement le style d’un élément
Exemple 11-2: Changer dynamiquement le style (2)
Exemple 11-3: Bouger un objet
Exemple 11-4: Animation en continu
Exemple 11-5: Tree walking: changer de style
Exemple 11-6: Tree walking: changer de style
11.2Utilisation de setAttribute
12. HTML Event
12.1Rappel des événements prédéfinis dans Gecko
12.2Construire des Event Listeners
A.Comme nos parents: inline
B.Informel (marche avec IE et Firefox/Mozilla)
Exemple 12-1: Event Listener façon rapide
C.Selon la spécification DOM addEventListener
Exemple 12-2: L’interface addEventListener
12.3Gestion de l’événement
13. AJAX
Exemple 13-1: AJAX request
Exemple 13-2: AJAX request et pseudo XML response
Exemple 13-3: AJAX request et XML response

Introduction

Les navigateurs récents (IE6, Moz1x, Firefox) implémentent un modèle plus puissant et surtout plus propre de ce qu’on avait appelé « DHTML » et qui reposaient sur des technologies non-standardisées et donc incompatibles. Voici les composantes
1. Le langage « JavaScript », un langage de scripting « objets » et qui actuellement est formalisé sous l’appellation « ECMAScript »
2. Les « Document Object Models » (DOMs), qui définissent une série de méthodes et propriétés avec lesquelles on peut interroger et modifier n’importe quel élément d’un document HTML, XML ou encore langages XML comme SVG, X3D, etc.
3. Et bien sûr: HTML + CSS
Les DOMs du W3C
Principe
1. Un DOM est une description structurée d’un document HTML ou XML.
2. Un DOM fournit une interface à cette structure et qui permet de modifier structure, contenu et style d’un document XML ou HTML
En termes techniques:
1. Un DOM est un arbre avec des noeuds
2. Chaque noed est un objet pour lequel il existe des méthodes et des propriétés (qu’on peut « lire » ou modifier).
• Ces interfaces (classes, méthodes et propriétés) sont implémentés pour plusieurs langages comme JavaScript, PhP 5, Java, Python, Perl, ActiveX, … Dans ce contexte, on parle de « Language bindings ».
• Les noms des interfaces, classes, méthodes et propriétés sont en principes les mêmes dans toutes ces implémentations (ce qui facilite la vie).
URL des spécifications:
url: http://www.w3.org/DOM/DOMTR (liste des spécifications)
url: http://www.w3.org/2005/11/Translations/Lists/ListLang-fr.html (liste des traductions)
Niveaux et familles DOM
• Les spécifications W3C DOM sont organisés en « niveaux » (Angl. levels)
Level 0
• Par « level 0 » on entend des implémentations variés non standardisés, comme le modèle d’objets
DHTML de Microsoft, le DOM de Netscape 4.x, etc.
• Certaines fonctions sont toujours indispensables comme par exemple la méthode alert()
Level 1 (octobre 1998)
• DOM Level 1 Core: définit la navigation et la manipulation de documents HTML et XML
• DOM Level 1 HTML: extensions spécifiques à HTML
Level 2 (2001)
• 6 spécifications, ajoute XML namespace support, filtered views and events.
• DOM Level 2 Core Specification (étend DOM Level 1 Core)
• DOM Level 2 Views Specification:
• DOM Level 2 Events Specification: gestion d’événements (mais pas du clavier)
• DOM Level 2 Style Specification: lecture et modification du CSS
• DOM Level 2 Traversal and Range Specification
• DOM Level 2 HTML Specification: extensions pour HTML
Level 3: contient 6 spécifications
• DOM Level 3 Core
• DOM Level 3 Load and Save
• DOM Level 3 XPath
• DOM Level 3 Views and Formatting
• DOM Level 3 Requirements