Web-разработка: JavaScript: создание DOM фрагментов
Если приходилось когда-нибудь писать JavaScript и приходилось в JavaScript’е писать что-то вроде:
var p = document.createElement( "p" );
p.appendChild( document.createTextNode( "Настоящий рыба фиш." ) );
var div = document.createElement( "div" );
div.setAttribute( 'id', 'new' );
div.appendChild( p );
то это может быть вам полезно.
Проблема: когда создаёшь более, чем один элемент, вложенные друг в друга, код становится очень сложным.
Предлагаю простой инструмент решения задачи — функцию create() (исходник ниже). Например, создаём параграф текста:
var el = create( "p", { }, "Farewell, Love!" );
Или div с параграфом и ссылкой внутри него:
var div = create( "div", { id: "new", style: "background:#fff" },
create( "p", { align: 'center' },
"вступление : ",
create( 'a', { href: "http://ua.fishki.net/picso/kotdavinchi.jpg" },
"картинка" ),
" : конец" )
);
Или вот, делаем таблицу:
var holder = document.getElementById( "holder2" );
var table;
var td;
holder.appendChild(
table =
create( "table", {id: 'ugly', cols:3},
create( "tbody", {},
create( "tr", {},
create( "td", { width: '10%' },
"hello" ),
td =
create( "td", { style: 'background: #fcc' },
"there" ),
create( "td", { Class: 'special2' }, "everywhere" )
)
)
)
);
Обратите внимание:
1. IE требует tbody элемент, иначе отказывается показывать таблицу.
2. Аттрибут class с чем-то конфликтует, поэтому приходится писать его как Class. Кажется, на результат это влияния не оказывает.
3. table = и tr = в примере позволяют сохранить созданные вложенные объекты для дальнейшей работы с ними.
4. Этот код работает и в IE, и в Mozilla, и в Opera.
Сама функция
function create( name, attributes ) {
var el = document.createElement( name );
if ( typeof attributes == 'object' ) {
for ( var i in attributes ) {
el.setAttribute( i, attributes[i] );
if ( i.toLowerCase() == 'class' ) {
el.className = attributes[i]; // for IE compatibility
} else if ( i.toLowerCase() == 'style' ) {
el.style.cssText = attributes[i]; // for IE compatibility
}
}
}
for ( var i = 2;i < arguments.length; i++ ) {
var val = arguments[i];
if ( typeof val == 'string' ) { val = document.createTextNode( val ) };
el.appendChild( val );
}
return el;
}
За идею следует благодарить Ивана Курманова,
Оригинальная статья с работающими примерами: http://ahinea.com/2006/04/14/javascript-…
- Уроки французского: Практический CSS/JS: уменьшаем загрузку страницы Примечание: ниже находится перевод двух близких статей ("Delay loading your print CSS" и "JS includes — the saga continues…") по оптимизации загрузки страницы при наличии нескольких файлов стилей или скриптов.У вас есть два вызова CSS-файлов на странице, например:где первый используется для отображения страницы на экране монитора, а второй — для предварительного просмотра и печати. Замечательно.Проблема в том, что когда дело касается производительности, то браузер не отображает любу
- Уроки французского: Практический CSS/JS: уменьшаем время загрузки страницы Примечание: ниже находится перевод двух близких статей ("Delay loading your print CSS" и "JS includes — the saga continues…") по оптимизации загрузки страницы при наличии нескольких файлов стилей или скриптов.У вас есть два вызова CSS-файлов на странице, например:где первый используется для отображения страницы на экране монитора, а второй — для предварительного просмотра и печати. Замечательно.Проблема в том, что когда дело касается производительности, то браузер не отображает любу
- Web-разработка: Практический JS: ускоряем обработку событий Примечание: ниже перевод статьи "Event delegation without a JavaScript library", посвященной обзору методов по назначению обработчиков событий в JavaScript и их возможной оптимизации, она дополнена моими комментариями и практической частью.Большинство статей и примеров, которые я видел в последнее время по переопределению событий, основывались на какой-либо распространенной библиотеке. Например, в своей хорошо известной статье Chris Heilmann применяет YUI-библиотеку, а в прошлом месяце Dan Webb
- Web-разработка: jQuery для JavaScript-программистов Примечание: ниже расположен перевод статьи "jQuery for JavaScript programmers", в которой автор высказывает свое мнение об этой библиотеке, ориентируясь, в первую очередь, на продвинутых программистов, и приводит несколько десятков примеров ее использования.Когда jQuery увидела свет в январе 2006, я подумал: «очередная красивая игрушка». Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей (подробнее о ней в моей заметке getElementsBySelector), но использование цепочек преобразов
- JavaScript: Объекты в JavaScript Очередная статья для новичков, наставляющая на верный путь в разработке своих приложений на Javascript. Javascript, помимо стандартных возможностей, предоставляет массу способов использовать объектно-ориентированное программирование. Для этого существуют следующие способы: Оператор newЛитеральная нотацияКонструкторы объектовПрототипыАссоциативные массивыИспользуем оператор new Это, наверное, самый легкий способ создания объекта. Вы просто создаете имя объекта и приравниваете его к новому объект