Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Post History
At the documetation you linked, if you click on "which will clear the document", it'll go to the documentation for document.open, and that page says in the beginning: All existing nodes are remo...
Answer
#2: Post edited
by
hkotsubo
·
2021-11-26T12:33:13Z (almost 3 years ago)
- At the documetation you linked, if you click on "_which will clear the document_", it'll go to the [documentation for `document.open`](https://developer.mozilla.org/en-US/docs/Web/API/Document/open#notes), and that page says in the beginning:
- > All existing nodes are removed from the document.
And once removed, you can't retrieve them. An alternative is to make a copy of the original document before deleting it:- ```javascript
- // copy document
- var originalDocument = document.cloneNode(true);
- // this removes all document's nodes
- document.write('abc');
- // but you can restore the original document (not sure if everything will work, such as scripts and event handlers)
- document.documentElement.replaceChildren(originalDocument.documentElement);
- ```
- By using [`cloneNode(true)`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode), I create a deep copy of the entire document (`true` indicates that I want to clone not only the `document`, but also all its descendants). So I'll have an entire copy of the DOM tree.
- In the example above I show how to restore the original document (but I'm not sure if all JavaScript and event handlers will be kept and work properly). But you can actually do anything you want with it (such as use `originalDocument.querySelector` to search for a specific node, access `originalDocument.body`, etc).
- At the documetation you linked, if you click on "_which will clear the document_", it'll go to the [documentation for `document.open`](https://developer.mozilla.org/en-US/docs/Web/API/Document/open#notes), and that page says in the beginning:
- > All existing nodes are removed from the document.
- And once removed, you can't retrieve them.
- Making a test in this page, this prints a `NodeList` with lots of elements:
- ```javascript
- console.log(document.body.childNodes);
- ```
- But after doing `document.write('abc')`, the `document.body.childNodes` will have only one element, which is the text node containing "abc".
- All the original document's child nodes were lost and can't be retrieved from the document anymore.
- ---
- A way to avoid losing the original DOM tree is to make a copy of the document before deleting it:
- ```javascript
- // copy document
- var originalDocument = document.cloneNode(true);
- // this removes all document's nodes
- document.write('abc');
- // but you can restore the original document (not sure if everything will work, such as scripts and event handlers)
- document.documentElement.replaceChildren(originalDocument.documentElement);
- ```
- By using [`cloneNode(true)`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode), I create a deep copy of the entire document (`true` indicates that I want to clone not only the `document`, but also all its descendants). So I'll have an entire copy of the DOM tree.
- In the example above I show how to restore the original document (but I'm not sure if all JavaScript and event handlers will be kept and work properly). But you can actually do anything you want with it (such as use `originalDocument.querySelector` to search for a specific node, access `originalDocument.body`, etc).
#1: Initial revision
by
hkotsubo
·
2021-11-26T12:07:06Z (almost 3 years ago)
At the documetation you linked, if you click on "_which will clear the document_", it'll go to the [documentation for `document.open`](https://developer.mozilla.org/en-US/docs/Web/API/Document/open#notes), and that page says in the beginning:
> All existing nodes are removed from the document.
And once removed, you can't retrieve them. An alternative is to make a copy of the original document before deleting it:
```javascript
// copy document
var originalDocument = document.cloneNode(true);
// this removes all document's nodes
document.write('abc');
// but you can restore the original document (not sure if everything will work, such as scripts and event handlers)
document.documentElement.replaceChildren(originalDocument.documentElement);
```
By using [`cloneNode(true)`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode), I create a deep copy of the entire document (`true` indicates that I want to clone not only the `document`, but also all its descendants). So I'll have an entire copy of the DOM tree.
In the example above I show how to restore the original document (but I'm not sure if all JavaScript and event handlers will be kept and work properly). But you can actually do anything you want with it (such as use `originalDocument.querySelector` to search for a specific node, access `originalDocument.body`, etc).