上一篇《一键转贴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