Although you can now natively parse HTML using DOMParser and XMLHttpRequest, this is a new feature that is not yet supported by all browsers in use in the wild. The code snippets on this page will let your site work until these new features are more widely available.

Safely parsing simple HTML to DOM

When using XMLHttpRequest to get the HTML of a remote webpage, it is often advantageous to turn that HTML string into DOM for easier manipulation. However, there are potential dangers involved in injecting remote content in a privileged context in your extension, so it can be desirable to parse the HTML safely.

The function below will safely parse simple HTML and return a DOM object which can be manipulated like web page elements. This will remove tags like <script>, <style>, <head>, <body>, <title>, and <iframe>. It will also remove all JavaScript, including element attributes that contain JavaScript.

function HTMLParser(aHTMLString){

  var html = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", null),

    body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");

    html.documentElement.appendChild(body);

    body.appendChild(Components.classes["@mozilla.org/feed-unescapehtml;1"].getService(Components.interfaces.nsIScriptableUnescapeHTML).parseFragment(aHTMLString, false, null, body));

  return body;

},

It works by creating a content-level (this is safer than chrome-level) <div> in the current page, then parsing the HTML fragment and attaching that fragment to the <div>. The <div> is returned, and it is never actually appended to the current page. The returned <body> object is of type Element

Here is a sample that counts the number of paragraphs in a string:

var DOMPars = HTMLParser('<p>foo</p><p>bar</p>');

alert(DOMPars.getElementsByTagName('p').length);

If method HTMLParser() returns variable html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this:

var DOMPars = HTMLParser("<div id='userInfo'>John was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>");

alert(DOMPars.getElementById('userInfo').innerHTML);

To parse a complete HTML page, load it into an iframe whose type is content (not chrome). See Using a hidden iframe element to parse HTML to a window's DOM below.

Parsing Complete HTML to DOM

Loading an html document seems much more simpler if its loaded using the XMLHttpRequest object. For that matter we are going to load our HTML document first:

var request = XMLHttpRequest();

request.open("GET", "http://example.org/file.html", false);

request.send(null);

our next step is to create the DOM that we need to feed our newly gathered html information:

var doc = document.implementation.createHTMLDocument("example");

doc.documentElement.innerHTML = request.responseText;

after this any manipulation that we might want to do will be something as simple as the following:

doc.body.textContent = "This is inside the body!";

Using a hidden iframe element to parse HTML to a window's DOM

Sample code may need more work. Create your own function using unique name, ID, and so forth.

var frame = document.getElementById("sample-frame");

if (!frame) {

    // create frame

        frame = document.createElement("iframe"); // iframe (or browser on older Firefox)

        frame.setAttribute("id", "sample-frame");

        frame.setAttribute("name", "sample-frame");

        frame.setAttribute("type", "content");

        frame.setAttribute("collapsed", "true");

        document.getElementById("main-window").appendChild(frame);

        // or

            // document.documentElement.appendChild(frame);

    // set restrictions as needed

        frame.webNavigation.allowAuth = false;

        frame.webNavigation.allowImages = false;

        frame.webNavigation.allowJavascript = false;

        frame.webNavigation.allowMetaRedirects = true;

        frame.webNavigation.allowPlugins = false;

        frame.webNavigation.allowSubframes = false;

    // listen for load

        frame.addEventListener("load", function (event) {

          // the document of the HTML in the DOM

            var doc = event.originalTarget;

          // skip blank page or frame

            if (doc.location.href == "about:blank" || doc.defaultView.frameElement) return;

          // do something with the DOM of doc

              alert(doc.location.href);

          // when done remove frame or set location "about:blank"

          setTimeout(function (){

             var frame = document.getElementById("sample-frame");

             // remove frame

             // frame.destroy(); // if using browser element instead of iframe

             frame.parentNode.removeChild(frame);

             // or set location "about:blank"

             // frame.contentDocument.location.href = "about:blank";

           },10);

        }, true);

} 

// load a page

   frame.contentDocument.location.href = "http://www.mozilla.org/";

// or

// frame.webNavigation.loadURI("http://www.mozilla.org/",Components.interfaces.nsIWebNavigation,null,null,null);

If you are starting with an HTML string, you can convert it to a data URI and use that to load in the browser element.

Using a hidden XUL iframe (alternate example)

Sometimes, a browser element is overkill, or does not meet your needs, or you can't fulfill its requirements. While working on Donkeyfire, I discovered the iframe XUL element, and it is very easy to implement it.

