Discussion :

[olysmar2]

Bonjour,

Quand je n'utilise plus un element dans le dom et qu'il n'est plus visible, j'utilise "detach()" pour l'enlever du DOM.
Cela l'enleve du dom mais je peux a tout moment le remettre sans que celui est perdu ces evènement, etc...

Quand je sais qu'un element ne va plus servir, je l'enleve du DOM avec "remove()"

J'aimerais pour voir savoir si un element est dans le DOM ou, s'il n'y est pas, si celui-ci est détaché (detach()) ou enlevé (remove())...

Avec cela

Code :

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

$.contains(document.documentElement, element.get(0))

Je peux savoir si l'élément est dans le DOM ou pas.
Par contre, je ne sais pas s'il est détaché ou enlevé.

Comment faire pour obtenir cette distinction ?

Par avance, Merci
Sylo

[danielhagnoul]

[...] J'aimerais [...] savoir si un element est dans le DOM ou, s'il n'y est pas, si celui-ci est détaché (detach()) ou enlevé (remove()) [...]

Bonjour

C'est possible en utilisant compareDocumentPosition

Exemple à tester

Code HTML :

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

1
2
3
4
5
<div id="haut" class="centeredDiv">
  <div id="interne">
    <p>Bonjour</p>
  </div>
</div>

Code JavaScript :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var divHaut = document.querySelector( "#haut" );
 
// test contains
console.log( "#interne : ", divHaut.contains( document.querySelector( "#interne" ) ) ); // true
 
// test compareDocumentPosition
/*
 * DOCUMENT_POSITION_DISCONNECTED	1
 * DOCUMENT_POSITION_PRECEDING	2
 * DOCUMENT_POSITION_FOLLOWING	4
 * DOCUMENT_POSITION_CONTAINS	8
 * DOCUMENT_POSITION_CONTAINED_BY	16
 * DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32
 */ 
console.log( "#interne : ", divHaut.compareDocumentPosition( document.querySelector( "#interne" ) ) ); // 20 = 16 + 4
 
var ancienNoeud = divHaut.removeChild( document.querySelector( "#interne" ) );
 
console.log( "textContent = ", ancienNoeud.textContent );
 
ancienNoeud.textContent = "Hello !";
 
// test contains
console.log( "ancienNoeud : ", divHaut.contains( ancienNoeud ) ); // false
 
// test compareDocumentPosition
console.log( "ancienNoeud : ", divHaut.compareDocumentPosition( ancienNoeud ) ); // 37 = 32 + 4 + 1
 
divHaut.appendChild( ancienNoeud );
 
// test contains
console.log( "ancienNoeud : ", divHaut.contains( ancienNoeud ) ); // true
 
// test compareDocumentPosition
console.log( "ancienNoeud : ", divHaut.compareDocumentPosition( ancienNoeud ) ); // 20 + 16 + 4
 
setTimeout( function(){
  divHaut.removeChild( document.querySelector( "#interne" ) );
 
  // test contains
  console.log( divHaut.contains( ancienNoeud ) ); // false
 
  // test compareDocumentPosition
  console.log( divHaut.compareDocumentPosition( ancienNoeud ) ); // 37 = 32 + 4 + 1 parce que ancienNoeud existe toujours !
 
  ancienNoeud = null;
 
 
  try {
    // test compareDocumentPosition
    // Failed to execute car ancienNoeud n'existe plus
    console.log( divHaut.compareDocumentPosition( ancienNoeud ) );
  }
  catch( er ) {
    console.error( "ancienNoeud : ", er.message );
  }
 
  try {
    // test compareDocumentPosition
    // Failed to execute car document.querySelector( "#interne" ) n'existe plus
    console.log( divHaut.compareDocumentPosition( document.querySelector( "#interne" ) ) );
  }
  catch( er ) {
    console.error( 'document.querySelector( "#interne" ) : ', er.message );
  }
 
}, 5000 )

[Watilin]

Je prends le risque d’enfoncer des portes ouvertes… As-tu pensé à vérifier que son parentElement n’est pas null ?