diff --git a/files/en-us/web/api/domparser/domparser/index.html b/files/en-us/web/api/domparser/domparser/index.html index 3616fda59fa85e5..3d0517aa024eaa8 100644 --- a/files/en-us/web/api/domparser/domparser/index.html +++ b/files/en-us/web/api/domparser/domparser/index.html @@ -12,16 +12,37 @@

Syntax

-
var parser = new DOMParser();
+
const parser = new DOMParser();

Parameters

None.

-

Return Value

+

Return value

A new DOMParser object. This object can be used to parse the text of a document using the parseFromString() method.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-domparser-constructor', 'DOMParser()')}} + {{Spec2('HTML WHATWG')}}
+

Browser compatibility

{{Compat("api.DOMParser.DOMParser")}}

diff --git a/files/en-us/web/api/domparser/index.html b/files/en-us/web/api/domparser/index.html index 7abdb625f762e6d..8931757bd41a41a 100644 --- a/files/en-us/web/api/domparser/index.html +++ b/files/en-us/web/api/domparser/index.html @@ -2,19 +2,14 @@ title: DOMParser slug: Web/API/DOMParser tags: -- API -- DOM -- DOM Parsing -- Document -- HTML -- HTMLDocument -- MakeBrowserAgnostic -- NeedsMarkupWork -- Parsing -- Reference -- SVG -- XML -- XMLDocument + - API + - DOM + - DOM Parsing + - Document + - HTML + - HTMLDocument + - Parsing + - Reference ---

{{APIRef("DOM")}}

@@ -22,12 +17,6 @@ the ability to parse {{Glossary("XML")}} or {{Glossary("HTML")}} source code from a string into a DOM {{domxref("Document")}}.

-
-

Note: {{domxref("XMLHttpRequest")}} can parse XML and HTML directly - from a URL-addressable resource, returning a Document in its - {{domxref("XMLHttpRequest.response", "response")}} property.

-
-

You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the {{domxref("XMLSerializer")}} interface.

@@ -36,169 +25,54 @@ {{domxref("Element.outerHTML", "outerHTML")}} properties. These properties can also be read to fetch HTML fragments corresponding to the corresponding DOM subtree.

-

Syntax

- -
const domparser = new DOMParser()
- -

Methods

- -

{{domxref("DOMParser.parseFromString()", "", - "", "1")}}

+

Note that {{domxref("XMLHttpRequest")}} can parse XML and HTML directly + from a URL-addressable resource, returning a Document in its + {{domxref("XMLHttpRequest.response", "response")}} property.

-

Syntax

+

Constructor

-
const doc = domparser.parseFromString(string, mimeType)
- -

Return

- -

Either {{domxref("Document")}} or {{domxref("XMLDocument")}} depending on the - mimeType argument.

- -

Parameters

+
+
{{domxref("DOMParser.DOMParser","DOMParser()")}}
+
Creates a new DOMParser object.
+
-

This method has 2 parameters (both required):

+

Methods

-
string
-
The {{domxref("DOMString")}} to be parsed. It must contain either - {{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}}, or - {{Glossary("svg")}} document.
-
mimeType
-
-

A {{domxref("DOMString")}}. This string determines a class of the method's return - value. The possible values are the following:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
mimeTypedoc.constructor
text/html{{domxref("Document")}}
text/xml{{domxref("XMLDocument")}}
application/xml{{domxref("XMLDocument")}}
application/xhtml+xml{{domxref("XMLDocument")}}
image/svg+xml{{domxref("XMLDocument")}}
-
+
{{domxref("DOMParser.parseFromString()")}}
+
Parses a string using either the HTML parser or the XML parser, returning an {{domxref("HTMLDocument")}} or {{domxref("XMLDocument")}}.

Examples

-

Parsing XML

- -

Once you have created a parser object, you can parse XML from a string using the - parseFromString() method:

+

Parsing XML, SVG, and HTML

-
let parser = new DOMParser()
-let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
-
+

This example shows how to parse XML, SVG, and HTML. Note that a MIME type of +text/html will invoke the HTML parser, and any of the other MIME types +that are accepted by this method will invoke the XML parser.

-

Error handling

+
const parser = new DOMParser();
 
-
Note that if the parsing process fails, the DOMParser does not throw an
-  exception, but instead returns an error document:

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

+const xmlString = "<warning>Beware of the tiger</warning>";
+const doc1 = parser.parseFromString(xmlString, "application/xml");
+// XMLDocument
 
-
The parsing errors are also reported to the Error Console, with the document URI (see below) as the
-  source of the error.

+const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
+const doc2 = parser.parseFromString(svgString, "image/svg+xml");
+// XMLDocument
 
-
Parsing SVG or HTML

+const htmlString = "<strong>Beware of the leopard</strong>";
+const doc3 = parser.parseFromString(htmlString, "text/html");
+// HTMLDocument
 
-
The DOMParser can also be used to parse an SVG document
-  {{geckoRelease("10.0")}} or an HTML document {{geckoRelease("12.0")}}. There are three
-  different results possible, selected by the MIME type given.

+console.log(doc1.documentElement.textContent)
+// "Beware of the tiger"
 
-
    
-  
  1. If the MIME type is text/xml, the result will be an
-    XMLDocument
    2. 
-  
  2. If the MIME type is image/svg+xml, the result will be an
-    SVGDocument
    3. 
-  
  3. If the MIME type is text/html, the result will be an
-    HTMLDocument
    4. 
-

-
-
let parser = new DOMParser()
-let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
-// returns a Document, but not an SVGDocument nor an HTMLDocument
-
-parser = new DOMParser();
-doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml")
-// returns a SVGDocument, which also is a Document.
-
-parser = new DOMParser();
-doc = parser.parseFromString(stringContainingHTMLSource, "text/html")
-// returns an HTMLDocument, which also is a Document.
-

+console.log(doc2.firstChild.tagName);
+// "circle"
 
-
DOMParser HTML extension

-
-
/*
- * 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 = 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 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));
+console.log(doc3.body.firstChild.textContent);
+// "Beware of the leopard"
 

 
 
Specifications

@@ -228,7 +102,7 @@ 
Browser compatibility

 
See also