Навигация внутри DOM. Как это сделать нормально?

[master_alf]

Вот такая вот задачка.
http://sneg-izdat.ru/test/
т.е. у нас есть поле 10 на 10 клеток (обычная таблица)
кликаем по ячейке - она выделяется, далее кнопками "влево, вправо, вверх, вниз" можем перемещать "активный квадрат".

По приведенной ссылке в фф худо-бедно работает.
в ИЕ и опере, вверх/вниз перескакивает через строку.
Методы, которые пришлось использовать - порой реально извращенные, как мне кажется, но ничего лучше не нашел.
Кто может - подскажите как правильнее осуществлять навигацию внутри DOM? Данную задачу, конечно, можно решить с помощью установки ай-ди аля координатная сетка, но, ИМХО, это не способ решения проблемы. Это костыли.

[Octane]

У элементов таблицы есть специальные коллекции:

table.tBodies[0].rows[0].cells[0]

[master_alf]

Спасибо за данные методы.
Но они будут работать только в случае с таблицей.
Хотелось бы найти универсальные средства, которыми можно осуществлять навигацию в различных ситуациях.
Например если нужно перемещаться между подобным образом сверстанными дивами.
Есть ли какие-либо методы вроде previousSibling/nextSibling, через которые это можно реализовать? Либо не такие всеобъемлющие методы вроде AnyObj.childNode/AnyObj.children.
Первая пара(previousSibling/nextSibling) мне не нравится тем, что внутри них как отдельные узлы воспринимаются не только какие-то теги, но и, судя по всему, толи пробелы, толи переносы строк в исходном коде.

AnyObj.children вроде бы лишен таких пакостей, но из-за невозможности перейти к действительному соседнему узлу и обратится уже к его дочерним объектам - использование AnyObj.children не всегда возможно .

Не знаю, понятно ли вообще что я хочу...
Я хочу понять как можно переходить между соседними элементами родителя первоначального элемента, и вставать на ту же самую позицию среди дочерних элементов соседа родителя, где находится первоначальный элемент относительного своего родителя %))
Если вопрос не ясен, могу нарисовать схему.

[e1f]

Первая пара(previousSibling/nextSibling) мне не нравится тем, что внутри них как отдельные узлы воспринимаются не только какие-то теги, но и, судя по всему, толи пробелы, толи переносы строк в исходном коде.

master_alf, напишите свои prev/next, которые пропускают текстовые ноды. Или загуглите готовое решение, их наверняка over9000.

[master_alf]

Если бы знал как написать... написал бы
Второй день только как занялся javascript и DOM...

[Octane]

http://habrahabr.ru/blogs/javascript/54380/

[e1f]

Или загуглите готовое решение, их наверняка over9000

master_alf, ну, гуглом-то не второй день пользуетесь?

[x-yuri]

Спасибо за данные методы.
Но они будут работать только в случае с таблицей.

но твою текущую задачи они ведь решают? Хотя nextSibling/previousSibling удобнее в данном случае. В частности, удобнее childNodes. Потому что все эти rows, cells, childNodes - чтобы просмотреть список дочерних элементов, а тебе надо перейти к предыдущему/следующему. Да и вообще, тебе нужна универсальность? previous/nextSibling универсальнее, чем тебе надо, потому что учитывают текстовые узлы

Ссылка Octane, конечно, интересна, но я бы тебе советовал ее на потом, когда разберешься, как без этого обойтись

а без этого обойтись можно, как сказал e1f, как-то так

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

[master_alf]

master_alf, ну, гуглом-то не второй день пользуетесь?

Не второй, но на форуме вопрос задал только после того, как порыскал по гуглу. К сожалению сам ничего найти путнего не смог.

но твою текущую задачи они ведь решают?

Да, решают. Но т.к. задача это для меня, а не для преподователя в институте, хотелось бы научиться навигации в принципе, а не применительно к конкретно этому примеру.

Хотя nextSibling/previousSibling удобнее в данном случае. В частности, удобнее childNodes.

Не совсем понял, это же методы разного уровня, в смысле nextSibling/previousSibling - позволяют перемещаться внутри текущего уровня между узлами. А childNodes - отдает список дочерних элементов узла. т.е. получается, мы в структуре дерева уходим вглубь. Это я к тому, что не пойму, как можно сравнивать методы prevSibling/nextSibling и childNotes.

[x-yuri]

но ты же сравниваешь (previousSibling/nextSibling vs AnyObj.childNode/AnyObj.children)? Или я тебя неправильно понял? В принципе следующий элемент можно и через parentNode.childNodes найти, если очень хочется, но не стоит

Да, решают. Но т.к. задача это для меня, а не для преподователя в институте, хотелось бы научиться навигации в принципе, а не применительно к конкретно этому примеру.

так спрашивать тогда надо "какие есть варианты навигации?", и не "как решить задачу?"