Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Создание фрагмента DOM из HTML (Denis Usenko)
Author Message
Denis Usenko
Участник форума



Joined: 06 Feb 2006
Posts: 54
Карма: 13
   поощрить/наказать


PostPosted: Thu Jul 02, 2009 4:45 am (написано за 35 минут 6 секунд)
   Post subject: Создание фрагмента DOM из HTML
Reply with quote

Часто нужно создавать куски DOM из строкового html, т.е. делать что-то примерно следующее:
Code (JavaScript): скопировать код в буфер обмена
function html2dom (html) {
    var el = document.createElement('span');
    el.innerHTML = html;
    return el
};
я до недавних пор использовал схожий код, но лишний оборачивающий span часто мешает, а в идеале хочется получать что-то вроде DocumentFragment. Можно конечно пробежать по непосредственным потомкам элемента добавляя их в DOM-фрагмент:
Code (JavaScript): скопировать код в буфер обмена
    var wrapper = document.createElement('span');
    wrapper.innerHTML = html;
    var node = wrapper.firstChild, container = document.createDocumentFragment();
    while(node) {
        container.appendChild(node);
        node = node.nextSibling;
    };
    return container;
Но лишних телодвижений во время работы не очень хочется. Решил попочитать спеки и погуглить на предмет DocumentFragment, какие функи его возвращают.
Для "правильных" браузеров решением может быть работа с Range: на этапе инициалзации нужно подготовить объект Range, и затем чтобы получить DOM-фрагмент из html испольовать метод Range createContextualFragment.
Для msie получилось использовать запись в outerHTML элемента parentNode которого указывает на созданный заранее DocumentFragment:
Code (JavaScript): скопировать код в буфер обмена
    var aFragment = document.createDocumentFragment(),
        aElement = document.createElement('span');

    aFragment.appendChild(aElement);
    function html2dom(html) {
        aFragment.appendChild(aElement); //
        aElement.outerHTML = html;
        return aFragment
    };
В итоге в качестве эксперимента я обновил свой старый код, и если новый вариант не обнаружит багов (я например опасаюсь за outerHTML) то его и оставлю:
Code (JavaScript): скопировать код в буфер обмена
(function (){

    var

    doc = document,
    aFragment = doc.createDocumentFragment(),
    aElement = doc.createElement('span'),
    aRange = doc.createRange && doc.createRange();

    aFragment.appendChild(aElement); //
    aRange && aRange.selectNodeContents(aElement); //

    String.prototype.toDOM = aRange ?
    function () {
        return aRange.createContextualFragment(this);
    } :
    function () {
        aFragment.appendChild(aElement);
        aElement.outerHTML = this;
        return aFragment
    };

})();

function toDomTest (html) {
    var fragment = html.toDOM();
    document.body.appendChild(fragment);
    document.body.appendChild(document.createTextNode(" (nodeName: " + fragment.nodeName + ")"));
};

onload = function () {

    toDomTest("<br><i>qwe</i>")
    toDomTest("<br><s>asd</s>")
    toDomTest("<br><u>zxc</u>")
};
правка: комментарии

Last edited by Denis Usenko on Thu Jul 02, 2009 9:30 pm; edited 1 time in total
Back to top
View user's profile Send private message
Александр Михалицын
Модератор



Joined: 23 May 2008
Posts: 1299
Карма: 83
   поощрить/наказать


PostPosted: Thu Jul 02, 2009 5:35 am (спустя 49 минут; написано за 1 минуту 26 секунд)
   Post subject:
Reply with quote

Denis Usenko,
ух ты...
Очень интересное решение...

[+]
Только это, почему не в складе?
Back to top
View user's profile Send private message Send e-mail
Denis Usenko
Участник форума



Joined: 06 Feb 2006
Posts: 54
Карма: 13
   поощрить/наказать


PostPosted: Thu Jul 02, 2009 7:40 am (спустя 2 часа 5 минут; написано за 2 минуты 5 секунд)
   Post subject:
Reply with quote

Quote:
Только это, почему не в складе?
Ну пока это эксперимент, надо чтоб отлежалось )), и да я забыл написать: надеюсь может кто что дельное подскажет насчет msie (не нравится мне способ с outerHTML)?
Back to top
View user's profile Send private message
Александр Михалицын
Модератор



Joined: 23 May 2008
Posts: 1299
Карма: 83
   поощрить/наказать


PostPosted: Wed Aug 19, 2009 6:25 pm (спустя 1 месяц 17 дней 10 часов 45 минут; написано за 16 секунд)
   Post subject:
Reply with quote


М

Перенесено из форума: Разное :: JavaScript.
Перенесено в форум: Склад готовых решений :: JavaScript.

Переношу, отлежалось уже достаточно. (-:
Back to top
View user's profile Send private message Send e-mail
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML