Получить следующий и предыдущий элементы можно при помощи свойств 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();