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
201
202
203
|
---
title: DOMParser
slug: Web/API/DOMParser
translation_of: Web/API/DOMParser
---
<div>{{APIRef("DOM")}}</div>
<p><span class="seoSummary">The <strong><code>DOMParser</code></strong> 인터페이스는 DOM {{domxref("Document")}} 문서에 맞는 {{Glossary("XML")}} 및 {{Glossary("HTML")}} 소스 코드를 해석할 수 있는 기반을 제공한다 .</span></p>
<div class="note">
<p><strong>참고:</strong> {{domxref("XMLHttpRequest")}} 객체로도 인식 가능한 URL 주소로부터 직접 XML 및 HTML 문서를 해석하여 {{domxref("XMLHttpRequest.response", "response")}} 속성을 통해 <code>Document</code> 객체로 제공한다.</p>
</div>
<p>반대로 DOM 구조를 XML 및 HTML 소스 코드로 제공하는 방식은 {{domxref("XMLSerializer")}} 인터페이스를 참고하도록 한다.</p>
<p>HTML 문서의 경우, {{domxref("Element.innerHTML")}} 속성과 {{domxref("Element.outerHTML", "outerHTML")}} 속성을 통해 DOM 구조를 새로운 방식으로 변경할 수 있다. 또한 이들 속성을 통해 HTML 구조의 하위에 있는 HTML 구조도 불러올 수 있다.</p>
<h2 id="문법">문법</h2>
<pre class="syntaxbox notranslate">let <var>domparser</var> = new DOMParser()</pre>
<h2 id="메소드">메소드</h2>
<h3 id="domxrefDOMParser.parseFromString_1">{{domxref("DOMParser.parseFromString()", "", "", "1")}}</h3>
<h4 id="문법_2">문법</h4>
<pre class="syntaxbox notranslate">let <var>doc</var> = domparser.parseFromString(<var>string, <var>mimeType</var>)</var></pre>
<h4 id="반환">반환</h4>
<p> <strong><code><a href="#Argument02">mimeType</a></code></strong> 인자를 통해 정의한 형식에 따른 {{domxref("Document")}} 또는{{domxref("XMLDocument")}} 문서를 반환한다.</p>
<h4 id="인자">인자</h4>
<p>이 메소드에는 2개의 인자가 제공되는데, 모두 필수값이다.</p>
<dl>
<dt><code><var>string</var></code></dt>
<dd>해석할 {{domxref("DOMString")}} 문자열. 반드시 {{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}} 또는 {{Glossary("svg")}} 문서 형식에 맞아야 한다.</dd>
<dt id="Argument02"><code><var>mimeType</var></code></dt>
<dd>
<p>아래 표에 정의한 형식을 반환 값으로 제공할 {{domxref("DOMString")}} 문자열.</p>
<table class="standard-table" style="max-width: 60ch;">
<thead>
<tr>
<th scope="col"><code><var>mimeType</var></code></th>
<th scope="col"><code><var>doc</var>.constructor</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text/html</code></td>
<td><code>{{domxref("Document")}}</code></td>
</tr>
<tr>
<td><code>text/xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>application/xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>application/xhtml+xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>image/svg+xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="XML_해석">XML 해석</h3>
<p>parser 변수를 통해 새로이 해석할 객체를 만들었다면, 이제 <code>parseFromString()</code> 메소드를 통해 XML 문서를 해석할 수 있다.</p>
<pre class="brush: js notranslate">let <var>parser</var> = new DOMParser()
let <var>doc</var> = parser.parseFromString(<var>stringContainingXMLSource</var>, "application/xml")
</pre>
<h4 id="Error_handling" name="Error_handling">오류 대응</h4>
<p>만약 해석에 실패할 경우, <code>DOMParser</code> 객체는 예외를 발생시키지 않고, 아래와 같은 오류 문서를 반환한다.</p>
<pre class="brush:xml notranslate"><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
<var>(영문 오류 내용)</var>
<sourcetext><var>(오류가 발생한 XML 소스 조각)</var></sourcetext>
</parsererror>
</pre>
<p>또한 해석 오류를 <a href="/en-US/docs/Error_Console" title="Error Console">오류 콘솔</a>에서도 볼 수 있으며, 여기에 후술할(역주: geckoRelease) 문서 URI도 포함된다</p>
<h3 id="SVG_및_HTML_해석">SVG 및 HTML 해석</h3>
<p>The <code>DOMParser</code> 객체는 {{geckoRelease("10.0")}} 규격에 맞는 SVG 문서도 해석할 수 있으며,{{geckoRelease("12.0")}} 규격에 맞는 HTML 문서를 해석할 수 있다. MIME 형식에 따라 아래와 같이 다른 객체가 반환될 수 있다.</p>
<ol>
<li>IME 형식이 <code>text/xml</code>이면, <code>XMLDocument</code> 객체가 반환된다.</li>
<li>MIME 형식이 <code>image/svg+xml</code>이면, <code>SVGDocument</code> 객체가 반환된다.</li>
<li>MIME 형식이 <code>text/html</code>이면, <code>HTMLDocument</code> 객체가 반환된다.</li>
</ol>
<pre class="brush: js notranslate">let parser = new DOMParser()
let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
// Document 객체가 반환되지만, SVGDocument 및 HTMLDocument 객체가 아니다.
parser = new DOMParser();
doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml")
// SVGDocument 객체가 반환되며, 이 또한 Document 객체이기도 하다.
parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html")
// HTMLDocument 객체가 반환되며, 이 또한 Document 객체이기도 하다.
</pre>
<h2 id="DOMParser_HTML_확장">DOMParser HTML 확장</h2>
<pre class="brush: js notranslate">/*
* DOMParser HTML 확장
* 2012-09-04
*
* By Eli Grey, http://eligrey.com
* Public domain.
* 이 구현체에 대한 보증이 없으므로 주의해서 사용할 것.
*/
/*! @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 에서 지원하지 않는 형식에 오류 발생
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>
<h2 id="규격">규격</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.DOMParser", 3)}}</p>
<h2 id="See_also" name="See_also">같이 보기</h2>
<ul>
<li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">XML 문서 직렬화와 해석</a> </li>
<li>{{domxref("XMLHttpRequest")}}</li>
<li>{{domxref("XMLSerializer")}}</li>
<li>{{jsxref("JSON.parse()")}} - {{jsxref("JSON")}} 문서에 대해 같은 역할을 제공한다.</li>
</ul>
|
