DOMParser внедряет DOM, но не применяет таблицы стилей CSS после инъекции?

Question

У меня есть небольшой тест на:

http://jsfiddle.net/9xwUx/1/

Код сводится к следующему (задан узел с идентификатором "target"):

var string = '<div class="makeitpink">this should be pink, but is not</div>';
var parser = new DOMParser();
var domNode = parser.parseFromString(string,"text/xml");
document.getElementById("target").appendChild(domNode.firstChild);

Если вы запустите тестовый сценарий, а затем осмотрите целевой узел с помощью веб-инспектора firebug / chrome и выберите любой узел в теге body в iframe jsfiddle и выполните команду "редактировать как HTML", добавьте случайный символ в любом месте в виде строки [не атрибута к domnode, чтобы быть ясным], и "сохранить", стиль применяется. но не до этого. Сказать, что я в замешательстве, значит преуменьшение.

Кто-нибудь может уточнить, что здесь происходит? Благодарю.

Answer 1

Вы можете изменить тип пантомимы на text/html и сделайте следующее:

var parser = new DOMParser()
var doc = parser.parseFromString(markup, 'text/html')
return doc.body.firstChild

Я не тестировал на каждом браузере, но он работает на Chrome и Firefox. Я не вижу причин, по которым это не сработало бы в другом месте.

Answer 2

Немного поздно, но причина в том, что вы проанализировали их, используя text/xml опция, которая означает, что результаты являются узлами XML, к которым не применяется CSS. Когда вы щелкаете правой кнопкой мыши и переходите к "редактировать как HTML", браузер повторно интерпретирует их как HTML, и изменение в элементе вызывает перерисовку, применяя CSS заново.

Я анализирую, используя сравнительно хакерский, но все же определенно работающий метод создания временного элемента и манипулирования свойством innerHTML, заставляя браузер выполнять анализ:

var temp = document.createElement("div")
//assuming you have some HTML partial called 'fragment'
temp.innerHTML = fragment
return temp.firstChild

Что вы отметили в своем jsfiddle. В основном это сводится к выходу DOMParser быть примером XMLDocument когда вы используете text/xml вариант.