From 577c8e72228db8bbc03962f84ff4cb80076d6593 Mon Sep 17 00:00:00 2001
From: Will <>
Date: Mon, 8 Mar 2021 17:14:17 -0800
Subject: [PATCH 1/6] Split out DOMParser.parseFromString; fix various errors
and omissions in the DOMParser docs
---
.../web/api/domparser/domparser/index.html | 25 ++-
files/en-us/web/api/domparser/index.html | 188 +++---------------
.../api/domparser/parsefromstring/index.html | 127 ++++++++++++
3 files changed, 181 insertions(+), 159 deletions(-)
create mode 100644 files/en-us/web/api/domparser/parsefromstring/index.html
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
+
+
+
+
+ | Specification |
+ Status |
+ Comment |
+
+
+
+
+ | {{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..3cb525b803ea133 100644
--- a/files/en-us/web/api/domparser/index.html
+++ b/files/en-us/web/api/domparser/index.html
@@ -8,13 +8,8 @@
- Document
- HTML
- HTMLDocument
-- MakeBrowserAgnostic
-- NeedsMarkupWork
- Parsing
- Reference
-- SVG
-- XML
-- XMLDocument
---
{{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:
-
-
-
-
- mimeType |
- doc.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 a {{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 = "Beware of the tiger";
+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 = "";
+const doc2 = parser.parseFromString(svgString, "image/svg+xml");
+// XMLDocument
-Parsing SVG or HTML
+const htmlString = "Beware of the leopard";
+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"
-
- - If the MIME type is
text/xml, the result will be an
- XMLDocument
- - If the MIME type is
image/svg+xml, the result will be an
- SVGDocument
- - If the MIME type is
text/html, the result will be an
- HTMLDocument
-
-
-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
diff --git a/files/en-us/web/api/domparser/parsefromstring/index.html b/files/en-us/web/api/domparser/parsefromstring/index.html
new file mode 100644
index 000000000000000..0655dc8c273eeab
--- /dev/null
+++ b/files/en-us/web/api/domparser/parsefromstring/index.html
@@ -0,0 +1,127 @@
+---
+title: DOMParser.parseFromString()
+slug: Web/API/DOMParser/parseFromString
+tags:
+ - API
+ - Method
+ - Reference
+---
+{{APIRef("DOMParser")}}
+
+The parseFromString() method of the {{domxref("DOMParser")}} interface parses a string containing either HTML or XML, returning an {{domxref("HTMLDocument")}} or an {{domxref("XMLDocument")}}.
+
+Syntax
+
+const doc = domparser.parseFromString(string, mimeType)
+
+Parameters
+
+
+ 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 whether the XML parser or the HTML parser is used to parse the string. Valid values are:
+
+ text/htmltext/xmlapplication/xmlapplication/xhtml+xmlimage/svg+xml
+
+ A value of text/html will invoke the HTML parser, and the method will return an {{domxref("HTMLDocument")}}.
+ Any other valid value will invoke the XML parser, and the method will return an {{domxref("XMLDocument")}}.
+ Any other value will cause a TypeError to be thrown.
+
+
+
+Return value
+
+An {{domxref("HTMLDocument")}} or an {{domxref("XMLDocument")}}, depending on the
+ mimeType argument.
+
+Examples
+
+Parsing XML, SVG, and HTML
+
+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 other valid MIME type will invoke
+the XML parser.
+
+const parser = new DOMParser();
+
+const xmlString = "Beware of the tiger";
+const doc1 = parser.parseFromString(xmlString, "application/xml");
+// XMLDocument
+
+const svgString = "";
+const doc2 = parser.parseFromString(svgString, "image/svg+xml");
+// XMLDocument
+
+const htmlString = "Beware of the leopard";
+const doc3 = parser.parseFromString(htmlString, "text/html");
+// HTMLDocument
+
+console.log(doc1.documentElement.textContent)
+// "Beware of the tiger"
+
+console.log(doc2.firstChild.tagName);
+// "circle"
+
+console.log(doc3.body.firstChild.textContent);
+// "Beware of the leopard"
+
+
+Error handling
+
+Note that if the XML parser is used and parsing fails, the DOMParser does not throw an
+ exception, but instead returns an error document:
+
+const parser = new DOMParser();
+
+const xmlString = "Beware of the missing closing tag";
+const doc = parser.parseFromString(xmlString, "application/xml");
+
+console.log(doc.documentElement.tagName);
+// parsererror
+
+console.log(doc.documentElement.textContent);
+// XML Parsing Error: no element found
+
+
+The parsing error may also be reported to the browser's JavaScript console.
+
+Specifications
+
+
+
+
+ | Specification |
+ Status |
+ Comment |
+
+
+
+
+ | {{SpecName('HTML WHATWG', '#dom-domparser-parsefromstring', 'parseFromString()')}}
+ |
+ {{Spec2('HTML WHATWG')}} |
+ |
+
+
+
+
+Browser compatibility
+
+{{Compat("api.DOMParser.parseFromString")}}
+
+See also
+
+
+ - {{domxref("XMLSerializer")}}
+ - {{jsxref("JSON.parse()")}} - counterpart for {{jsxref("JSON")}} documents.
+
From 202df717e210327e4eba44c3a9edb3aee1090508 Mon Sep 17 00:00:00 2001
From: Will <>
Date: Mon, 8 Mar 2021 17:17:22 -0800
Subject: [PATCH 2/6] Escape HTML in examples
---
files/en-us/web/api/domparser/index.html | 6 +++---
files/en-us/web/api/domparser/parsefromstring/index.html | 8 ++++----
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/files/en-us/web/api/domparser/index.html b/files/en-us/web/api/domparser/index.html
index 3cb525b803ea133..0ec9ff0568d5706 100644
--- a/files/en-us/web/api/domparser/index.html
+++ b/files/en-us/web/api/domparser/index.html
@@ -53,15 +53,15 @@ Parsing XML, SVG, and HTML
const parser = new DOMParser();
-const xmlString = "Beware of the tiger";
+const xmlString = "<warning>Beware of the tiger</warning>";
const doc1 = parser.parseFromString(xmlString, "application/xml");
// XMLDocument
-const svgString = "";
+const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
// XMLDocument
-const htmlString = "Beware of the leopard";
+const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
// HTMLDocument
diff --git a/files/en-us/web/api/domparser/parsefromstring/index.html b/files/en-us/web/api/domparser/parsefromstring/index.html
index 0655dc8c273eeab..3f55b34fc6d539e 100644
--- a/files/en-us/web/api/domparser/parsefromstring/index.html
+++ b/files/en-us/web/api/domparser/parsefromstring/index.html
@@ -54,15 +54,15 @@ Parsing XML, SVG, and HTML
const parser = new DOMParser();
-const xmlString = "Beware of the tiger";
+const xmlString = "<warning>Beware of the tiger</warning>";
const doc1 = parser.parseFromString(xmlString, "application/xml");
// XMLDocument
-const svgString = "";
+const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
// XMLDocument
-const htmlString = "Beware of the leopard";
+const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
// HTMLDocument
@@ -83,7 +83,7 @@ Error handling
const parser = new DOMParser();
-const xmlString = "Beware of the missing closing tag";
+const xmlString = "<warning>Beware of the missing closing tag";
const doc = parser.parseFromString(xmlString, "application/xml");
console.log(doc.documentElement.tagName);
From d09d91e0682437c7cd3638573743f538871c2596 Mon Sep 17 00:00:00 2001
From: Will <>
Date: Mon, 8 Mar 2021 17:18:32 -0800
Subject: [PATCH 3/6] Fix fixable flaws
---
files/en-us/web/api/domparser/index.html | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/files/en-us/web/api/domparser/index.html b/files/en-us/web/api/domparser/index.html
index 0ec9ff0568d5706..7dfe11a21366873 100644
--- a/files/en-us/web/api/domparser/index.html
+++ b/files/en-us/web/api/domparser/index.html
@@ -2,14 +2,14 @@
title: DOMParser
slug: Web/API/DOMParser
tags:
-- API
-- DOM
-- DOM Parsing
-- Document
-- HTML
-- HTMLDocument
-- Parsing
-- Reference
+ - API
+ - DOM
+ - DOM Parsing
+ - Document
+ - HTML
+ - HTMLDocument
+ - Parsing
+ - Reference
---
{{APIRef("DOM")}}
@@ -102,7 +102,7 @@ Browser compatibility
See also
- - Parsing and serializing XML
+
- Parsing and serializing XML
- {{domxref("XMLHttpRequest")}}
- {{domxref("XMLSerializer")}}
From 07ad44aed6b4004038aa5b89717bd50a4f4a3126 Mon Sep 17 00:00:00 2001
From: wbamberg
Date: Mon, 8 Mar 2021 17:57:40 -0800
Subject: [PATCH 4/6] "a HTML Document" -> "an HTML Document"
Co-authored-by: Michael[tm] Smith
---
files/en-us/web/api/domparser/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/files/en-us/web/api/domparser/index.html b/files/en-us/web/api/domparser/index.html
index 7dfe11a21366873..8931757bd41a41a 100644
--- a/files/en-us/web/api/domparser/index.html
+++ b/files/en-us/web/api/domparser/index.html
@@ -40,7 +40,7 @@ Methods
- {{domxref("DOMParser.parseFromString()")}}
- - Parses a string using either the HTML parser or the XML parser, returning a {{domxref("HTMLDocument")}} or {{domxref("XMLDocument")}}.
+ - Parses a string using either the HTML parser or the XML parser, returning an {{domxref("HTMLDocument")}} or {{domxref("XMLDocument")}}.
Examples
From 24de6b38cf6ec04ffdc19f1c72c43e80d7615c53 Mon Sep 17 00:00:00 2001
From: wbamberg
Date: Mon, 8 Mar 2021 17:58:21 -0800
Subject: [PATCH 5/6] "a HTML" -> "an HTML"
Co-authored-by: Michael[tm] Smith
---
files/en-us/web/api/domparser/parsefromstring/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/files/en-us/web/api/domparser/parsefromstring/index.html b/files/en-us/web/api/domparser/parsefromstring/index.html
index 3f55b34fc6d539e..015142c0c53531b 100644
--- a/files/en-us/web/api/domparser/parsefromstring/index.html
+++ b/files/en-us/web/api/domparser/parsefromstring/index.html
@@ -19,7 +19,7 @@ Parameters
string- The {{domxref("DOMString")}} to be parsed. It must contain either
+
- The {{domxref("DOMString")}} to be parsed. It must contain either an
{{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}}, or
{{Glossary("svg")}} document.
mimeTypeExamples
Parsing XML, SVG, and HTML
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 other valid MIME type will invoke
+text/html will invoke the HTML parser, and any other valid MIME type will invoke
the XML parser.
const parser = new DOMParser();