DOMParser

The DOMParser 인터페이스는 DOM Document 문서에 맞는 XMLHTML 소스 코드를 해석할 수 있는 기반을 제공한다 .

참고: 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 형식에 따라 아래와 같이 다른 객체가 반환될 수 있다.

  1. IME 형식이 text/xml이면, XMLDocument 객체가 반환된다.
  2. MIME 형식이 image/svg+xml이면, SVGDocument 객체가 반환된다.
  3. 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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMParserChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 8Safari Full support 3.2WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
DOMParser() constructorChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 8Safari Full support 3.2WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 1.0
parseFromStringChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 8Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
parseFromString: HTML (text/html) supportChrome Full support 31Edge Full support 12Firefox Full support 12IE Full support 10Opera Full support 17Safari Full support 9.1WebView Android Full support 37Chrome Android Full support 31Firefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android Full support 3.0
parseFromString: SVG (image/svg+xml) supportChrome Full support 4Edge Full support 12Firefox Full support 10IE Full support 10Opera Full support 15Safari Full support 3.2WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support 1.0
parseFromString: XML (application/xml) supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 8Safari Full support 3.2WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

같이 보기