Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 64
Красиво, конешна, но насколько оно применимо в реальной жизни в свете вот этого ?
ИМХО: В реальной жизни очень даже применимо, InnerHTML конечно же быстрее работает чем W3C DOM, ничего тут не поделаешь.
Я лично решал довольно таки простые задачи и кода генерировать приходилось немного, с проблемами производительности не сталкивался
Я лично решал довольно таки простые задачи и кода генерировать приходилось немного, с проблемами производительности не сталкивался
Я имею ввиду с проблемами производительности при генерации документа средствами javascript не сталкивался :)
С ними сталкивались посетители сайтов. Попробуйте как-нибудь ваше творение на машинке с 500-700MHz P!!!. Такие машинки ещё в строю!
а это уже их проблемы. Наверное глупо говорить "у меня че-та тама тормозит", когда сидишь на железе из прошлого века.
Я как-то работал в крупной фирме (ок. 1000 сотрудников, в 10-ке по России) в сфере торговле радиоэлектронными компонентами. Так вот. Регулярные заказы на несколько десятков тысяч евро делал дяденька на 200 MMX(!!!). Ну не у всех заводов еще комп. парк обновлен:)
Кроме того, не стоит забывать про мобильные устройства, которые еще проигрывают в производительности десктопным компам.
Кроме того, не стоит забывать про мобильные устройства, которые еще проигрывают в производительности десктопным компам.
innerHTML работает быстрее чем DOM. Впервые об этом слышу.
Из этого следует что лучше делать все что можно через InnerHTML? Или у него есть свои недостатки перед DOM методами?
innerHTML не существует в XHTML.
У него читабельность хромает. Но он быстрее. В нормальных браузерах (Firefox/Opera/Safari) разница не так велика и может компенсироваться тем, что потом придётся в отдельный проход находить подэлементы (типа переменной td в последнем примере), но в MS IE разница просто катастрофична: в 30 и более раз! Причём самое ужасное - MS IE 6 и MS IE 7 в этом отношении хуже, чем MS IE 5, так что облегчения в будущем не предвидится...
я стараюсь всегда использовать innerHTML, как-то он мне больше нравится, единственная ощутимая проблема с ним в том, что при сабмите формы обычным методом, элементы, добавленные через innerHTML не передаются с формой. Поэтому в этом случае лучше использовать все таки DOM, либо, как делаю я, отсылать формы AJAX'ом, ибо JS эти элементы видит.
При создании элементов средствами innerHTML - остаётся неизвестным указатель на созданный объект. Для этого придётся прибегать к поиску его в документе.
А средствами DOM мы имеем указатель сразу после создания элемента — var table=document.createElement('table');
А средствами DOM мы имеем указатель сразу после создания элемента — var table=document.createElement('table');
К плюсам innerHTML относится не только скорость, но и простота для разработчика. innerHTML одинаково поддерживают все браузеры. С DOM`ом же у IE (особенно 6ой версии) есть проблемы (например, вставка input type="radio"). Подробнее с ошибками IE можно ознакомиться на Channel9 wiki.
Я вижу только 2 минуса innerHTML:
1. он отсутствует в стандартах. Для меня полностью компенсируется одинаковой поддержкой во всех известных мне графических интернет-браузерах (IE,FF,Opera,Safari,Konqueror).
2. нельзя сразу получить ссылку на созданный элемент. На практике мне несколько раз надо было это сделать. Брал либо через document.getElementById, либо через DOM детей от элемента в который вставляли.
Непрактичность DOM показывает кол-во функций, которые по сути стремятся приблизиться к innerHTML, но используя DOM. Тут, как мне кажется, надо менять стандарт, а не заниматься самоистязанием. Тем более что все основные браузеры уже поддерживают эту функциональность.
Для себя при необходимости вставки нетривиальных DOM-фрагментов я использую innerHTML и текстовые шаблоны, где значения параметрам вида %NAME% подставляется простой заменой подстроки в строке.
Я вижу только 2 минуса innerHTML:
1. он отсутствует в стандартах. Для меня полностью компенсируется одинаковой поддержкой во всех известных мне графических интернет-браузерах (IE,FF,Opera,Safari,Konqueror).
2. нельзя сразу получить ссылку на созданный элемент. На практике мне несколько раз надо было это сделать. Брал либо через document.getElementById, либо через DOM детей от элемента в который вставляли.
Непрактичность DOM показывает кол-во функций, которые по сути стремятся приблизиться к innerHTML, но используя DOM. Тут, как мне кажется, надо менять стандарт, а не заниматься самоистязанием. Тем более что все основные браузеры уже поддерживают эту функциональность.
Для себя при необходимости вставки нетривиальных DOM-фрагментов я использую innerHTML и текстовые шаблоны, где значения параметрам вида %NAME% подставляется простой заменой подстроки в строке.
да, сильно. Особенно радует IE6 - разница почти в 20(!) раз.
Выходит не зря я пользуюсь innerHTML всюду где можно
Выходит не зря я пользуюсь innerHTML всюду где можно
Только, ради бога, не параграф, а абзац. Спасибо.
С помощью jQuery, например, подобное очень просто реализуется. Кроме того в библиотеке море других полезностей и удобств, ради которых не жалко подключить 20-килобайт кода, а не писать кучу своих функций, реализующих то, что уже есть реализованное.
только написать хотел :)
речь то шла не о библиотеке, а о реализации DOM helper-а и только оного, иначе можно приводить до сотни разных библиотек, включающих в себя работу с DOM. Наверное есть реализации, в которых работа с DOM происходит удобнее и проще, чем в jQuery.
А вот и не понятно, как с помощью jQuery можно реализовать те примеры, которые приводит автор. Не просто через вставку HTML, типа:
$('<div id="new" style="background:#fff""><p align="center">вступление : <a href="http://ua.fishki.net/picso/kotdavinchi.jpg">картинка</a> : конец</p></div>').appendTo('#destination');
- потому что так, семантика смешивается с контентом. А чтобы именно через создание DOM модели, как это сделано у автора?
$('<div id="new" style="background:#fff""><p align="center">вступление : <a href="http://ua.fishki.net/picso/kotdavinchi.jpg">картинка</a> : конец</p></div>').appendTo('#destination');
- потому что так, семантика смешивается с контентом. А чтобы именно через создание DOM модели, как это сделано у автора?
$( "<div>" );
А теперь можно к нему добавлять аттрибуты, вставить контент и т.д.
А теперь можно к нему добавлять аттрибуты, вставить контент и т.д.
Верно, после твоего ответа решил поиграться и написать все примеры автора через jQuery, чтобы было с чем сравнивать, итак, что у меня получилось:
Например, создаём абзац текста:
$('<p>').append('Farewell, Love!').appendTo('#destination');
Или div с параграфом и ссылкой внутри него:
$('<div>')
.attr('id','new')
.css('background','#fff')
.append(
$('<p>')
.attr('align','center')
.append('вступление :')
.append(
$('<a>')
.attr('href','http://ua.fishki.net/picso/kotdavinchi.jpg')
.append('картинка')
)
.append(': конец')
).appendTo('#destination');
Или вот, делаем таблицу:
$('<table>').attr({id:'ugly',cols:3}).append(
$('<tbody>')
.append(
$('<tr>')
.append(
$('<td>').attr('width','10%').append('hello')
)
.append(
$('<td>').addClass('special2').append('everywhere')
)
)
).appendTo('#destination');
На мой взгляд ,смотрится не хуже, а для каких-то моментов наверняка и более надежно, с точки зрения кросс-браузерности.
Например, создаём абзац текста:
$('<p>').append('Farewell, Love!').appendTo('#destination');
Или div с параграфом и ссылкой внутри него:
$('<div>')
.attr('id','new')
.css('background','#fff')
.append(
$('<p>')
.attr('align','center')
.append('вступление :')
.append(
$('<a>')
.attr('href','http://ua.fishki.net/picso/kotdavinchi.jpg')
.append('картинка')
)
.append(': конец')
).appendTo('#destination');
Или вот, делаем таблицу:
$('<table>').attr({id:'ugly',cols:3}).append(
$('<tbody>')
.append(
$('<tr>')
.append(
$('<td>').attr('width','10%').append('hello')
)
.append(
$('<td>').addClass('special2').append('everywhere')
)
)
).appendTo('#destination');
На мой взгляд ,смотрится не хуже, а для каких-то моментов наверняка и более надежно, с точки зрения кросс-браузерности.
На сколько я понимаю, то при вставке кода через innerHTML мы не сможем потом даже сделать элементарный getelementbyid... или я чтото путаю... так что считаю вышеприведенный метод вполне применимым на практике
Хм. Такие вещи уже давно есть во многих фреймворках, в mootools например.
Так что не надо благодарить за идею Ивана Курманова, вот.
Так что не надо благодарить за идею Ивана Курманова, вот.
Форматирование кода полезная штука, чесслово.
совсем не ново.
То, что это не ново - видно по линку - http://ahinea.com/2006/04/14/javascript-…, который кричит, что это было еще в 2006 году в апреле.
Шото я не вьехал что вы тут обсуждаете. Производительность каждый может сам проверить что работает быстрее у себя на компах каждый. Сам пост - тоже не врубился что он за америку открывает.
.class - атрибут не работает наверное не почему-то, а потому что его нужно называть .className
.class - атрибут не работает наверное не почему-то, а потому что его нужно называть .className
А почему, скажите мне пожалуйста, мой пост обязательно должен открывать Америку?
Я просто написал о вещи, которой сам пользуюсь, это вовсе не тайна что статья с этой функцией написана еще в 2006 году, и вполне возможно, что кто-то сочтет приемлимым и даже очень удобным использование такой функции. Почему бы нет?
Мне показалось, что это интересная для Хабра статья, именно такая, какими они и должны здесь быть. О полезной, не банальной и не широко известной вещи, вроде-бы не боян, а если здесь сидят одни гуру джаваскрипта, то зачем вообще что-то читать?
Пишите лучшие статьи, я с удовольствием почитаю! :)
Я просто написал о вещи, которой сам пользуюсь, это вовсе не тайна что статья с этой функцией написана еще в 2006 году, и вполне возможно, что кто-то сочтет приемлимым и даже очень удобным использование такой функции. Почему бы нет?
Мне показалось, что это интересная для Хабра статья, именно такая, какими они и должны здесь быть. О полезной, не банальной и не широко известной вещи, вроде-бы не боян, а если здесь сидят одни гуру джаваскрипта, то зачем вообще что-то читать?
Пишите лучшие статьи, я с удовольствием почитаю! :)
По названию статьи подумал, что тут будет обсуждаться document.createDocumentFragment - полезная штука, подглючивающая в ФФ.
бррр... велосипед...
prototype:
The old way
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setAttribute('href', '/foo.html');
a.appendChild(document.createTextNode("Next page"));
The new way
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
Спасибо за статью! Несколько замечаний:
setAttribute с некоторыми атрибутами глючит в IE, поэтому следует вместо этого использовать просто el[i] = attributes[i].
class не работает, потому что это в JavaScript зарезервированное слово. Вместо него можно писать 'class' (в кавычках) или className.
И, кстати, за идею стоит благодарить Томаса Фухса, создателя библиотеки Script.aculo.us (в последствии этот функционал перекочивал в сам Prototype).
И еще. Хорошо бы окружить куски кода тагом pre, чтобы идентацию сохранить, а то так малочитабельно.
setAttribute с некоторыми атрибутами глючит в IE, поэтому следует вместо этого использовать просто el[i] = attributes[i].
class не работает, потому что это в JavaScript зарезервированное слово. Вместо него можно писать 'class' (в кавычках) или className.
И, кстати, за идею стоит благодарить Томаса Фухса, создателя библиотеки Script.aculo.us (в последствии этот функционал перекочивал в сам Prototype).
И еще. Хорошо бы окружить куски кода тагом pre, чтобы идентацию сохранить, а то так малочитабельно.
Спасибо, совсем забыл про pre
насколько я помню, это только id (не знаю уж причины к сожалению), class (так как используется для других целей, а для указания класса нужен className) и style (некроссбраузерно и по моему удобнее делать через хеш стилей)
Нет, id нормально работает. Не работает еще for по понятной причине - нужно htmlFor.
А вот style действительно приходится отдельно в цикле разбирать внутри той функции, передавая его как хеш.
А вот style действительно приходится отдельно в цикле разбирать внутри той функции, передавая его как хеш.
всегда пользовался и буду пользоватся innerHTML. Лично мне гораздо удобнее читать код с innerHTML, чем с созданием элементов способом автора.
Статья полезная, спасибо, хотя я согласен с мнением читателей: это уже организовано в JS библиотеках, как JQuery или mootools.
Но не в этом суть!
Я бы хотел напомнить что есть раздел JavaScript и мне кажется, что логичнее было бы разместить эту статью туда... Но хозяин - барин :)
А так, хаброчеловеки, обращайте внимание на коллективные блоги, а то есть некоторая неразбериха между блогами "Ajax", "Web-разработка" и "JavaScript" (дублирующиеся темы новостей Ext тому пример).
Спасибо!
Но не в этом суть!
Я бы хотел напомнить что есть раздел JavaScript и мне кажется, что логичнее было бы разместить эту статью туда... Но хозяин - барин :)
А так, хаброчеловеки, обращайте внимание на коллективные блоги, а то есть некоторая неразбериха между блогами "Ajax", "Web-разработка" и "JavaScript" (дублирующиеся темы новостей Ext тому пример).
Спасибо!
Подобную вещь сделал давно и активно пользуюсь
Украду:
- переменное кол-во аргументов; я "детей" указывал в массиве третьим параметром
Вам посоветую:
- стили тоже может быть стоит в массив загонять? я так делаю - удобнее и практичнее
- class, for (label for="..."), как уже выше сказали, надо заключать в кавычки/апострофы - это правильнее, к тому же это позволит убрать toLowerCase =)
- насколько помню (сейчас лениво проверять) id надо тоже отдельно обрабатывать - не через setAttribute, а прямым назначением
- у меня ф-ия называется node, имхо более соответствует
Украду:
- переменное кол-во аргументов; я "детей" указывал в массиве третьим параметром
Вам посоветую:
- стили тоже может быть стоит в массив загонять? я так делаю - удобнее и практичнее
- class, for (label for="..."), как уже выше сказали, надо заключать в кавычки/апострофы - это правильнее, к тому же это позволит убрать toLowerCase =)
- насколько помню (сейчас лениво проверять) id надо тоже отдельно обрабатывать - не через setAttribute, а прямым назначением
- у меня ф-ия называется node, имхо более соответствует
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
JavaScript: создание DOM фрагментов