Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:parcourir_et_changer_le_dom

Voir cette page sous forme de diaporama.

Parcourir et Changer le DOM

Changer la page

  • Structure
  • Interaction avec JavaScript
  • Parcours / Modification

Structure du DOM

  • Arborescence
  • Element
  • Attribut
  • Noeud texte

Arborescence

Element

Attribut

Noeud texte

Noeud vide

Changer la page

  • Structure
  • Interaction avec JavaScript
  • Parcours / Modification

Librairies

  • API DOM ⇒ Le standard
  • innerHTML ⇒ Fonction adopté par tous
  • MooTools (ou une autre) ⇒ Uniformise

JavaScript/DOM

JavaScript permet d'interagir avec le navigateur par le biais d'objets :

L'objet window

L'objet window :

  • Racine de tout le code JavaScript
  • Permets de “parler” au navigateur
  • Représente la fenêtre
  • Et également l'espace des variables globales
test = 'une valeur';
console.log(window.test); // retourne une valeur

window.document

document == window.document

  • La “racine” du DOM
  • Représente la page
  • Permets de modifier la page
  • Propriété de l'objet window :
    • window.document
    • document

Objet JS / Element DOM

Historiquement les objets on des Propriétés :

img.src = 'http://www.img.com/img.png';

Les propriétés dépendent de la nature de l'élément

Ces propriétés correspondent généralement à des attributs :

ing.setAttribute('src','http://www.img.com/img.png');

Pour des raisons de compatibilité, utilisez de préférence les propriétés pour modifier les éléments.

BOM / DOM Level 0 / WHATG

Changer la page

  • Structure
  • Interaction avec JavaScript
  • Parcours / Modification

Parcourir le DOM

  • Dans tout le document
    • Un élément précis
    • Plusieurs éléments
  • Par proximité
    • Parent
    • Enfants
    • Frère

document.getElementById()

document.getElementById()

<p id="unId">un paragraphe</p>
document.getElementById('unId'); 
// retourne le paragraphe 
  • Retrouve un élément par id
    • dois être unique
  • Ne retourne qu'un élément !

$() >= document.getElementById()

  • $() est un raccourci pour document.getElementById()
  • $() est utilisé par d'autres librairies (att. conflit)
  • $() doit être utilisé pour profité de la “magie”
    • Les librairies ajoutent leurs propres fonctions.

$() est implicite

On peut indifféremment passer un id ou un élément :

var myEffects = new Fx.Tween('myElement');
ar myEffects = new Fx.Tween($('myElement'));

Les deux lignes précédentes sont équivalentes.

$($('myElement'))==$('myElement'); // true

document.getElementByTagName()

element.getElementsByTagName()

<p>un paragraphe</p>
<p>un autre paragraphe</p>
document.getElementsByTagName('p'); 
// retourne une liste de tous les paragraphes

nodeList ≠ array

Attention : Les fonctions du DOM retournent des listes de noeuds

  • Ce n'est pas des tableaux Javascript
  • Elles se comportent comme des tableaux
  • Leurs contenus sont susceptibles de changer

Sélecteurs CSS

Sélecteurs CSS3

Blog MooTools : Selectors on fire / W3C : Sélecteurs CSS3

  • Sélectionner des éléments adjacents.
  • Pseudoclasses étendues.
  • Sélection par attributs.

Une alternative est l'utilisation de XPath (DOM Level 3)

CSS : éléments adjacents

CSS : éléments enfants

CSS : élément suivant (direct)

CSS : élément suivant (général)

Pseudoclasses

Sélecteurs sur attributs

Parcourir le DOM

  • Dans tout le document
    • Un élément précis
    • Plusieurs éléments
  • Par proximité
    • Parent
    • Enfants
    • Frère

DOM : éléments adjacents

Attention : Les noeuds vides sont pris en comptes.

Mootools : éléments adjacents

Ne tiennent pas compte des noeuds textes

Mootools : walk()

walk: function(brother, start){
  brother += 'Sibling';
  var el = (start) ? this[start] : this[brother];
  while (el && $type(el) != 'element') el = el[brother];
  return $(el);
},
getFirst: function(){
  return this.walk('next', 'firstChild');
},

Changer la page

  • Structure
  • Interaction avec JavaScript
  • Parcours / Modification

Modifier le DOM

  • Éléments
  • Attributs
  • Contenu

Éléments

  • suppression
  • duplication / création
  • insertion

Suppression d'éléments

Mootools : dispose()

Mootools : elm.dispose()

dispose: function(){
  return this.parentNode.removeChild(this);
},

Évite de devoir référencer le parent pour supprimer un élément.

Suppression de tous les enfants

while (x.childNodes[0]) {
  x.removeChild(x.childNodes[0]);
}

Ou plus simple :

x.innerHTML = '';

(voir plus loin pour explication)

Éléments

  • suppression
  • duplication / création
  • insertion

