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

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

Но для начала повторим пройденный материал ^[1] и условимся, что искать будем элементы, отличные от простых текстовых узлов. И начнем с функции, возвращающая родительскую «ветку яблока»:

function parent(el, n){
	n = n || 1;
	for(var i = 0; i < n; i++){
		if(el.parentNode){
			el = el.parentNode;
		}
	}
	return el;
}

Функция, принимает два параметра:

1. Элемент, для которого необходимо получить «родительскую ветку»
2. Коэффициент углубление в список родительских узлов «яблока»(необязательный параметр)

<p id="p_">Hello <b id="b_">my</b> world!</p>
<!--
Много-много кода
-->
<script type="text/javascript">
parent(document.getElementById("b_")); // вернет ссылку на элемент <p id="p_">
</script>

Теперь давайте побудем в виде «яблока», и напишем функции, которые помогут перемещаться к следующему и предыдущему «яблоку ветки». Итак, пишем:

function next(el){
	do{
		el = el.nextSibling;
	}
	while(el && el.nodeType != 1);
	return el;
}
function prev(el){
	do{
		el = el.previousSibling;
	}
	while(el && el.nodeType != 1);
	return el;
}

Из предыдущей статьи, мы уже знаем, что «текстовые яблоки» имеют значение свойства nodeType равное 3. И для того, чтобы отсеять такие узлы, мы указываем условие в цикле.

Если существует элемент, и свойство элемента nodeType не равно 1, то соответственно этот узел является текстовым и поэтому, возвращаемся в начало цикла и ищем следующий элемент .

do{
	el = el.nextSibling;
}
while(el && el.nodeType != 1);

<p id="p_"><u id="u_">Hello</u><b id="b_"> my</b> world!</p>
<!--
Много-много кода
-->
<script type="text/javascript">
prev(document.getElementById("b_")); // вернет ссылку на элемент <u id="u_">
next(document.getElementById("u_")); // вернет ссылку на элемент <b id="b_">
</script>

И на последок давайте представим себя в виде «ветки», и напишем функции, которые предоставляют доступ к первому и последнему «яблоку ветки».

function fChild(el){
	el = el.firstChild;
	return el && el.nodeType != 1 ? next(el) : el;
}

function lChild(el){
	el = el.lastChild;
	return el && el.nodeType != 1 ? prev(el) : el;
}

Поясню момент, связанный с условием:

el && el.nodeType != 1 ? next(el) : el;// функция fChild
el && el.nodeType != 1 ? prev(el) : el;// функция lChild

Смысл такой же, как и в функции prev и next:

Если элемент является текстовым, то уже начинаем перемещаться от «яблока к яблоку»

.

<ul id="ul_">
	<li>One</li>
	<li>Two</li>
</ul>
<!--
Много-много кода
-->
<script type="text/javascript">
fChild(document.getElementById("ul_")); // вернет ссылку на элемент <li>One</li>
lChild(document.getElementById("ul_")); // вернет ссылку на элемент <li>Two</li>
</script>

Вот такие простенькие, но в тоже время эффективные функции помогают совершать линейное перемещение по «веткам Антоновки».

P.S.

Для тех, кто не знаком с функцией getElementById могу сказать, что она возвращает ссылку на элемент, у которого присутствует атрибут id равный значению, передаваемому функции. Более подробнее с нелинейным перемещением по DOM мы познакомимся в следующей статье.

Автор: tratotui