Главная

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

2012-05-21 в 17:14, admin, рубрики: "маленьким", class, dom, javascript, tag, метки: "маленьким", class, dom, javascript, tag

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

выбирать элементы по атрибуту ID;
выбирать элементы по атрибуту NAME;
выбирать элементы определенного тэга;
выбирать элементы определенного класса.

Начнем с функции получения элемента по его ID:
Хм…Назовем ее…GetElementById=>GetById=>GetId=>gi

function gi(id){
	return document.getElementById(id);
}

Здесь все просто; передаем что нужно – получаем то, что полезно.

Подобным способом напишем следующую функцию.

function gn(name){
	return document.getElementsByName(name);
}

Теперь напишем функцию получения элементов определенного тэга:

function gt(tag, el){
	return (el || document).getElementsByTagName(tag);
}

Нюанс этой функции заключается в том, что второй необязательный параметр указывает, где именно стоит искать нужные тэги. В случае его отсутствия поиск будет вестись по всей «яблоне».

Функция для получения элементов нужного класса выглядит чуточку сложнее, потому что не все браузеры предоставляют эту «родную возможность». Для этого реализуем еще одну полезную функцию, которая возьмет на себя всю работу, связанную с манипуляцией атрибутами «яблока Антоновки».

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

Давайте построчно разберем код этой функции:

Функция имеет необязательный параметр value, при наличие которого элемент получит новый атрибут с именем at и значением value.

at = {'for': 'htmlFor', 'class': 'className'}[at] || at;

Так как в JavaScript слова «for» и «class» являются частью языка, чтобы не возникало «непредвиденных ситуаций», при обращении к одноименным атрибутам элемента, рекомендуется использовать: className, а не ~~class~~, htmlFor, а не ~~for~~. Поэтому, если переменная at будет равна одному из «нежелательных значений», то ее значение будет заменено на более дружелюбное.
Если мы не передавали новое значение атрибута, то возвращаем текущее, где el[at] – это быстрый способ обращения к атрибуту элемента.
Соответственно иначе устанавливаем новое значение атрибуту.

Ну и основная функция…GetElementsByClass=>GetByClass=>GetClass=>gc

function gc(name, type) {
	var r = [];
	var re = new RegExp("(^|\s)" + name + "(\s|$)");
	var e = (type) ? gt(type) : ((navigator.userAgent.indexOf("MSIE") >= 0) ? document.all : gt("*"));
	for ( var j = 0; j < e.length; j++ ){
		if (re.test(attr(e[j], "class"))){
			r.push( e[j] )
		}
	}
	return r;
}

Спокойно, на самом деле функция довольно проста. Разбираем:

Первый параметр функции – название класса, второй же – это тип элементов, среди которых нужно искать. Например: gc(“hello”, “div”) – будут найдены все div’ы страницы, с классом “hello”.
Далее разбираем регулярное выражение:
```
"(^|\s)" + name + "(\s|$)"
```
Так как класс у элемента может быть составным, например:
```
<div class=”hello world i am tratotui ”>hello</div>
```
Этот div попадет в список элементов, имеющих класс “hello”, благодаря нашему регулярному выражению.
Если переменная type не указана, то переменная e получит все «яблоки нашей Антоновки». Причем для получения «всех яблок» в IE используется выражение document.all, а в других браузерах достаточно выполнить функцию № 3: gt(“*”). * — любой тэг документа.
Иначе, если type существует, то выполняем функции № 3.
Ну а дальше семечки.
Перебираем в цикле все элементы, если класс элемента удовлетворяем регулярному выражению, то добавляем его в список r.