IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Article] Des nouveautés dans l'interface Element du DOM niveau 4


Sujet :

JavaScript

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 423
    Points
    91 423
    Billets dans le blog
    20
    Par défaut [Article] Des nouveautés dans l'interface Element du DOM niveau 4


    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.
    • prepend()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var elem = document.getElementById('monElement');
    elem.prepend('<div>Nouvel élément inséré</div>');
    • append()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var elem = document.getElementById('monElement');
    var ajout = document.createElement('div');
    ajout.appendChild(document.createTextNode('Contenu ajouté.'));
    elem.append(ajout);
    • before()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var elem = document.getElementById('monElement');
    elem.before('<div>Élément ajouté avant elem</div>');
    • after()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    • replace()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var elem = document.getElementById('monElement');
    elem.replace('<div>Contenu remplaçant elem</div>');

    • remove()

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre actif Avatar de CapFlow
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2011
    Messages : 72
    Points : 219
    Points
    219
    Par défaut
    Mitigé.

    C'est assez sympathique (sauf le "append", si j'ai bien compris c'est absolument pareil que appendChild ou .innerHTML += "").
    De plus, ce ne sont que des raccourcis, j'avoue plutôt pratiques.

    Encore un point, ça devient de plus en plus "permissif", plusieurs façon d'arriver à ses fins. Les fonctions sont plutôt souples.

    Et pour finir, le support. Encore un problème de plus. Il faudra soit utiliser des genre de "polyfill" (c'est bien ça ?), des librairies etc ...
    jQuery va surement s'adapter pour tester si c'est supporté en natif ou non ... quel est l'intérêt ? Ceux qui utilisent jQuery continueront à utiliser jQuery et donc ça limite pas mal l'utilisation de ces méthodes en natif (VanillaJS pour ceux qui préfèrent).

  3. #3
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    Citation Envoyé par CapFlow Voir le message
    Et pour finir, le support. Encore un problème de plus. Il faudra soit utiliser des genre de "polyfill" (c'est bien ça ?), des librairies etc ...
    jQuery va surement s'adapter pour tester si c'est supporté en natif ou non ... quel est l'intérêt ? Ceux qui utilisent jQuery continueront à utiliser jQuery et donc ça limite pas mal l'utilisation de ces méthodes en natif (VanillaJS pour ceux qui préfèrent).
    Oui c'est vrai que jQuery nous évite tous ces problemes.
    Par contre c'est important de continuer a faire évoluer le JavaScript car toutes les applications ne peuvent pas utiliser jQuery (car autre framework ou plateforme).

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 423
    Points
    91 423
    Billets dans le blog
    20
    Par défaut
    Je suis bien d'accord avec alex_vino et je rajouterai même un argument.
    Le fait que ces méthodes deviennent natives de l'API DOM font qu'elles sont optimisées par rapport à ce que fait jQuery.
    De ce fait, lorsque jQuery vérifiera (je n'ai pas vraiment regardé s'il le faisait déjà) l'existence de la méthode native ne fera qu'améliorer les performances pour les navigateurs qui supporteront ces méthodes, donc ces nouveautés amélioreront ton code même si tu utilises uniquement jQuery.
    C'est déjà ce qui s'est produit avec querySelectorAll() par exemple.

    Donc les améliorations du langage ont un impact sur tout le monde y compris ceux qui "croient" ne pas les utiliser.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre actif Avatar de CapFlow
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2011
    Messages : 72
    Points : 219
    Points
    219
    Par défaut
    Cela je l'ai bien compris (et d'ailleurs merci jQuery pour querySelector(All) :p ), mais ce qui est embêtant c'est que justement, on fait évoluer le langage et c'est super, je ne demande que ça, mais à côté il y a toujours les navigateurs pas à jour et les donc problèmes de support.
    J'aime bien utiliser simplement une propriété-méthode sans devoir toujours rajouter quelque chose pour que ce soit compatible.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 423
    Points
    91 423
    Billets dans le blog
    20
    Par défaut
    Je te rassure : on aimerait tous ça !
    Mais ce n'est malheureusement pas vraiment possible avec JavaScript bien que les éditeurs de navigateurs (y compris IE ) ont fait des efforts de compatibilité.
    Seulement, lorsque le langage évolue, il faut tenir compte du temps que cela prend à implémenter et que les utilisateurs ne mettent pas forcément leur navigateur à jour. Or il est difficile de reprocher à un navigateur de ne pas être compatible avec les évolutions ultérieures à sa sortie !

    Ensuite, les bibliothèques comme jQuery permettent effectivement de se faciliter le travail et c'est tant mieux, mais cela ne veut pas dire non plus que jQuery (ou autre) doit être systématiquement utilisé, dans beaucoup de cas, ça alourdi inutilement la page.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/05/2010, 04h35
  2. Problème pour lister des fichiers dans une interface
    Par sapristy dans le forum GTK+ avec C & C++
    Réponses: 2
    Dernier message: 23/02/2010, 15h00
  3. utilisation des structures dans une interface
    Par ralf91 dans le forum C#
    Réponses: 5
    Dernier message: 22/01/2010, 17h55
  4. Création des animation dans l'interface
    Par usto2005 dans le forum Interfaces Graphiques
    Réponses: 4
    Dernier message: 06/05/2008, 15h14
  5. Intégrer des programmes dans une interface graphique avec GUIDE
    Par maserati222e dans le forum Interfaces Graphiques
    Réponses: 3
    Dernier message: 24/05/2007, 12h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo