Discussion :

[Beginner.]

Salut,

Cette fonction est notamment utile pour supprimer la surbrillance des mots trouvés, dans ce code : http://jsbin.com/lapikifose/edit?js,output j'ai testé trois fonctions "removeHightlight"...

Le plus souvent pour la fonction unwrap() en JS pure je vois ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function unwrap0(elm) {
    var parent = elm.parentNode;
    while (elm.firstChild) {
        parent.insertBefore(elm.firstChild, elm);
    }
    parent.removeChild(elm);
}

Mais que pensez-vous de celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function unwrap1(elm) {
    elm.outerHTML = elm.innerHTML;
}

Je crois que ce n'est pas bien vu mais pourtant elle est plus courte et je crois plus rapide, non ?

De plus pour la fonction removeHightlight1() il faut rajouter la fonction normalize() pour retrouver le DOM comme il était avant la surbrillance (joindre les nodetexts qui ont été divisés) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function removeHightlight1() {
 
  var hightlightSpanTab = document.getElementsByClassName("hightlightClass");
 
  while (hightlightSpanTab.length) {
    var parent = hightlightSpanTab[0].parentNode;
    while (hightlightSpanTab[0].firstChild) {
      parent.insertBefore(hightlightSpanTab[0].firstChild, hightlightSpanTab[0]);
    }
    parent.removeChild(hightlightSpanTab[0]);
    parent.normalize();
  }
}

Mais j'ai remarqué qu'on en avait pas besoin quand on utilise la fonction unwrap1(elm) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeHightlight2() {
 
  var hightlightSpanTab = document.getElementsByClassName("hightlightClass");
 
  while (hightlightSpanTab.length) {
    hightlightSpanTab[0].outerHTML = hightlightSpanTab[0].innerHTML;
  }
}

Ce qui est encore un avantage, non ?

Alors trouvez-vous des inconvénients à cette fonction ?
Merci.

[NoSmoking]

Bonjour,

Je crois que ce n'est pas bien vu mais pourtant elle est plus courte et je crois plus rapide, non ?

Personnellement quand je crées avec les méthodes DOM, createElement par exemple, je détruis en utilisant les méthodes DOM donc point de outerHTML = innerHTML, c'est une question de « cohérence ».

On sait que dans certains cas l'utilisation de innerHTML peut engendrer des dysfonctionnements.

Pour test et pour ce rendre compte des effets de bord : http://www.developpez.net/forums/d97...l/#post5463783. (il serait intéressant de vérifier si le problème subsiste avec les IE « modernes »)

Quant à la vitesse elle va dépendre du navigateur et de sa version donc sauf à faire des essais poucés je préfére ne pas me prononcer sachant que, hors cas à traiter de grande quantité, la différence ne sera pas visible.

De plus pour la fonction removeHightlight1() il faut rajouter la fonction normalize() pour retrouver le DOM comme il était avant la surbrillance (joindre les nodetexts qui ont été divisés) :

Encore une fois cela va dépendre du navigateur, un test rapide montre que sous FireFox il y aurait lieu également d'appliquer un normalize() avec la méthode innerHTML.

Fichier de test
HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div>
  <mark id="first">Black</mark> & white <span>« first »</span>
</div>
<div>
  <mark id="second">Black</mark> & white <span>« second »</span>
</div>

SCRIPT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function unWrap(elm) {
  var parent = elm.parentNode;
  while (elm.firstChild) {
    parent.insertBefore(elm.firstChild, elm);
  }
  parent.removeChild(elm);
}
 
var oElem;
var oParent;
 
oElem = document.querySelector('#first');
oParent = oElem.parentNode;
oElem.outerHTML = oElem.innerHTML;
console.log('1st innerHTML : ', oParent.childNodes);
 
oElem = document.querySelector('#second');
oParent = oElem.parentNode;
unWrap(oElem);
console.log('2nd unWrap : ', oParent.childNodes);

[Beginner.]

Salut,

Merci. Ok donc il vaudrait mieux ne pas mélanger l'usage de innerHTML avec certaines fonctions...

Et pour la fonction normalize() j'ai testé ton code (http://jsbin.com/cozurejivo/edit?html,js,console,output) et effectivement cela dépend du navigateur.

[NoSmoking]

Ok donc il vaudrait mieux ne pas mélanger l'usage de innerHTML avec certaines fonctions...

je ne suis pas aussi catégorique, je dis simplement que « c'est une question de cohérence ».

[Beginner.]

Ok merci c'est noté.

Il est vrai que dans certains cas c'est vraiment pratique...