690
 

Получение смежных, дочерних и родительского элементов.

Получить следующий и предыдущий элементы можно при помощи свойств 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();
Добавить в закладки:
Maklay.com - Большой каталог товаров для спорта и активного отдыха

Комментарии на “Получение смежных, дочерних и родительского элементов.”

  1. Спасибо, как раз нашел с первого раза, искал, про дочерние элементы. Смотрю на топики очень интересно, особенно тема Mootools. Добавил в избранное.

  2. Спасибо за ясное разъяснение, и работоспособный код! Редкое сочетание :)

  3. Ник Дизель 21 февраля 2009 в 1:48

    По-моему здеся ошибочка в коде ))
    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;
    }
    функция принимает параметр elem … который потом переопределяеться как this … я думаю это просто опечатка ))… спасибо автору за полезную статью 5+

  4. @Ник Дизель
    Да, действительно, вы правы. И аргумент elem в таком случае вообще не нужен.

  5. Вы бы указали хоть, откуда код берете… Взято из книги John Resig: Pro JavaScript Techniques

  6. Не думаю что это важно, я из разных источников брал – книги, блоги и пр. Не всегда помню что и откуда.

  7. Ясно :) Кстати, HTMLElement.prototype extend в ИЕ не работает…

  8. Великолепно, продолжайте в том же духе!
    Самое главное быстро находишь все что нужно :)

    Респекты!

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

JSToolbox создан на основе WordPress