Quiero eliminar todos los elementos de la página excepto los elementos que quiero. Estoy usando la consola de elementos de inspección de Chrome.
Así que estoy pensando en este método:
documento.cuerpo.innerHTML = textos.innerHTML;
Probé el código a continuación, pero solo agrega el primer elemento de textos a body.innerHTML.
var texts = document.getElementsByClassName('HoXoMd D1wxyf G4EHhc'); for(let text of texts){ document.body.innerHTML = text.innerHTML; }Probé el código a continuación, se agrega pero no cambió el sitio web, solo se agrega en la consola cuando lo imprime:
var texts = document.getElementsByClassName('HoXoMd D1wxyf G4EHhc'); for(let text of texts){ document.body.innerHTML += text.innerHTML; }soy nuevo en javascript gracias
innerHTML rara vez es una buena herramienta para modificar documentos existentes. Además, la modificación del documento durante la iteración de una colección en vivo puede producir resultados inesperados.
Puede recopilar todos los elementos excepto los deseados y luego eliminarlos del documento, así:
const texts = document.body.querySelectorAll('*:not(.HoXoMd.D1wxyf.G4EHhc)'); for (let text of texts) { text.remove(); } <p>Paragraph 1</p> <p class="HoXoMd D1wxyf G4EHhc">Remains 1</p> <p class="HoXoMd D1wxyf G4EHhc">Remains 2</p> <p class="HoXoMd D1wxyf G4EHhc">Remains 3</p> <p class="HoXoMd">Paragraph 2</p> El selector universal * recopila todos los elementos en document.body , :not pseudo-class excluye los elementos que coinciden con el selector pasado a :not . El NodeList element.querySelectorAll devuelve es estático, y puede eliminar elementos en un bucle sin tener el desorden que causaría una lista en vivo.
Es notable que usar element.querySelectorAll es crucial, si usó document.querySelectorAll , todos los elementos del documento se eliminarán, incluidos head y body , y no quedará nada en la página.
Su segundo fragmento de código está bien, solo le falta una cosa: debe borrar todo el html después de seleccionar los elementos que desea conservar y luego comenzar a agregarlos nuevamente a su DOM.
// use querySelectorAll instead var texts = document.querySelectorAll('.keep'); // clear all html document.body.innerHTML = ''; // <- // add all the html you want back to the dom for (const text of texts) document.body.appendChild(text) <div class="keep">keep this</div> <div>don't care about this</div> <div>don't care about this</div> <div class="keep">keep this too</div> <div>don't care about this</div> <div class="keep">keep this also</div> puedes cambiar .keep con la clase que quieras.