Получить следующий и предыдущий элементы можно при помощи свойств nextSibling и previousSibling. Первый и последний дочерние элементы получаются при помощи свойств firstChild и lastChild соответственно. Для получения родительского элемента нужно использовать parentNode:

// получение следующего смежного элемента
var nextElem = elem.nextSibling;

// получение предыдущего смежного элемента
var prevElem = elem.previousSibling;

// получение первого дочернего элемента
var firstNode = elem.firstChild;

// получение последнего дочернего элемента
var lastNode = elem.lastChild;

// получение родительского элемента
var parent = elem.parentNode;

Здесь стоит учесть, что IE и DOM-совместимые браузеры по разному трактуют пробелы между элементами. Если между двумя элементами есть пробелы, то Firefox например вернет указатель на текстовый элемент, в то время как IE пропустит пробел и вернет указатель на следующий за ним элемент. Поэтому лучше использовать следующие функции для получения смежных, дочерних и родительских элементов:

// Получение предыдущего смежного элемента в DOM
function prev(elem){
	do {
		elem = elem.previousSibling;
	} while (elem && elem.nodeType != 1);
	return elem;
}

// Получение следующего смежного элемента в DOM
function next(elem){
	do {
		elem = elem.nextSibling;
	} while (elem && elem.nodeType != 1);
	return elem;
}

// получение первого дочернего элемента
function first( elem ) {
	elem = elem.firstChild;
	return elem && elem.nodeType != 1 ?
		elem.nextSibling : elem;
}

// получение последнего дочернего элемента
function last( elem ) {
	elem = elem.lastChild;
	return elem && elem.nodeType != 1 ?
		elem.previousSibling : elem;
}

// получение родительского элемента
function parent( elem, num ) {
	num = num || 1;
	for ( var i = 0; i < num; i++ )
		if ( elem != null ) elem = elem.parentNode;
	return elem;
}

Эти функции работают как IE, т.е. пропускают имеющиеся между элементами пробелы. Функция parent также может принимать количество уровней, т.е. можно получать не только непосредственный родительский элемент, но и уровнями выше. При необходимости, можно присвоить эти функции ко всем элементам DOM:

HTMLElement.prototype.prev = function() {
	var elem = this;
	do {
		elem = elem.previousSibling;
	} while ( elem && elem.nodeType != 1 );
	return elem;
}

HTMLElement.prototype.next = function() {
	var elem = this;
	do {
		elem = elem.nextSibling;
	} while ( elem && elem.nodeType != 1 );
	return elem;
}

// получение первого дочернего элемента
HTMLElement.prototype.first = function( elem ) {
	var elem = this;
	elem = elem.firstChild;
	return elem && elem.nodeType != 1 ?
		elem.nextSibling : elem;
}

// получение последнего дочернего элемента
HTMLElement.prototype.last = function( elem ) {
	var elem = this;
	elem = elem.lastChild;
	return elem && elem.nodeType != 1 ?
		elem.previousSibling : elem;
}

// получение родительского элемента
HTMLElement.prototype.parent = function( num ) {
	var elem = this;
	num = num || 1;
	for ( var i = 0; i < num; i++ )
		if ( elem != null ) elem = elem.parentNode;
	return elem;
}

// *******
// Пример
document.getElementById("targetDiv").next();
Добавить в закладки:

Оставить комментарий