Tengo problemas con getElementsByClassName contra un objeto creado a través de createHTMLDocument. Antes de probar createHTMLDocument, tenía createElement('div') y esto funcionó bien, pero no cuando createHTMLDocument
setTimeout(function() { console.log('Starting...'); //var copy = document.createElement('div'); var copy = document.implementation.createHTMLDocument('virtual'); copy.innerHTML = document.getElementById('test').innerHTML; //console.log(copy.innerHTML); var r = copy.getElementsByClassName('removeOnSave'); console.log('seen ' + r.length); for (var i = r.length - 1; i >= 0; i--) r[i].parentNode.removeChild(r[i]); var contentsTx = copy.innerHTML; document.getElementById('output').value = contentsTx; }, 1000); <h3>Load HTML from some content while trying not to trigger network calls</h3> <div id="test"> Lorem ipsum <img src="https://cdn.speakerscorner.co.uk/files/media/public/image/richard-ayoade-xsq.jpg"> Lorem ipsum <div class="removeOnSave">REMOVE ME</div> </div> <textarea id="output" style="width:100%; height:200px"></textarea>(También hay disponible un demostrador de JSFiddle en https://jsfiddle.net/Abeeee/deg3846s/10/ )
¿Dónde me estoy equivocando?
El problema es que usted colocó innerHTML en el cuerpo del documento recién creado, es decir, copy.body.innerHTML = document.getElementById('test').innerHTML; . Creo que puedes explicarte por qué, así que no lo explicaré en detalle.
setTimeout(function() { console.log('Starting...'); //var copy = document.createElement('div'); var copy = document.implementation.createHTMLDocument('virtual'); copy.body.innerHTML = document.getElementById('test').innerHTML; //console.log(copy.innerHTML); var r = copy.getElementsByClassName('removeOnSave'); console.log('seen ' + r.length); for (var i = r.length - 1; i >= 0; i--) r[i].parentNode.removeChild(r[i]); var contentsTx = copy.body.innerHTML; console.log('contentsTx=',contentsTx ); document.getElementById('output').value = contentsTx; }, 1000); <h3>Load HTML from some content while trying not to trigger network calls</h3> <div id="test"> Lorem ipsum <img src="https://cdn.speakerscorner.co.uk/files/media/public/image/richard-ayoade-xsq.jpg"> Lorem ipsum <div class="removeOnSave">REMOVE ME</div> </div> <textarea id="output" style="width:100%; height:200px"></textarea>