Javascript : Manipuler le DOM
1. DOM ?
Document Object Model 
Le Document Object Model (ou DOM) est un standard du 
W3C qui décrit une interface indépendante de ...
DOM & tree 
<!DOCTYPE html> 
<html> 
<head> 
<title>Exemple</title> 
</head> 
<body> 
<h1>Super titre</h1> 
<p>Super text<...
L’objet document 
Touts page web chargée dans un navigateur web a son 
propre objet document. Cet objet sert de point d'en...
2. Sélection
Accéder aux éléments (1) 
var elementH1 = document.querySelector('h1'); 
console.log(typeof elementH1); // object 
console...
Accéder aux éléments (2) 
var listElements = document.querySelectorAll('#listTest li'); 
console.log(typeof listElements);...
3. Edition
Accéder aux éléments (1) 
var elementH1 = document.querySelector('h1'); 
elementH1.className = 'toto'; 
<h1 class="toto">S...
Accéder aux éléments (1) 
var listElements = document.querySelectorAll('#listTest li'); 
for (var i = 0; i < listElements....
3. Création
Créer un élément 
var newLiElement = document.createElement('li'); 
newLiElement.className = 'toto'; 
newLiElement.innerHT...
Ajouter un élément 
var newLiElement = document.createElement('li'); 
newLiElement.className = 'toto'; 
newLiElement.inner...
Merci pour votre attention.
Bibliographie 
Eloquent JavaScript - Marijn Haverbeke 
http://eloquentjavascript.net 
Guide JavaScript - teoli, BenoitL, d...
Prochain SlideShare
Chargement dans…5
×

Javascript #7 : manipuler le dom

368 vues

Publié le

Javascript #7 : manipuler le dom

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
368
Sur SlideShare
0
Issues des intégrations
0
Intégrations
117
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript #7 : manipuler le dom

  1. 1. Javascript : Manipuler le DOM
  2. 2. 1. DOM ?
  3. 3. Document Object Model Le Document Object Model (ou DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents XML et HTML http://fr.wikipedia.org
  4. 4. DOM & tree <!DOCTYPE html> <html> <head> <title>Exemple</title> </head> <body> <h1>Super titre</h1> <p>Super text</p> </body> </html> html head body title Exemple h1 Super titre h1 Super text
  5. 5. L’objet document Touts page web chargée dans un navigateur web a son propre objet document. Cet objet sert de point d'entrée au contenu de la page et apporte des fonctions générales au document. https://developer.mozilla.org
  6. 6. 2. Sélection
  7. 7. Accéder aux éléments (1) var elementH1 = document.querySelector('h1'); console.log(typeof elementH1); // object console.log(elementH1); // <h1>Super titre</h1> var elementH2 = document.querySelector('h2'); console.log(typeof elementH2); // object console.log(elementH2); // null <h1>Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul>
  8. 8. Accéder aux éléments (2) var listElements = document.querySelectorAll('#listTest li'); console.log(typeof listElements); // object console.log(listElements); // [li, li, li, item: function] <h1>Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul>
  9. 9. 3. Edition
  10. 10. Accéder aux éléments (1) var elementH1 = document.querySelector('h1'); elementH1.className = 'toto'; <h1 class="toto">Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul>
  11. 11. Accéder aux éléments (1) var listElements = document.querySelectorAll('#listTest li'); for (var i = 0; i < listElements.length; i++) { listElements[i]['id'] = 'list'+i; }; <h1>Super titre</h1> <p>Super text</p> <ul id="listTest"> <li id="list0">Test1</li> <li id="list1">Test2</li> <li id="list2">Test3</li> </ul>
  12. 12. 3. Création
  13. 13. Créer un élément var newLiElement = document.createElement('li'); newLiElement.className = 'toto'; newLiElement.innerHTML = 'New Element'; <h1>Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul>
  14. 14. Ajouter un élément var newLiElement = document.createElement('li'); newLiElement.className = 'toto'; newLiElement.innerHTML = 'New Element'; var elementUl = document.querySelector('ul'); elementUl.appendChild(newLiElement); <h1>Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> <li class="toto">New Element</li> </ul>
  15. 15. Merci pour votre attention.
  16. 16. Bibliographie Eloquent JavaScript - Marijn Haverbeke http://eloquentjavascript.net Guide JavaScript - teoli, BenoitL, delislejm, Ame_Nomade, SphinxKnight https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide ECMAScript Language Specification - Ecma International http://ecma-international.org/ecma-262/5.1/ Javascript: The Definitive Guide - David Flanagan https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th

×