一键转贴Chrome扩展开发经验总结6:window.document的DOM操作-出家如初,成佛有余

一键转贴Chrome扩展开发经验总结6:window.document的DOM操作

技术 admin 410浏览 0评论

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

转载请注明:出家如初,成佛有余 » 一键转贴Chrome扩展开发经验总结6:window.document的DOM操作

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址