Comment savoir si un élément qui n'est plus dans le DOM est détaché ou enlevé ?
par
, 09/12/2016 à 16h45 (1927 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>