DOMParser

  • 版本网址缩略名: DOM/DOMParser
  • 版本标题: DOMParser
  • 版本 id: 37364
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论 2 words added, 2 words removed

修订内容

DOMParser 可以将字符串形式的XML或HTML源代码解析成为一个 DOM文档. DOMParser的HTML5规范在 DOM解析和序列化.

另外, XMLHttpRequest 也已经支持了将XML和HTML格式的URL资源解析为DOM文档(以前仅支持XML).

创建一个DOMParser

创建一个 DOMParser 对象可以使用new DOMParser().

如何在Firefox扩展中创建DOMParser,请参考文档 nsIDOMParser.

解析 XML

一旦建立了一个解析对象以后,你就可以使用它的parseFromString方法来解析一个XML字符串:

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

错误处理

如果解析失败, DOMParser 不会抛出任何异常, 只会返回一个给定的错误文档 (查看 {{ Bug("45566") }}):

<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(error description)
<sourcetext>(a snippet of the source XML)</sourcetext>
</parsererror>

解析错误会显示在 错误控制台,包括文档的地址和错误的源代码.

解析SVG或者HTML文档

DOMParser也可以用来解析一个SVG文档{{ geckoRelease("10.0") }} 或者HTML文档 {{ geckoRelease("12.0") }}. 根据给定的MIME类型不同,parseFromString方法可能返回三种不同类型的文档.如果MIME类型是 text/xml, 则返回一个XMLDocument, 如果MIME类型是 text/svg+xml,则返回一个 SVGDocument, 如果MIME类型是 text/html, 则返回一个HTMLDocument.

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.

兼容其他浏览器的HTML DOMParser

/*
 * DOMParser HTML extension
 * 2012-02-02
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // 如果原生支持text/html解析,则退出
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            , doc_elt = doc.documentElement
            , first_elt
            ;

            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;

            if ( // 判断当前处理的是一个完整的文档还是文档碎片?
                   doc_elt.childElementCount === 1
                && first_elt.localName.toLowerCase() === "html"
            ) {
                doc.replaceChild(first_elt, doc_elt);
            }

            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
XML support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
SVG support {{ CompatUnknown() }} {{ CompatGeckoDesktop("10") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
HTML support {{ CompatUnknown() }} {{ CompatGeckoDesktop("12") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
XML support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }}
SVG support {{ CompatUnknown() }} {{ CompatGeckoMobile("10") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
HTML support {{ CompatUnknown() }} {{ CompatGeckoMobile("12") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

相关链接

{{ languages( { "fr": "fr/DOMParser", "ja": "ja/DOMParser" , "en": "en/DOM/DOMParser" } ) }}

修订版来源

<p><code>DOMParser</code> 可以将字符串形式的XML或HTML源代码解析成为一个 DOM<a href="/zh-cn/DOM/document" title="document">文档</a>. <code>DOMParser</code>的HTML5规范在 <a class="external" href="http://html5.org/specs/dom-parsing.html" title="http://html5.org/specs/dom-parsing.html">DOM解析和序列化</a>.</p>
<p>另外, <a href="/zh-cn/HTML_in_XMLHttpRequest" title="zh-cn/HTML_in_XMLHttpRequest">XMLHttpRequest</a> 也已经支持了将XML和HTML格式的URL资源解析为DOM文档(以前仅支持XML).</p>
<h2>创建一个DOMParser</h2>
<p>创建一个 <code>DOMParser</code> 对象可以使用<code>new DOMParser()</code>.</p>
<p>如何在<code>Firefox扩展中创建DOMParser</code>,请参考文档 <a href="/zh-cn/nsIDOMParser" title="zh-cn/nsIDOMParser"><code>nsIDOMParser</code></a>.</p>
<h2>解析 XML</h2>
<p>一旦建立了一个解析对象以后,你就可以使用它的<code>parseFromString</code>方法来解析一个XML字符串:</p>
<pre class="brush: js">var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
</pre>
<h3 name="Error_handling">错误处理</h3>
<p>如果解析失败, <code>DOMParser</code> 不会抛出任何异常, 只会返回一个给定的错误文档 (查看 {{ Bug("45566") }}):</p>
<pre class="brush: xml">&lt;parsererror xmlns="<span class="nowiki">http://www.mozilla.org/newlayout/xml/parsererror.xml</span>"&gt;
<em>(error description)</em>
&lt;sourcetext&gt;<em>(a snippet of the source XML)</em>&lt;/sourcetext&gt;
&lt;/parsererror&gt;
</pre>
<p>解析错误会显示在 <a href="/zh-cn/Error_Console" title="zh-cn/Error Console">错误控制台</a>,包括文档的地址和错误的源代码.</p>
<h2>解析SVG或者HTML文档</h2>
<p><code>DOMParser</code>也可以用来解析一个SVG文档{{ geckoRelease("10.0") }} 或者HTML文档 {{ geckoRelease("12.0") }}. 根据给定的MIME类型不同,parseFromString方法可能返回三种不同类型的文档.如果MIME类型是 <code>text/xml</code>, 则返回一个<code>XMLDocument</code>, 如果MIME类型是 <code>text/svg+xml</code>,则返回一个 <code>SVGDocument,</code> 如果MIME类型是 <code>text/html</code>, 则返回一个<code>HTMLDocument</code>.</p>
<pre class="brush: js">var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.
</pre>
<h3>兼容其他浏览器的HTML DOMParser</h3>
<pre class="brush: js">/*
 * DOMParser HTML extension
 * 2012-02-02
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // 如果原生支持text/html解析,则退出
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            , doc_elt = doc.documentElement
            , first_elt
            ;

            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;

            if ( // 判断当前处理的是一个完整的文档还是文档碎片?
                   doc_elt.childElementCount === 1
                &amp;&amp; first_elt.localName.toLowerCase() === "html"
            ) {
                doc.replaceChild(first_elt, doc_elt);
            }

            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));
</pre>
<h2 name="Browser_compatibility">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>XML support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> <tr> <td>SVG support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("10") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>HTML support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("12") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>XML support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>SVG support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("10") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>HTML support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("12") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<p> </p>
<h2 name="See_also">相关链接</h2>
<ul> <li><a href="/zh-cn/Parsing_and_serializing_XML" title="zh-cn/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> <li><a href="/zh-cn/DOM/XMLHttpRequest" title="zh-cn/DOM/XMLHttpRequest">XMLHttpRequest</a></li> <li><a href="/zh-cn/XMLSerializer" title="zh-cn/XMLSerializer">XMLSerializer</a></li> <li><a href="/zh-cn/Parsing_HTML_From_Chrome" title="zh-cn/Parsing HTML From Chrome">Parsing HTML from chrome</a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOMParser", "ja": "ja/DOMParser" , "en": "en/DOM/DOMParser" } ) }}</p>
恢复到这个版本