Javascript #7 : manipuler le dom
16
Javascript : Manipuler le DOM
-
Upload
jean-michel -
Category
Software
-
view
204 -
download
0
description
Javascript #7 : manipuler le dom
Transcript of Javascript #7 : manipuler le dom
Javascript : Manipuler le DOM
1. DOM ?
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
Document Object Model
http://fr.wikipedia.org
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
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
2. Sélection
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>
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>
3. Edition
Accéder aux éléments (1)
<h1 class="toto">Super titre</h1> <p>Super text</p> <ul id="listTest"> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul>
var elementH1 = document.querySelector('h1'); elementH1.className = 'toto';
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>
3. Création
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>
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>
Merci pour votre attention.
BibliographieEloquent 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