As an example, I will show a browser overlay .xul file, and some JavaScript code to access it.

Here is some XUL code you can add to your browser overlay .xul file. Don't forget to modify the id and name!

<vbox hidden="false" height="0">

  <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/>

</vbox>

Then, in your extension's "load" event handler:

onLoad: function() {

    donkeybrowser = document.getElementById("donkey-browser");

    if (donkeybrowser) {

        donkeybrowser.style.height = "0px";

        donkeybrowser.webNavigation.allowAuth = true;

        donkeybrowser.webNavigation.allowImages = false;

        donkeybrowser.webNavigation.allowJavascript = false;

        donkeybrowser.webNavigation.allowMetaRedirects = true;

        donkeybrowser.webNavigation.allowPlugins = false;

        donkeybrowser.webNavigation.allowSubframes = false;

        donkeybrowser.addEventListener("DOMContentLoaded", function (e) { donkeyfire.donkeybrowser_onPageLoad(e); }, true);

    }

With that code, we obtain a reference to the iframe element we declared in the .xul file. The most interesting piece of code here is the DOMContentLoaded event listener we define for the element. Let's take a look at the donkeyfire.donkeybrowser_onPageLoad() handler:

donkeybrowser_onPageLoad: function(aEvent) {

    var doc = aEvent.originalTarget;

    var url = doc.location.href;

    if (aEvent.originalTarget.nodeName == "#document") { // ok, it's a real page, let's do our magic

        dump("[DF] URL = "+url+"\n");

        var text = doc.evaluate("/html/body/h1",doc,null,XPathResult.STRING_TYPE,null).stringValue;

        dump("[DF] TEXT in /html/body/h1 = "+text+"\n");

    }

},

As you can see, we obtain full access to the DOM of the page we loaded in background, and we can even evaluate XPath expressions. In the example, we dump() to the console the page's URL and the text contained in the first h1 tag of the page's <body>.

But, we still need to see how to execute the famous loadURI() method using our iframe:

donkeybrowser.webNavigation.loadURI("http://developer.mozilla.org",Components.interfaces.nsIWebNavigation, null, null, null);

Also, I recommend you take a look at the nsIWebNavigation interface.

来自MDNhttps://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM，应该比较完整了。

HTML to DOM的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 【英语】Bingo口语笔记(32) - 口语中的弱读

  2. Linux下ll命令与ls -l

    还大三Linux课的债. 1.ll命令用于显示当前文件下非隐藏文件的详情 查询结果分为7栏: 1)如' -rw-r--r--' 表示三种用户对该文件的不同权限: r:可读:w:可写:x:可执行 其中第 ...

  3. flash wmode参数详解

    在做web开发中可能会遇到flash遮挡页面中元素的情况,无论怎么设置flash容器和层的深度(z-index)也无济于事,现有的解决方案是在插入flash的embed或object标签中加入”wmo ...

  4. linux -- 串口调试总结

    linux 串口输出调试 在某些情况下,需要同时对两台或多台Linux主机进行管理和操作.如果手头缺少足够多的键盘和显示器,那么通过一台机器的串口对其余主机进行控制不失为一种快捷.有效的方法. 下面就 ...

  5. 开发者必须知道的HTML5十五大新特性

    HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  ( ...

  6. vector 释放内存 swap

    相 信大家看到swap这个词都一定不会感到陌生,甚至会有这样想法:这不就是简单的元素交换嘛.的确,swap交换函数是仅次于Hello word这样老得不能老的词,然而,泛型算法东风,这个小小的玩意儿却 ...

  7. 数往知来 ASP.NET_多线程_Socket<十五>

    一.ASP.NET B/S  做网站(动态).管理系统(OA,进销存等) C/S--窗体软件 为什么现在很少用C/S做进销存等软件 B/S部署方便   C/S要安装 动态:与服务器(IIS(软件))进 ...

  8. JavaScript基础知识整理（1）数组

    第一:创建. 1,var arr= new Array(); //数组为空.长度为0. arr[0]="apple"; arr[1]="orange"; arr ...

  9. httpd.conf 禁止运行PHP和html页面

    <VirtualHost *:80>    ServerName www.test.com    DocumentRoot /var/www/www.test.com    ErrorDo ...

  10. hadoop2.6.0 --- 64位源代码

    今天有朋友在群里找hadoop最新的2.6.0的源代码,其实这个源代码在hadoop的官方网站是有下载的(应该是32位的),还有一个src,不过给的是maven版本,需要自己在机器上编译一下(我的机器 ...