Мы ищем способы создания документа DOM в javascript из строки, но без использования JQuery. Есть ли способ сделать это? [Я бы так предположил, так как JQuery может это сделать!]
Для любопытных мы не можем использовать JQuery, потому что мы делаем это в контексте содержимого приложения Chrome script, а использование Jquery просто сделает наш контент script слишком тяжелым.
В случае, если вы все еще ищете anwer, и для кого-то другого, проходящего через него, я просто пытаюсь сделать то же самое сам. Кажется, вы хотите посмотреть javascript DOMImplementation:
http://reference.sitepoint.com/javascript/DOMImplementation
Здесь немного ссылок на совместимость, но он довольно хорошо поддерживается.
В сущности, чтобы создать новый документ для управления, вы хотите создать новый объект Doctype (если вы собираетесь выводить некоторые данные на основе стандартов), а затем создать новый документ с использованием вновь созданной переменной Doctype.
В обоих типах документа и документа есть несколько параметров, но если вы создаете документ HTML5, кажется, вы хотите оставить большинство из них пустым.
Пример (новый документ DOM HTML5):
var doctype = document.implementation.createDocumentType( 'html', '', '');
var dom = document.implementation.createDocument('', 'html', doctype);
Новый документ теперь выглядит следующим образом:
<!DOCTYPE html>
<html>
</html>
Пример (новый документ DOM XHTML):
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);
Все ваши.
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");
(результирующая переменная doc является объектом DocumentFragment).
createDocumentFragment может вам помочь.
https://developer.mozilla.org/En/DOM/DocumentFragment
Браузеры всегда создают документ самостоятельно с пустой страницей (около: пусто). Возможно, в приложении Chrome есть некоторые доступные функции (например, XUL в FF), но нет такой функции в обычном javascript.
var dom = '<html><head>....</head><body>...</body></html>';
document.write(dom);
document.close();
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;
Я пробовал некоторые из других способов здесь, но там, где возникают проблемы при создании script элементов, таких как Chrome, отказывающихся загружать фактический .js файл, на который указывает атрибут src. Ниже приводится то, что лучше всего подходит для меня.
Это до 3 раз быстрее, чем jQuery и в 3,5 раза быстрее, чем с использованием DOMParser, но в 2 раза медленнее, чем программно создавая элемент.
https://www.measurethat.net/Benchmarks/Show/2149/0
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>`);
Я смог сделать это, написав HTML-строку на iframe
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
})
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);
});