danielhagnoul

Comment savoir si un élément qui n'est plus dans le DOM est détaché ou enlevé ?

Noter ce billet

0 Commentaires

par

danielhagnoul

, 09/12/2016 à 16h45 (1914 Affichages)

C'est possible en utilisant compareDocumentPosition

Exemple :

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 )

Ajout du 2016-12-12

La fonction kNodePosition (incluse dans le fichier dvjhUtilities-1.3.3.js) détermine si un node est attaché au node parent, détaché du node parent ou supprimé du document.

Exemple :

Code HTML :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
  <style>
    footer {
      margin-top: 2.4rem;
    }
    button {
      margin: 1.2rem;
    }
 
  </style>
  <script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
    
    let
      domLoadedHandler = ev => {
        klog( `DOM ready   : ${ new kDvjhDate() }` );
 
      },
      windowLoadHandler = ev => {
        klog( `Window load : ${ new kDvjhDate() }` );
        
        const kNodePosition = ( nodeParent = document.querySelector( "body"), node = document.querySelector( "main") ) => {
          /*
           * Cette fonction détermine si un node est
           * attaché (attached) au node parent,
           * détaché (detached) du node parent ou
           * supprimer (removed) du document
           */ 
          try {
            let n = nodeParent.compareDocumentPosition( node );
              
            if ( n % 2 === 0 ){
              return "attached";
            } else {
              return "detached";
            }
          }
          catch( er ){
            return "removed";
          }
        };
        
        let divHaut = document.querySelector( "#haut" );
          
        klog( kNodePosition( divHaut, document.querySelector( "#interne" ) ) );
        
        let ancienNoeud = divHaut.removeChild( document.querySelector( "#interne" ) );
          
        klog( kNodePosition( divHaut, ancienNoeud ) );
        
        ancienNoeud = null;
        
        klog( kNodePosition( divHaut, ancienNoeud ) );
          
        kIDUnique();
      };
      
    kAddListener( [
      [ document, "DOMContentLoaded", domLoadedHandler ],
      [ window, "load", windowLoadHandler ]
    ] );
  </script>
</head>
<body>
  <main>
 
    <div id="haut" class="centeredDiv">
      <div id="interne">
        <p>Bonjour</p>
      </div>
    </div> 
 
  </main>
  <footer>
    <section class="qunit">
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>
    </section>
  </footer>
</body>
</html>