Duplication d'éléments

Mootools : clone()

Mootools : clone() identique à la fonction du DOM. Mais tiens compte de la “magie” de MooTools.

Eléments

  • suppression
  • duplication / création
  • insertion

Création d'éléments

document.createElement()

Rq: document.createAttribute() (pas très utile)

createTextNode()

MooTools : new Element()

MooTools Element constructeur :

new Element('a', {
    'styles': {
        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function(){
            //aaa
        },
        'mousedown': function(){
            //aaa
        }
    },
    'class': 'myClassSuperClass',
    'href': 'http://mad4milk.net'
});

MooTools : new Element()

MooTools Element constructeur :

  • Permets de créer un élément avec :
    • ses attributs
    • ses styles
    • ses gestionnaires d'événements

La librairie MooTools utilise fréquemment des objets (notation littérale) comme paramètres.

Éléments

  • suppression
  • duplication / création
  • insertion

Assemblage d'éléments

  • Fonction du DOM :
    • Ajouter à la fin : appendChild()
    • Remplacer : replaceChild()
    • Ajouter avant : insertBefore()

Ajouter à la fin

Remplacer

Ajouter avant

Mootools : injectInside()

Mootools : inject() inverse la relation :

noeudParent.appendChild(nvlEnfant);
nvlEnfant.inject(noeudParent);

Les deux lignes précédentes sont équivalentes.

Mootools : inject()

inject: function(el, where){
  el = $(el);
  switch(where){
    case 'before': el.parentNode.insertBefore(this, el); break;
    case 'after':
      var next = el.getNext();
      if (!next) el.parentNode.appendChild(this);
      else el.parentNode.insertBefore(this, next);
      break;
    case 'top':
      var first = el.firstChild;
      if (first){
        el.insertBefore(this, first);
        break;
      }
    default: el.appendChild(this);
  }
  return this;
},

Mootools : inject()

  • inject('before') : ajoute avant (même parent)
  • inject('after') : ajoute après (même parent)
  • inject('inside') : ajoute à la fin (comme dernier enfant)
  • inject('top') : ajoute au début (comme premier enfant)

Modifier le DOM

  • Éléments
  • Attributs
  • Contenu

Attributs

  • ≠ propriétés JS
  • getAttribute(), setAttribute()
  • Mootools : getProperty(), setProperty()
  • Les styles
  • Les classes

Attributs ≠ Propriétés

Rappel :

Utiliser :

img.src = 'http://www.img.com/img.png';

De préférence à :

ing.setAttribute('src','http://www.img.com/img.png');

Pour des raisons de compatibilité.

getAttribute()

Mootools : getProperty()

setProperty(), getProperty() :

  • Uniformise l'accès aux propriétés et attributs
    • 'class': 'className'
    • 'accesskey': 'accessKey'
    • 'disabled': 'disabled'

L'objet Element.style

  • element.style : permet de changer les styles en ligne de l'élément.
  • Les nom sont en camelCase :
    • elm.style.marginTop = “30px”;

Mootools : setStyle()

Mootools : setStyle()

  • Uniformise les noms avec les propriétés CSS :
    • 'margin-top' : marginTop
  • Ajoute automatiquement l'unité :
    • elm.setStyle('margin-top',30); /* '30px' */
  • Prends en charge l'opacité

Mootools : setStyles()

Mootools : setStyles()Permet de fixer plusieurs propriétés en une déclaration :

$('myElement').setStyles({
  border: '1px solid #000',
  width: 300,
  height: 400
});

MooTools : remarque

  • setStyle / setStyles
  • setProperty / setProperties

La forme plurielle dénote que l'on passe un objet (listes de propriétés/valeurs) et non deux paramètres (propriété,valeur).

Attribut class / Propriété className

  • La correspondance class : className à été choisie pour évité le mot-clef class.
  • L'attribut class peut contenir plusieurs classes CSS séparées par des espaces.
  • MooTools offre des fonctions pour manipuler aisément cet attribut et les classes CSS.

MooTools : attribut class

Modifier le DOM

  • Éléments
  • Attributs
  • Contenu

Contenu

  • innerHTML, MooTools : setHTML()
  • innerText, textContent, MooTools : setText()

innerHTML

  • Fonctionnalité “inventée” par Microsoft.
  • Permets de créer du contenu HTML simplement.
  • MooTools : set('html', ...) est identique sous forme de fonction.

MooTools : set('text')

  • Permets de remplacer le contenu d'un élément par un noeud texte.
    • Les entités nommées ne sont pas décodées :
      • elm.setText('a &gt; b'); ⇒ a &gt; b
    • Le texte est rendu à l'identique :
      • elm.setText('a > b'); ⇒ a > b
    • IE : innerText
    • W3C : textContent
cours2007/poo1/cm/parcourir_et_changer_le_dom.txt · Dernière modification: 2009/05/16 22:00 (modification externe)