1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
---
title: DOMParser
slug: Web/API/DOMParser
tags:
- DOMParser SVG XML
translation_of: Web/API/DOMParser
---
<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
<p><code>DOMParser可以將XML或是HTML格式的字串轉成</code>DOM <a href="/en-US/docs/DOM/document">文件</a>. <code>DOMParser</code>的規格請參閱<a href="http://html5.org/specs/dom-parsing.html">DOM解譯與串流化</a>.</p>
<p>請注意<a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a>解譯的是URL連結內容裡的XML與HTML文件.</p>
<h2 id="產生一個_DOMParser">產生一個 DOMParser</h2>
<p>" <code>new DOMParser()" 可產生DOMParser</code>.</p>
<p><code>關於如何在Firefox外掛程式中產生DOMParser,</code>請參考<code><a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser">nsIDOMParser</a>文件</code></p>
<h2 id="解譯_XML">解譯 XML</h2>
<p>產生解譯物件後，請呼叫<code>parseFromString方法函式來將XML字串轉換成DOM物件</code>:</p>
<pre class="brush: js">var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
</pre>
<h3 id="Error_handling" name="Error_handling">錯誤處理</h3>
<p>請注意如果解譯過程出錯,目前的<code>DOMParser不會丟出異常物件(exception)，但是會回傳一個錯誤文件</code>(請看程式臭蟲{{Bug(45566)}}):</p>
<pre class="brush:xml"><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(error description)
<sourcetext>(a snippet of the source XML)</sourcetext>
</parsererror>
</pre>
<p>解譯錯誤也會記錄在錯誤終端機中（<a href="/en-US/docs/Error_Console" title="Error Console">Error Console</a>）, 紀錄裡頭的文件URI (如下) 則為錯誤來源.</p>
<h2 id="解譯_SVG_或_HTML_文件">解譯 SVG 或 HTML 文件</h2>
<p><code>DOMParser也可以用來解譯 </code>SVG 文件 {{geckoRelease("10.0")}} 或是 HTML 文件 {{geckoRelease("12.0")}}. 可以依 MIME 格式，輸出三種不同格式. 如果MIME 格式是 <code>text/xml</code>,輸出的格式為 <code>XMLDocument</code>, 如果 MIME 格式是 <code>image/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 id="其他瀏覽器可用的DOMParser_HTML_外掛程式">其他瀏覽器可用的DOMParser HTML 外掛程式</h3>
<pre class="brush: js">/*
* DOMParser HTML extension
* 2012-09-04
*
* 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
proto = DOMParser.prototype
, nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>
;
// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser()).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}
<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var
doc = document.implementation.createHTMLDocument("")
;
if (markup.toLowerCase().indexOf('<!doctype') > -1) {
doc.documentElement.innerHTML = markup;
}
else {
doc.body.innerHTML = markup;
}
return doc;
} else {
return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
}
};
}(DOMParser));
</pre>
<h3 id="DOMParser_from_ChromeJSMXPCOMPrivileged_Scope">DOMParser from Chrome/JSM/XPCOM/Privileged Scope</h3>
<p>See article here: <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p>
<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
<div>{{CompatibilityTable}}</div>
<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>{{CompatChrome(1)}}</td>
<td>{{CompatGeckoDesktop(1)}}</td>
<td>{{CompatIE(9)}}</td>
<td>{{CompatOpera(8)}}</td>
<td>{{CompatSafari(3.2)}}</td>
</tr>
<tr>
<td>SVG support</td>
<td>{{CompatChrome(4)}}</td>
<td>{{CompatGeckoDesktop(10.0)}}</td>
<td>{{CompatIE(10)}}</td>
<td>{{CompatOpera(15)}}</td>
<td>{{CompatSafari(3.2)}}</td>
</tr>
<tr>
<td>HTML support</td>
<td>{{CompatChrome(30)}}</td>
<td>{{CompatGeckoDesktop(12.0)}}</td>
<td>{{CompatIE(10)}}</td>
<td>{{CompatOpera(17)}}</td>
<td>{{CompatSafari(7.1)}}</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.0)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>HTML support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile(12.0)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">參考資料</h2>
<ul>
<li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
<li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
<li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
<li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
</ul>
|
