HTML to DOM

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的更多相关文章

关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
重撸js_2_基础dom操作
1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM
窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...
jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作看 ...

随机推荐

文件IO一些注意的地方
两个各自独立的进程各自打开同一个文件,则每个进程都有各自的文件表项.这是因为每个进程都有它自己对该文件的当前偏移量.但是对一个给定的文件只有一个v节点表项.lseek()只修改文件表项中的当前文件偏移 ...
ETL工具的评价
评价项目评价结果备注支持平台 SUN Solaris.HP-UX.IBM AIX.AS/400.OS/390.Sco UNIX.Linux.Windows 支持数据源 DB2.Informix ...
MySQL基础之第18章性能优化
18.1.优化简介 SHOW STATUS LIKE ‘value’;connections 连接数uptime 启动 ...
小结JS中的OOP（中）
此篇文章主要是提炼<JavaScript高级程序设计>中第六章的一些内容. 一:JS中OOP相关的概念开始之前先总结JS中OOP相关的一些概念: 构造函数:JS中的构造函数就是普通的函数 ...
Textbox像百度一下实现下拉显示 z
List<string> Data = new List<string>(); string Randomstr = "功夫撒黑胡椒hcbvf蜂窝qwertyuiop ...
hdu 1527 取石子游戏（Wythoff Game）
题意:Wythoff Game 思路:Wythoff Game #include<iostream> #include<stdio.h> #include<math.h& ...
Storage Keepers
题意: n个仓库,m个人申请看管仓库,一个人可以看管多个仓库,一个仓库只能被一个人看管,每个人都有一个能力值,他看管的仓库的安全度U是能力值/看管仓库数,安全线L是U中的最小值,有多少能力公司发多少工 ...
java PO、BO
PO(persistent object) 持久对象在o/r映射的时候出现的概念,如果没有o/r映射,那么这个概念也就不存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数 ...
CentOS7 安装 scala 2.11.1
wget http://downloads.typesafe.com/scala/2.11.6/scala-2.11.6.tgz?_ga=1.61986863.2013247204.144801902 ...
黑马程序员——OC的内存管理学习小结
内存管理在Objective-C中的重要性就像指针在C语言中的重要程序一样. 虽然作为一门高级语言,但OC却没有内存回收机制.这就需要开发者来对动态内存进行管理.OC中内存管理的范围是:任何继承了NS ...