[Article] Des nouveautés dans l'interface Element du DOM niveau 4
:salut:
Le DOM HTML niveau 4 étoffe l'interface Element de plusieurs méthodes particulièrement utiles inspirées de la bibliothèque jQuery.
Six nouvelles méthodes d'insertion et de suppression vont donc apparaitre dans les navigateurs permettant de manipuler plus facilement le DOM du document.
On connaissait déjà entre autre les classiques insertBefore(), appendChild() ou removeChild() mais celles-ci s'avéraient assez peu pratiques à utiliser, en particulier car elles se réfèrent à des éléments parents.
Ces nouvelles méthodes se veulent donc plus souples et plus pratiques à mettre en œuvre.
Les nouvelles méthodes sont les suivantes.
Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre avant le premier élément enfant de l'élément auquel on l'applique.
Exemple
Code:
1
2
| var elem = document.getElementById('monElement');
elem.prepend('<div>Nouvel élément inséré</div>'); |
Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre après le dernier élément enfant de l'élément auquel on l'applique.
Exemple
Code:
1
2
3
4
| var elem = document.getElementById('monElement');
var ajout = document.createElement('div');
ajout.appendChild(document.createTextNode('Contenu ajouté.'));
elem.append(ajout); |
Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre dans l'élément parent (et uniquement si cet élément parent existe) avant l'élément auquel on l'applique.
Exemple
Code:
1
2
| var elem = document.getElementById('monElement');
elem.before('<div>Élément ajouté avant elem</div>'); |
Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre dans l'élément parent (et uniquement si cet élément parent existe) après l'élément auquel on l'applique.
Exemple
Code:
1
2
3
4
| var elem = document.getElementById('monElement');
var ajout = document.createElement('div');
ajout.appendChild(document.createTextNode('Contenu ajouté après elem.'));
elem.after(ajout); |
Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet de remplacer dans l'élément parent (et seulement si celui-ci existe) l'élément auquel on applique la méthode par celui passé en paramètre.
Exemple
Code:
1
2
| var elem = document.getElementById('monElement');
elem.replace('<div>Contenu remplaçant elem</div>'); |
Cette méthode ne prend pas de paramètre. Elle permet de supprimer l'élément auquel elle s'applique de son élément parent (et seulement si celui-ci existe).
Exemple
Code:
1
2
| var elem = document.getElementById('monElement');
elem.remove(); |
Support des navigateurs
Le support des navigateurs est assez inégal.
Chrome ne reconnait que la méthode remove().
Opera annonce le support pour certaines versions de Presto.
Safari reconnait les méthodes remove() et replace().
Firefox et Internet Explorer ne supportent pas encore ces méthodes, mais le support est prévu pour Firefox 23.
Tester le navigateur
Pour vérifier si votre navigateur supporte ces nouvelles méthodes, vous pouvez effectuer le test suivant (feature detection) :
Code:
1
2
3
4
5
6
7
| var elem = document.createElement('div');
console.log('prepend' in elem);
console.log('append' in elem);
console.log('before' in elem);
console.log('after' in elem);
console.log('replace' in elem);
console.log('remove' in elem); |
En fonction des résultats du test, vous pouvez utiliser une fonction de remplacement pour pallier ce manque.
Source
