Works by

Ren's blog

@rennnosuke_rk 技術ブログです

トップ > 【JavaScript】DomParserを使ってXMLやHTML文字列をパースする

【JavaScript】DomParserを使ってXMLやHTML文字列をパースする

DomParserとは

DomParserはJavascriptに組み込みで実装されている、XML/HTML用パーサです。
文字列形式のXMLやHTMLをパースし、DOM情報を保持するdocumentオブジェクトに変換します。

documentオブジェクトの持つプロパティ等の仕様はこちら

HTMLをパースする

文字列形式のHTMLは以下のようにしてパースできます。

// HTML文字列
let html = 
"
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
</head>
<body>
  <p>hoge</p>
</body>
</html>
";
// DOMParserオブジェクト
let parser = new DOMParser();
// HTML文字列をパースし、documentオブジェクトを返す
let doc = parser.parseFromString(html, "text/html");

parseFromString(htmlStr, "text/html")メソッドでパース可能。
第二引数にtext/htmlを指定するのがミソです。

XMLをパースする

HTMLだけでなく、XML形式の文字列もパースすることができます。

let xml = 
"
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
";
let parser = new DOMParser();
let doc = parser.parseFromString(xml, "text/xml");

パース可能な文書一覧

以下の文書タイプがサポートされているようです。

パースできる文書にはXMLとHTMLのほか、SVGもパースすることができます。

先ほど文書をパースするとdocumentオブジェクトを返戻すると述べましたが、厳密には

  • XMLをパースした場合にはXMLDocumentオブジェクト
  • HTMLをパースした場合にはHTMLDocumentオブジェクト
  • SVGをパースした場合にはSVGDocumentオブジェクト

が返戻されます。