tuto JS, les références (3)

http://www.siteduzero.com/tutoriel-3-379705-notions-sur-les-references.html

J'en suis donc là.
 Les références c'est pas une notion facile à comprendre, je trouve. Disons qu'on accède à une création d'élément par sa référence, on accède à un noeud par sa référence, ce qui est différent d'une "variable"... hum.
J'suis pas sûre de ce que j'avance là.

Cloner un élément

Pour pouvoir cloner un élément, on ne peut pas dupliquer cette "variable" puisque c'en est pas une mais c'est une référence...
Comme dans

var div = document.createElement('div');

Dans ce cas, si on fait :

var div2 = div;

c'est incohérent puisque div n'est pas une variable, mais une référence...
On doit donc copier à l'aide de
cloneNode, qui prend comme argument true si l'on souhaite lui ajouter des "enfants", ou "false" dans le cas contraire.

Par exemple, si on veut cloner tout un élément (avec ses enfants) on fait donc :

var div2 = div.cloneNode(true);

ce qui aura pur effet de copier l'intégralité avec. Attention, à ce stade, l'élément est créé mais pas rattaché, il faut bien passer par l'étape

div.parentNode.appendChild(div2)

Si cloneNode duplique les enfants avec l'argument true, il ne duplique pas les événements associés, comme on va le voir après.

Remplacer un élément par un autre

On utilise une méthode simple : replaceChild().
Cette méthode prend deux arguments : le premier étant le nouvel élément, le deuxième étant l'élément à remplacer. Tout comme cloneNode, cette méthode s'utilise sur tout type de noeud (text, élément etc.)
L'exemple suivant va montrer comment on fait pour modifier le contenu d'un lien, par exemple.

un peu de texte et un lien voilà.

var link = document.getElementsByTagName('a')[0];
var newLabel = 'un hyperlien';
link.replaceChild(newLabel, link.firstChild);

Supprimer 

Rien de plus simple. Autant pour déplacer, on utilise replace, autant pour supprimer, on utilise removeChild(); Prend en paramètre le noeud à supprimer.

On reprend l'exemple du dessus :

linksuppr = link.parentNode.removeChild(link);

A noter quela méthode retourne l'élément supprimé. On peut donc facilement le réintégrer dans le DOM ailleurs.
(linksuppr.appenChild ... )

Autres méthodes 

Par exemple, tester si l'élément a des enfants (ce qui peut être fort utile !!)

hasChildNodes();

renvoie true si des enfants, false si pas. Enfantin...

insertBefore();

Ca permet d'insérer avant l'élément choisi, ce qui est fort utile.

un peu de texte et un lien et voilà ! 

Et là, on veut ajouter un em en emphase légère.

var link = document.getElementsByTagName('a')[0];
var emphase = document.createElement('em');
var emphaseText = document.createTextNode('et du texte en emphase');
    emphase.appendChild(emphaseText);
link.insertBefore(emphase, link.lastChild);

Et voilà le travail ! Ceci ajoute donc avant le dernier noeud "en emphase".

On attendrait en toute logique une méthode similaire qui permettrait d'ajouter après : insertAfter();
Cette méthode n'existe pas. On peut cependant créer une fonction qui comble ce manque :

function insertAfter(newElement, afterElement){
var parent = afterElement.parentNode;
if(parent.lastChild===afterElement)
    {
    parent.appendChild(newElement);
    } else {
    parent.insertBefore(newElement, afterElement.nextSibling);
    }
}

Cette petite boucle permet d'ajouter en position choisie un élément, after, quoi...

Le cours est quasi terminé sur la partie DOM. Désormais, un petit TP pour voir si j'ai bien compris cette énorme pavé que je viens de me taper.
:)

La suite au prochain épisode.

http://www.siteduzero.com/tutoriel-3-379727-mini-tp-recreer-une-structure-dom.html
les TP sont faits, ça va bien, le chapitre me semble compris.
Je passe donc à la suite, youpi.