DOMParserとXMLSerializerの2つのAPIの概要

1つは、DOMParserメソッドを理解する

DOMParserはHTML文字列をDOMツリーに解析でき、フォーマットタイプにはXMLドキュメントまたはHTMLドキュメントが含まれます。

文法

var domParser = new DOMParser（）;

これdomParserはDOMParserオブジェクトです。

DOMParserオブジェクトには、parseFromStringというメソッドが含まれています。

メソッドの構文は次のとおりです。

var doc = domParser.parseFromString（string、mimeType）;

このメソッドは、mimeTypeパラメーターの値に応じてHTMLドキュメントまたはXMLドキュメントを返します。

具体的なパラメータは次のとおりです。

ストリング

必須。ストリング。解析に使用されるDOM文字列（DOMString）を表します。HTML、xml、xhtml + xml、またはsvgドキュメントコンテンツを含める必要があります。含めると、エラーが解析される可能性があります。

mimeType

必須。ストリング。解析するドキュメントのタイプを示し、次のパラメータ値をサポートします。

mimeType値	ドキュメントタイプを返す
text / html	資料
text / xml	XMLDocument
application / xml	XMLDocument
application / xhtml + xml	XMLDocument
image / svg + xml	XMLDocument

その中で、ドキュメントドキュメントタイプには自動的にタグが含ま<html>れ<body>ますが、XMLドキュメントドキュメントタイプはタグを積極的に追加<html>および<body>待機しません。私のテストによると、多くの通常のHTMLタグで解析エラーの解析エラーが発生することがあります。

例えば：

var domParser = new DOMParser（）; 
console.dir（domParser.parseFromString（ '<p>コンテンツ</ p>'、 'text / html'））;

この時点で返されたドキュメントのDOMツリーの構造は、以下のスクリーンショットに示され、<html>かつ<body>タグDOM文字列パラメータではありません表示されます。

ドキュメントタイプの構造には、htmlと本文が含まれます

ただし、設定したmimeTypetext/xmlが同じ場合は、別のドキュメントツリー構造が返されます。

var domParser = new DOMParser（）; 
console.dir（domParser.parseFromString（ '<p>コンテンツ</ p>'、 'text / xml'））;

コンソール出力の結果は次のとおりです。

ドキュメントツリーの出力スクリーンショット

互換性

DOMParserメソッドはIE9 +でサポートされています。

2つ目は、XMLSerializerメソッドを理解することです

XMLSerializerメソッドの役割はDOMParserの反対です。XMLSerializerはDOMツリーオブジェクトを文字列にシリアル化できます。

文法

var xmlSerializer = new XMLSerializer（）;

これxmlSerializerはXMLSerializerオブジェクトです。

XMLSerializerオブジェクトにはserializeToString()、シリアル化されたxml文字列を返すことができるという名前のメソッドがあります。

構文は次のとおりです。

var xmlString = xmlSerializer.serializeToString（rootNode）;

戻り値はDOMString型です。

パラメータ

rootNode

する必要がある。文字列への変換に使用されるDOMツリーのルートノード。

例えば：

var xmlSerializer = new XMLSerializer（）; 
console.log（xmlSerializer.serializeToString（document.querySelector（ '。link'）））;

この記事に対応するコンソールで上記のJSコードを実行すると、結果は次のようになります。

serializeToStringメソッドテスト

outsideHTML属性との違い

serializeToString()方法はouterHTMLいくつか似ていますが、それでも違いがあります。主に次の2つがあります。

outsideHTMLはElement要素でのみ使用できますが、テキストノードやコメントノードなどの他のノードタイプにすることはできません。ただし、このserializeToString()方法はすべてのノードタイプに適用できます。含める：

ノードタイプ	言い換えると
ドキュメントタイプ	ドキュメントタイプ
資料	ドキュメンテーション
DocumentFragment	ドキュメントフラグメント
素子	素子
コメント	コメントノード
テキスト	テキストノード
処理指示	処理命令
Attr	属性ノード

serializeToString()このメソッドは、xmlns名前空間をルート要素に自動的に追加します。たとえば、次の2つのコードの出力結果を比較します。
```
div = document.createElement（ 'div'）; 
// 1. 
console.log（div.outerHTML）; 
// 2. 
var xmlSerializer = new XMLSerializer（）; 
console.log（xmlSerializer.serializeToString（div））;
```
出力結果は次のとおりです。

互換性

DOMParserメソッドはIE9 +でサポートされています。

3つのアプリケーション例

1.HTML文字列の改行とコメントを削除します

まず、次のようにHTMLをテストし、カスタムスクリプトテンプレートに配置します。

<script id = "tpl" type = "text / template"> 
<！-これはコメント1-> 
<p>これはテキストです。</ p> 
<！-これは注2-> 
<ol> 
    <li>リスト</ li> 
    <li>リスト</ li> 
    <li>リスト</ li> 
</ ol> 
</ script>

読みやすく、維持しやすくするために、HTMLテンプレートにはインデントとコメントが含まれていますが、実際の解析とこれらは不要であり、削除する必要があります。文字列の定期的な置換に加えて、ブラウザを使用してみることもできます。 DOMParseなどの一部のネイティブDOMAPIメソッドのJavaScriptコードは次のとおりです。

var htmlTpl = tpl.innerHTML; 
//文字列をドキュメントタイプに変換します
vardomParser = new DOMParser（）; 
var doc = domParser.parseFromString（htmlTpl、 'text / html'）; 

//ネイティブTreeWalkerを使用して
vartreeWalkerをトラバースします= document.createTreeWalker（doc）; 
var arrNodeRemove = []; 
//コメントノードと
ニューラインテキストノードをトラバースしますwhile（treeWalker.nextNode（））{ 
    var node = treeWalker.currentNode; 
    if（node.nodeType == Node.COMMENT_NODE | |（node.nodeType == Node.TEXT_NODE && node.nodeValue.trim（）== ''））{ 
        arrNodeRemove.push（node）; 
    } 
} 
//ノードの削除
arrNodeRemove.forEach（function（node）{ 
    node.parentNode .removeChild（node）; 
}）; 
//文字列の復元
console.log（doc.body.innerHTML）;です。//
//出力は次のとおりです
。//<p>これはテキストです。</ p> <ol> <li>リスト</ li> <li>リスト</ li> <li>リスト</ li> </ ol>

Chromeブラウザのスクリーンショットは次のとおりです。

クリーン処理後のHTML文字コンテンツ

ご覧のとおり、HTML文字列と改行スペースに関連するコメントは削除されています。DOMParserメソッドを使用する利点は、正規表現の置換よりも理解と使用が簡単なことです。ブラウザに組み込まれている解析を使用しているため、 HTML文字はフォールトトレラントです。より強力で、正規表現の使用は包括的ではない場合があります。欠点は、コードの量が比較的多いことです。

4、結論

今日この記事を整理して調べたところ、ネイティブDOM APIについてまだよくわかっていません。たとえば、NodeIteratorとTreeWalkerはIE9 +ブラウザでサポートされているネイティブAPIです。将来、それらを紹介する機会があります。ネイティブDOMAPIを好む開発者の割合は非常に低く、日常的に使用される可能性は高くありませんが、優れたフレームワーククリエーターであるクリエーターになりたいのであれば、そのような学習は不可欠です。

参照文書：

読んでくれてありがとう！