Le DOM Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML Il fournit une représentation structurée du document.

Présentation au sujet: "Le DOM Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML Il fournit une représentation structurée du document."— Transcription de la présentation:

1 Le DOM Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML Il fournit une représentation structurée du document et une manière d'accéder à cette structure depuis des programmes permet de modifier dynamiquement la structure/style d'un document

2 Le DOM Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes Dans une page Web il relie les pages Web aux scripts ou langages de programmation

3 Le DOM Le DOM est une représentation entièrement orientée objet d'un document XML donc d'une page Web, peut être manipulé à l'aide d'un langage de script comme JavaScript. Fondamentalement le DOM est indépendant du langage !

4 Même origine, plusieurs directions Spécifié par le W3C : http://www.w3.org/DOM/http://www.w3.org/DOM/ implémenté dans la plupart des navigateurs il peut y avoir des extensions spécifiques en fonction des navigateurs Il peut exister des DOM différents !

5 Exemple paragraphes = document.getElementsByTagName("P"); // paragraphes[0] est le premier élément // paragraphes[1] est le second élément, etc. alert(paragraphes[0].nodeName);

6 Tout est objet Chacune des propriétés et des méthodes et chacun des évènements constituant une page web sont organisés dans des objets Exemple : l'objet document chaque element HTML possède son implémentation DOM avec HTMLTableElement

7 DOM et Javascript Association de fait à l'origine Le DOM n'est pas un langage de programmation API = DOM + langage conséquence le DOM est portable : # Exemple d'utilisation du DOM en Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Propriété DOM de l'objet document; p_list = doc.getElementsByTagName("para");

8 Types de données importants Document Element NodeList Attribute NamedNodeMap

9 Types de données importants Document le plus ”connu” représentation du document dans l'application (navigateur ou autre) objet possédant les méthodes de création d'éléments

10 Types de données importants Element element se réfère à un élément ou à un nœud de type element renvoyé par un membre de l'API DOM document.createElement() renvoie une référence à un objet node, nous dirons simplement que cette méthode renvoie l'element Les objets element implémentent l'interface DOM Element, mais aussi l'interface plus basique Node.

11 Types de données importants NodeList Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName() Les éléments d'une nodeList sont accessibles par un index de deux manières différentes : list.item(1) list[1]

12 Types de données importants Attribute Par exemple par la méthode createAttribute() Les attributs sont des nœuds dans le DOM tout comme les éléments

13 Types de données importants NamedNodeMap Une namedNodeMap est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une namedNodeMap a aussi une méthode item()

14 Exemples document.getElementById(id) element.getElementsByTagName(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.style.left element.setAttribute element.getAttribute element.addEventListener window.content window.onload window.dump window.scrollTo

15 Liens http://www.w3.org/DOM/ http://developer.mozilla.org/fr/docs/DOM