Javascript #7 : manipuler le dom

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

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

Accéder aux éléments (1)
var elementH1 = document.querySelector('h1');
console.log(typeof elementH1); // object
console.log(elementH1); // <h1>Super titre</h1>
console.log(typeof elementH2); // object
console.log(elementH2); // null
<p>Super text</p>
<ul id="listTest">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>

var listElements = document.querySelectorAll('#listTest li');
console.log(typeof listElements); // object
console.log(listElements); // [li, li, li, item: function]
<p>Super text</p>
<ul id="listTest">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>

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>

var listElements = document.querySelectorAll('#listTest li');
for (var i = 0; i < listElements.length; i++) {
listElements[i]['id'] = 'list'+i;
};
<p>Super text</p>
<ul id="listTest">
<li id="list0">Test1</li>
</ul>

Créer un élément
var newLiElement = document.createElement('li');
newLiElement.className = 'toto';
newLiElement.innerHTML = 'New Element';
<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);
<p>Super text</p>
<ul id="listTest">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li class="toto">New Element</li>
</ul>

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

Javascript #7 : manipuler le dom

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Javascript #7 : manipuler le dom

Similar a Javascript #7 : manipuler le dom (20)

Más de Jean Michel

Más de Jean Michel (14)

Javascript #7 : manipuler le dom