JavascriptでHTMLのDOMを生成

プログラミング Javascript

動機

このHTMLのテキストファイルからDOMを生成させたい場合に、DOMParserのparseFromStringメソッドを使うと上手く生成されない。
どうすれば、HTMLテキストからDOMオブジェクトを生成できるのかと、思ったのが動機。

問題を起こしてみる

下記のテキストからDOMオブジェクトを生成する関数がある。

/*
 \brief テキストをDOMオブジェクトに変換
 \param text テキスト
 \retval DOMオブジェクト
*/
function text2DOM(text)
{
    var parser = new DOMParser();
    var dom = parser.parseFromString(text, "text/xml");
    return dom;
}

この関数を使って下記のHTMLテキストをDOMオブジェクトに変化してみる。
サンプルテキスト

<html>
<!-- HTMLファイル -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML</title>
</head>
<body>
<p>bodyの中</p>
<p>テスト文章</p>
<div>divタグの中</div>
</body>
</html>

コンソールに打ち込んだ値

var t = '<html>\n<!-- HTMLファイル -->\n<head>\n<meta http-equiv="content-type" content="text/html; charset=UTF-8">\n<title>HTML</title>\n</head>\n<body>\n<p>bodyの中</p>\n<p>テスト文章</p>\n<div>divタグの中</div>\n</body>\n</html>'

Google Chromeのコンソールでテスト

build2DOM関数の実行結果

パーサでエラーが起こって、pタグやdivタグが消えてた。

試行錯誤

text2DOM関数のparserFromStringの第2引数であるMIME-Typeを

'text/xml'

から

'text/html'

に変更してらいいじゃないかと思ったけど、そう甘くあは無かった。
やってみるとわっかるが、text2DOM関数はnullを返却してくる
実行結果

ググッてみると答えは見つかるもだった。

(解決策)

一応、解決策は見つかった。

/*
 \brief HTMLのテキストをDOMオブジェクトに変換
 \param text THMLのテキスト
 \retval DOMオブジェクト
*/
function buildHTMLDOM(text)
{
    var dummy = document.createElement("div");
    
    if(dummy) {
        dummy.innerHTML = text;
    }
    
    return dummy;
}

divタグを作ってその中にDOMオブジェクト化したいテキストを放り込む。
すると、DOMオブジェクトとなって帰ってくる。
実行結果

htmlタグやheadタグ、bodyタグが消えてるけど、getElement*メソッドで色々情報が取れるからよしとしよう。

まとめ

もっと、スマートな方法は無いもんか。
htmlタグやheadタグを消さずにDOMオブジェクト化出来る方法はないものか。