克隆节点上的DOM操作

Question

I have a query related to DOM manipulation. I am performing some operations on the DOM nodes in a web page by cloning the entire document node and then performing the operations on the cloned copy.

One particular operation that I am performing on the DOM is changing the 'src' attribute of the 'img' tags. When I do that, I see a 404 error (404 (Not Found)) in the console for that page in the browser. The path I am setting is not present but since I am performing the operations on the cloned copy, I assumed that it should not show any error. Am I doing something wrong here? Is there a way to avoid this error from being displayed?

The code snippet is provided below:

//code snippet

var doc = document.documentElement.cloneNode(true);
var allNodes = doc.getElementsByTagName('*');

//for loop to interate through the node

//When an img node is found
node.src = "some_image.png";

Answer 1

From the comments...

I can't see why it should'nt load. Because var img = new Image(); img.src = "aa.png" also loads a image, even though the image is not appended on the DOM. (This approach is often used in HTML5 Canvas usages)

Even though the image is added to the path after the src is defined, the image will not be found, because the browser will only send 1 request for the file.