上一篇《一键转贴Chrome扩展开发经验总结5：网页图片资源的提取》对网页图片资源的提取涉及的标签做了总结，继续就图片资源提取的DOM操作进行总结。
首先说一下最基础的window.document的DOM操作。
1、document的构建
如果是直接从当前页面提取图片资源相对简单。
当前页面可以用window.document来获取，因此可以直接用document.querySelectorAll来获取需要提取的标签元素，例如：
document.querySelectorAll("img, input,button,iframe,source,svg,object,embed");
let imagesFromTags = [];
for (let element of elements) {
}
但如果要操作的对象不是当前页面，只是当前页面的部分内容（例如用户右键选中的内容），或者一段html文本内容，怎样对通过DOM操作对文本内容进行操作呢？
问题的本质就是：怎样根据一段文本内容构建出document或添加到已有的document，这样就可以使用document的DOM方法。
总体上可以分为两大类：
第一大类：构建新的document，对新的document进行操作
方法1：innerHTML方法
let content="<div>just for fun</div>";
let myDocument = document.implementation.createHTMLDocument("");
myDocument.documentElement.innerHTML = content;
方法2：open/write/close操作
let content="<div>just for fun</div>";
let myDocument = document.implementation.createHTMLDocument("");
myDocument.open();
myDocument.write(content);
myDocument.close();
方法3：appendChild方法
let content="<div>just for fun</div>";
let myDocument = document.implementation.createHTMLDocument('');
let div = myDocument.createElement('div');
div.innerHTML = content;
myDocument.body.appendChild(div);
除了 document.implementation.createHTMLDocument外，还可以通过document.cloneNode来获得新的document，对新document的增删改操作不影响window.document。
第二大类方法：沿用已有的document，将内容添加到window.document中
let content="<div>just for fun</div>";
let div = document.createElement('div');
p.innerHTML = content;
document.body.appendChild(div);
什么时候创建新的document或使用现有window.document？
最基本的原则是：如果不想影响现有的document，则采用document.implementation.createHTMLDocument 或document.cloneNode方法创建新的document 。
值得强调的是：在某些场合，如果需要使用继承于window的一些方法，典型例子为要使用 window.getComputedStyle，则只能appendChild到window.document的方法。
如果通过document.implementation.createHTMLDocument 构建的document，对新document的element调用window.getComputedStyle(element)并不能获取到对应element的style。
解决办法：将内容appendChild到window.document上，而不是采用 document.implementation.createHTMLDocument