The DOMParser
인터페이스는 DOM Document
문서에 맞는 XML 및 HTML 소스 코드를 해석할 수 있는 기반을 제공한다 .
참고: XMLHttpRequest
객체로도 인식 가능한 URL 주소로부터 직접 XML 및 HTML 문서를 해석하여 response
속성을 통해 Document
객체로 제공한다.
반대로 DOM 구조를 XML 및 HTML 소스 코드로 제공하는 방식은 XMLSerializer
인터페이스를 참고하도록 한다.
HTML 문서의 경우, Element.innerHTML
속성과 outerHTML
속성을 통해 DOM 구조를 새로운 방식으로 변경할 수 있다. 또한 이들 속성을 통해 HTML 구조의 하위에 있는 HTML 구조도 불러올 수 있다.
문법
let domparser = new DOMParser()
메소드
DOMParser.parseFromString()
문법
let doc = domparser.parseFromString(string, mimeType)
반환
mimeType
인자를 통해 정의한 형식에 따른 Document
또는XMLDocument
문서를 반환한다.
인자
이 메소드에는 2개의 인자가 제공되는데, 모두 필수값이다.
string
- 해석할
DOMString
문자열. 반드시 HTML, xml, xhtml+xml 또는 svg 문서 형식에 맞아야 한다. mimeType
-
아래 표에 정의한 형식을 반환 값으로 제공할
DOMString
문자열.mimeType
doc.constructor
text/html
Document
text/xml
XMLDocument
application/xml
XMLDocument
application/xhtml+xml
XMLDocument
image/svg+xml
XMLDocument
예제
XML 해석
parser 변수를 통해 새로이 해석할 객체를 만들었다면, 이제 parseFromString()
메소드를 통해 XML 문서를 해석할 수 있다.
let parser = new DOMParser()
let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
오류 대응
만약 해석에 실패할 경우, DOMParser
객체는 예외를 발생시키지 않고, 아래와 같은 오류 문서를 반환한다.
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(영문 오류 내용)
<sourcetext>(오류가 발생한 XML 소스 조각)</sourcetext>
</parsererror>
또한 해석 오류를 오류 콘솔에서도 볼 수 있으며, 여기에 후술할(역주: geckoRelease) 문서 URI도 포함된다
SVG 및 HTML 해석
The DOMParser
객체는 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 규격에 맞는 SVG 문서도 해석할 수 있으며,(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 규격에 맞는 HTML 문서를 해석할 수 있다. MIME 형식에 따라 아래와 같이 다른 객체가 반환될 수 있다.
- IME 형식이
text/xml
이면,XMLDocument
객체가 반환된다. - MIME 형식이
image/svg+xml
이면,SVGDocument
객체가 반환된다. - MIME 형식이
text/html
이면,HTMLDocument
객체가 반환된다.
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 객체이기도 하다.
DOMParser HTML 확장
/*
* 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 = proto.parseFromString;
// 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) {}
proto.parseFromString = function(markup, type) {
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 nativeParse.apply(this, arguments);
}
};
}(DOMParser));
규격
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'DOM parsing' in that specification. |
Living Standard |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- XML 문서 직렬화와 해석
XMLHttpRequest
XMLSerializer
JSON.parse()
-JSON
문서에 대해 같은 역할을 제공한다.