web-dev-qa-db-ja.com

JQueryを使用せずに、文字列からDOMドキュメントを作成します

Jqueryを使用せずに、文字列からjavascriptでDOM documentを作成する方法を探しています。そうする方法はありますか？ [Jqueryでできるので、そうだと思います！]

好奇心旺盛な方は、Jqueryを使用できません。これは、Chromeアプリケーションのコンテンツスクリプトのコンテキストで実行しているためです。Jqueryを使用すると、コンテンツスクリプトが重くなりすぎます。

javascriptdocument
22
Julien Genestoux

あなたがまだ答えを探しているなら、そしてそれに出くわす他の誰かのために、私はちょうど自分で同じことをしようとしてきました。 javascriptのDOMImplementationを見たいようです。

http://reference.sitepoint.com/javascript/DOMImplementation

ここでも互換性についての言及はほとんどありませんが、かなりよくサポートされています。

基本的に、操作する新しいドキュメントを作成するには、新しいDoctypeオブジェクトを作成し（標準ベースのものを出力する場合）、新しく作成されたDoctype変数を使用して新しいドキュメントを作成します。

Doctypeとドキュメントの両方に入力するオプションは複数ありますが、HTML5ドキュメントを作成する場合は、それらのほとんどを空白の文字列のままにしておきたいようです。

例（新しいHTML5 DOMドキュメント）：

var doctype = document.implementation.createDocumentType( 'html', '', '');

var dom = document.implementation.createDocument('', 'html', doctype);

新しいドキュメントは次のようになります。

<!DOCTYPE html>
<html>
</html>

例（新しいXHTML DOMドキュメント）：

var doctype = document.implementation.createDocumentType(
    'html',
    '-//W3C//DTD XHTML 1.0 Strict//EN',
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'
);

var dom = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml',
    'html',
    doctype
);

したがって、残りの部分を設定するのはあなた次第です。変更するのと同じくらい簡単にこれを行うことができます

dom.documentElement.innerHTML = '<head></head><body></body>';

または、より厳密に実行します。

var head = dom.createElement( 'head' );
var body = dom.createElement( 'body' );
dom.documentElement.appendChild(head);
dom.documentElement.appendChild(body);

全てあなたのもの。

16
woosteln

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");

（結果のdoc変数はdocumentFragmentオブジェクトです）。

26
apratimankur

createDocumentFragmentが役立つかもしれません。

https://developer.mozilla.org/En/DOM/DocumentFragment

ブラウザは常に空のページ（about：blank）を使用して自分でドキュメントを作成します。たぶん、Chromeアプリケーションでは利用可能な関数がいくつかあります（FFのXULなど）が、通常のJavaScriptにはそのような関数はありません。

1
kirilloid

DOM要素にはプロパティ innerHTML があり、その内容を完全に変更できます。したがって、コンテナを作成して、新しいHTMLコンテンツで埋めることができます。

function createElementFromStr(htmlContent) {
  var wrapperElm = document.createElement("div");
  wrapperElm.innerHTML = htmlContent; // Ex: "<p id='example'>HTML string</p>"
  console.assert(wrapperElm.children.length == 1); //Only one child at first level.
  return wrapperElm.children[0];
}

*古い質問だとは思いますが、他の誰かを助けたいと思っています。

0
Asfixia

私はここで他のいくつかの方法を試しましたが、Chrome src属性が指す実際の.jsファイルのロードを拒否するなどのスクリプト要素を作成するときに問題が発生します。以下は私にとって最適な方法です。

JQueryよりも最大3倍、DOMParserを使用するよりも3.5倍高速ですが、プログラムで要素を作成するよりも2倍低速です。
https://www.measurethat.net/Benchmarks/Show/2149/

Object.defineProperty(HTMLElement, 'From', { 
    enumerable: false,
    value: (function (document) {
        //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed
        var rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g;
        return function CreateElementFromHTML(html) {
            html = html.trim();
            var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<');
            var elemStart = html.substr(0, bodystart);
            var innerHTML = html.substr(bodystart, bodyend - bodystart);
            rgx.lastIndex = 0;
            var elem = document.createElement(rgx.exec(elemStart)[4]);
            var match; while ((match = rgx.exec(elemStart))) {
                if (match[1] === undefined) {
                    elem.setAttribute(match[4], "");
                } else {
                    elem.setAttribute(match[1], match[3]);
                }
            }
            elem.innerHTML = innerHTML;
            return elem;
        };
    }(window.document))
});

使用例：

HTMLElement.From(`<div id='elem with quotes' title='Here is "double quotes" in single quotes' data-alt="Here is 'single quotes' in double quotes"><span /></div>`);
HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async href="https://localhost/.js/sites/reddit/zinject.reddit.css">`);
HTMLElement.From(`<script id="reddit_js" type="text/javascript" async defer src="https://localhost/.js/sites/reddit/zinject.reddit.js"></script>`);
HTMLElement.From(`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`);
HTMLElement.From(`<div id='Sidebar' class='sidebar' display=""><div class='sb-handle'></div><div class='sb-track'></div></div>`);
0
Derek Ziemba
var dom = '<html><head>....</head><body>...</body></html>';

document.write(dom);
document.close();
0
Manatok

Iframeにhtml文字列を書くことでこれを行うことができました

const html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=Edge">
  <title>Document</title>
</head>
<body>

</body>
</html>`

const iframe = document.createElement('iframe')
iframe.contentDocument.open()
iframe.contentDocument.write(html)
iframe.contentDocument.close()
iframe.addEventListener('load', () => {
  myDocumentObject = iframe.contentDocument
})
0
bobharley
fetch("index.html", {  // or any valid URL
    method: "get"
}).then(function(e) {
    return e.text().then(e => {
        var t = document.implementation.createHTMLDocument("");
        t.open();
        t.write(e);
        t.close();
        return t;
    });
}).then(e => {
    //  e will contain the document fetched and parsed.
    console.log(e);
});
0
Zibri

HTMLはこれを望みます：

<html>
<head></head>
<body>
    <div id="toolbar_wrapper"></div>
</body>
</html>

JSは次のようになります。

var data = '<div class="toolbar">'+
                '<button type="button" class="new">New</button>'+
                '<button type="button" class="upload">Upload</button>'+
                '<button type="button" class="undo disabled">Undo</button>'+
                '<button type="button" class="redo disabled">Redo</button>'+
                '<button type="button" class="save disabled">Save</button>'+
            '</div>';
document.getElementById("toolbar_wrapper").innerHTML = data;
0
Srikanth Kshatriy