JavaScript для «маленьких». DOM (часть 4)

Ну что же продолжаем дальше. Из предыдущего поста можно почерпнуть много полезных замечаний, которые относятся к разряду «четче говори». Могу сказать, что критика для меня – это всегда плюс (конечно, если она без фанатизма). Не сказав в первом посте, что по истечению небольшого курса статей у нас получится своя «библиотечка», я тем самым забыл про корректные названия функций.
Давайте сначала исправил этот нюанс, и дадим нашим функциям более понятные названия:

• gi=>getId;
• gt=>getTag;
• gn=>getName;
• gc=>getClass.

Вот так все ничего.
Теперь давайте рассмотрим, как можно создать новое «яблоко» программно. В JavaScript для этого есть метод createElement, но если вы работаете с HTML-страницами, точного типа контента (XHTML), то следует использовать createElementNS. Итак давайте реализуем функцию newElem:

function newElem(tag){
   var elem = document.createElementNS ? 
   document.createElementNS( 'http://www.w3.org/1999/xhtml', tag ) :
   document.createElement( tag );

	return elem;
}

var ndiv = newElem('div'); // создает новый div

Но я хотел бы, чтобы новый элемент создавался с нужными мне атрибутами. Это было бы очень удобно. Поэтому давайте немного изменим нашу функцию:

function newElem (tag, params){
	 params = params || {};
	 var elem = document.createElementNS ?
		document.createElementNS( 'http://www.w3.org/1999/xhtml', tag ) :
		document.createElement( tag );

	for(var pr in params){
		attr(elem, pr, params[pr]);
	}

	return elem;
}
var t = newElem('div',{
	class: 'hello',
	id: 'tratotui',
	style: 'border: 1px solid red'
});// будет создан новый div с классом 'hello', id равным 'tratotui' и однопиксельной красной рамкой

Кстати, для того чтобы изменять атрибут style у элемента, нужно немного изменить функцию attr:

function attr(el, at, value){
	at = {'for': 'htmlFor', 'class': 'className'}[at] || at;
	if(!value){
		return el[at] || el.getAttribute(at) || '';
	}else{
	   if(at == 'style'){el.style.cssText = value; return;}
		el[at] = value;
       if (el.setAttribute)	el.setAttribute(at, value);
	} 
}

Это изменение связано с тем, что свойство style входит в список «непредвиденных ситуаций», и поэтому рекомендуется использовать cssText.

Создать «яблоко» - это не значит повесить его на «ветку».

Для того, чтобы новоиспеченный элемент появился на странице браузера нужно воспользоваться методом appendChild. Синтаксис у него такой: куда.appendChild(новыйУзел);
Давайте напишем эту функцию:

function append(el, where){
	(where || document.body).appendChild(el);
}
var t = newElem('div',{
	class: 'hello',
	id: 'tratotui',
	style: 'border: 1px solid red'
});
append(t);// div будет добавлен в конец body

Бывает такая ситуация, когда нужно добавить «яблоко перед другим яблоком». Для этого у нашей Антоновки есть метод insertBefore. Синтаксис у него такой: родительПредыдущегоУзла.insertBefore(новыйУзел, предыдущийУзел);
Вот сама функция:

function before(par, bef, el){
	if(!el){
		el = bef;
		bef = par;
		par = parent(bef);
	}
	par.insertBefore(el, bef);
}

Рассмотрим на примере:

<ul>
	<li>Один</li>
	<li id=”three”>Три </li>
</ul>
<script type="text/javascript">
var li = newElem('li',{
	style: 'background: #d3d3d3',
	id: 'two'
});
before(getId('three'), li);// будет вставлен новый элемент списка перед элементом с id равным 'three'
</script>

Ну и напоследок.
Иногда бывает полезно и «срывать яблоки», то есть удалять узлы. Синтаксис такой же как и у appendChild.

function remove(el, par){
	(par || document.body).removeChild(el);
}

Автор: tratotui