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

innerHTML vs DOM (Tokolist)
Author Message
Tokolist
Заглянувший



Joined: 07 Jul 2009
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Tue Jul 07, 2009 12:21 pm (написано за 8 минут 45 секунд)
   Post subject: innerHTML vs DOM
Reply with quote

Здравствуйте!

Необходимо динамически создать и вставить кусок HTML-кода в body.
Согласно этой статьи (www.quirksmode.org/dom/innerhtml.html), innerHTML выигрывает в скорости, но с другой стороны, в пересмотренных же мной нескольких клонах LightBox используется DOM, т.е. createElement и т.д. innerHTML еще отличается компактностью, удобством редактирования и восприятия.
Подскажите, пожалуйста, какой вариант все таки лучше:
Code (JavaScript): скопировать код в буфер обмена
var block = document.createElement('div');
block.innerHTML = '<some html="code"></some>';
document.body.appendChild(block);
или
Code (JavaScript): скопировать код в буфер обмена
var block = document.createElement('div');
// много createElement, setAttribute, appendChild
document.body.appendChild(block);
Back to top
View user's profile Send private message
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Tue Jul 07, 2009 4:32 pm (спустя 4 часа 11 минут; написано за 24 секунды)
   Post subject:
Reply with quote

Tokolist, innerHTML не всегда корректно себя ведет.
Back to top
View user's profile Send private message
Denis Usenko
Участник форума



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


PostPosted: Wed Jul 08, 2009 10:02 am (спустя 17 часов 29 минут; написано за 5 минут 4 секунды)
   Post subject:
Reply with quote

Если Вы не работаете с xhtml, то все будет в порядке. А так, используйте то, что больше подходит в каждой ситуации. Большие куски html кода в javascript уродуют код, ухудшают читаемость и т.д. Но в любом случае полностью отказываться от него глупо и сложновыполнимо. Иногда можно использовать подобный подход:
Code (JavaScript): скопировать код в буфер обмена
function JSON2DOM(r){

    var k, v, t, p, e, i = 0, d = document;

    if(typeof r != 'object') return d.createTextNode(String(r));

    e = d.createElement(r.tag || r._);

    if(e) for(k in r) {
        v = r[k];
        t = typeof v;
        switch(k.toLowerCase()) {
            case 'tag'      : case '_' : break;
            case 'text'     : case 't' : e.appendChild( d.createTextNode(v) ); break;
            case 'style'    : case 's' : for(p in v) e.style[p] = v[p]; break;
            case 'class'    : case 'c' : e.className = v; break;
            case 'children' : case '$' : while(p = v[i++]) e.appendChild(JSON2DOM(p)); break;
            default         :
                t = t == 'function';
                k.slice(0,2) != 'on' ? e.setAttribute(k,v) : t && ( e[k] = v );
                break;
        }
    }
    return e
}
Code (JavaScript): скопировать код в буфер обмена
var json_dom_test = JSON2DOM(
    {
        _: 'div',
        s: {border: '1px solid red', padding: '1em'},
        $: [
            {_:'div', t:' block 1 begin', c:'test-class'},
            'inline 1', ' (  : ', 123, ' ) ',
            {_:'b', t:' bold 1'},
            {_:'i', t:' italic 1'},
            {_:'b',
                $: [
                    {_:'i', t:' italic 1', blueText:'yes'},
                    ' (---- inline 2 ----)',
                    {_:'span', t:' span 1'},
                    {_:'span',
                        t:' clickable text',
                        s:{color:'red',cursor:'pointer'},
                        onclick:function(){alert(this.textContent || this.innerText)},
                        onmouseover:"qwe"
                    }
                ]
            },
            {_:'span',t:' block 1 end'}
        ]
    }
);

onload = function (){
    var d = document.getElementsByTagName('body')[0];
    d.appendChild(json_dom_test);
}
Back to top
View user's profile Send private message
Tokolist
Заглянувший



Joined: 07 Jul 2009
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Wed Jul 08, 2009 3:11 pm (спустя 5 часов 8 минут; написано за 4 минуты 34 секунды)
   Post subject:
Reply with quote

dimagolov wrote:
Tokolist, innerHTML не всегда корректно себя ведет.
А в каких именно случаях? Или где можно об этом почитать?
Denis Usenko wrote:
Если Вы не работаете с xhtml, то все будет в порядке.
Скрипт должен быть универсальным, т.е. работать в любом браузере при любом доктайпе и даже желательно в квиркс моде.
А какие именно проблемы могут возникнуть при работе с xhtml?
Denis Usenko wrote:
Иногда можно использовать подобный подход:
Интересный подход. Спасибо, возьму на заметку.
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Wed Jul 08, 2009 3:46 pm (спустя 35 минут; написано за 2 минуты 44 секунды)
   Post subject:
Reply with quote

Tokolist
Сериализация документа нигде не стандартизована и, по сему, каждый браузер считает своим долгом сделать это по-своему. Главный подводный камень - скармливание innerHTML из одного браузера другому. Т.о., никогда нельзя сохранять результат innerHMTL в базе (или ещё где) с целью последующего использования.
А в остальном - ничего страшного нету, кроме ошибки в IE при попытке через innerHTML формировать таблицы.
Back to top
View user's profile Send private message
Tokolist
Заглянувший



Joined: 07 Jul 2009
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Fri Jul 10, 2009 3:48 pm (спустя 2 дня 2 минуты; написано за 3 минуты 30 секунд)
   Post subject:
Reply with quote

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

Если при тестировании багов не обнаружится на нем и остановлюсь, иначе перейду на DOM.

Всем спасибо за ценную информацию!
Back to top
View user's profile Send private message
Cr@ZyBoY
Guest





Карма: 388
   поощрить/наказать


PostPosted: Fri Jul 10, 2009 5:49 pm (спустя 2 часа 37 секунд; написано за 2 минуты 26 секунд)
   Post subject:
Reply with quote

В LightBox'ах и других подобных скриптах используются DOM-методы, потому что innerHTML убивает все обработчики событий.
Пример:
Code (html): скопировать код в буфер обмена
<p (december.com/html/4/element/p.html) id="para"> (december.com/html/4/element/.html)
   <span (december.com/html/4/element/span.html) id="clickspan"> (december.com/html/4/element/.html)This is clickable.</span>
   But this is not.
</p>

<script (december.com/html/4/element/script.html) type="text/javascript"> (december.com/html/4/element/.html)
var span = document.getElementById("clickspan");
span.onclick = function() {
   alert("You clicked the span!");
}
//var p = document.getElementById("para");
//p.innerHTML += " Some extra text";
</script>
Сначала запустите скрипт так, а потом раскомментируйте те две строчки.

Так что если вы собираетесь назначать созданным элементам обработчики событий, используйте DOM-методы.
Back to top
Tokolist
Заглянувший



Joined: 07 Jul 2009
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Mon Jul 13, 2009 7:12 pm (спустя 3 дня 1 час 23 минуты; написано за 25 секунд)
   Post subject:
Reply with quote

Да, это важный момент. Спасибо!
Back to top
View user's profile Send private message
Tokolist
Заглянувший



Joined: 07 Jul 2009
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Thu Jul 16, 2009 11:24 pm (спустя 3 дня 4 часа 12 минут; написано за 2 минуты 17 секунд)
   Post subject:
Reply with quote

Вот еще случайно наткнулся на Практический JS: проблемы innerHTML (habrahabr.ru/blogs/webdev/31413/)

В innerHTML еще и проблемы с безопасностью и утечками памяти.
В итоге решил однозначно остановиться на DOM.
Back to top
View user's profile Send private message
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