Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Ориентация по DOM дереву. (https://javascript.ru/forum/project/4888-orientaciya-po-dom-derevu.html)

JSprog 27.08.2009 16:58

Ориентация по DOM дереву.
 
Наверняка вам не раз было не удобно ориентироваться по DOM дереву с помощью методов ParentNode, PreviousSibling, FirstChild, LastChild, NextSibling из-за узлов - переводов строки то есть пустых строк.
Предлагаю вам модифицированы методы которые перемещаются только по узлам первого типа (XMl тэги)

previousSibling:
function prev(elem) {
 do{
  elem=elem.previousSibling;
 } while ( elem && elem.nodeType !=1);
 return elem;
}

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

firstchild:
function first(elem) {
 elem=elem.firstChild;
 return elem && elem.nodeType!=1 ? next (elem) :elem;
}

lastchild:
function last(elem) {
 elem=elem.lastChild;
 return elem && elem.nodeType!=1 ? prev (elem) :elem;
}

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

Например чтобы переместиться ко второму элементу body надо написать
next(first(document.body))

B~Vladi 27.08.2009 17:30

Это не решает проблему.

e1f 27.08.2009 17:46

Копипастим? Взято, по-видимому, отсюда. Да еще и с ошибкой:
Цитата:

Сообщение от JSprog (Сообщение 28470)
if (elem != null) elem=elemParentNode;


JSprog 27.08.2009 17:50

Цитата:

Сообщение от B~Vladi
Это не решает проблему.

Какую?
Цитата:

Сообщение от e1f
Копипастим? Взято, по-видимому, отсюда. Да еще и с ошибкой:

Во первых я не говорил что эт мой код просто показать захотел.
Во вторых с твоего сайта тоже списали, а код из книги Джона Рейсига

Octane 27.08.2009 18:09

Еще есть такая интересная штука ElementTraversal, правда область применения пока ограничена.

e1f 27.08.2009 18:20

Ага, уже читал :)

JSprog 27.08.2009 19:09

Полный аналог приведёных мной функций

e1f 27.08.2009 19:10

Цитата:

Сообщение от JSprog (Сообщение 28474)
Во первых я не говорил что эт мой код просто показать захотел.

Так укажи, откуда, а не просто копипасти
Цитата:

Сообщение от JSprog (Сообщение 28474)
Во вторых с твоего сайта тоже списали, а код из книги Джона Рейсига

Ну, сайт не мой ;) А код действительно, слизан + те фанки, которые в книге по аналогии отсутствуют, автор немного криво дописал:
function( [B]elem[/B] ) {
       var [B]elem[/B] = this;


P.S. Минут 15 гуглил эту книгу, поискать в ней код, никак не находилось, в результате нашел на javascript.ru :lol:

Riim 27.08.2009 23:59

Теперь если сделать эти функции методами элементов, то вообще шикарно будет. Как-то так: $('div1').first().next();

JSprog 28.08.2009 08:36

Цитата:

Сообщение от e1f
автор немного криво дописал:

function( elem ) {
var elem = this;

Там такое тоже было с помощью HTMLElement но в IE не пашет

B~Vladi 28.08.2009 10:30

Цитата:

Сообщение от JSprog
Какую?

Проблему пустых узлов - переводов строк. Эти ф-ции ходят только по тегам, пропуская текстовые, непустые, узлы. Проблемы (неудобства) создают именно пустые, а остальные пропускать нельзя - если они есть - они тоже должны обрабатываться, иначе зачем они вообще нужны...

JSprog 28.08.2009 11:55

Ну ты ппц. Пустые узлы тоже типа 3. А он ходит только по типам 1

Gvozd 28.08.2009 13:14

JSprog,
вообще-то B~Vladi прав
твои функции выдают только теги (nodeType=1) нагора
пустые и пробельный текстовые ноды(nodeType=3) пропускаются и это правильно
обычные текстовые ноды(nodeType=3) с текстом каким-либо внутри также пропукаются, и это уже неправильно

JSprog 28.08.2009 13:19

Так это функция для таких случаев и нужна! Когда нуны только теги

e1f 28.08.2009 14:03

Riim,
Ну да, Octane же дал ссылку на свой хабрапост, там реализовано :) Так что вполне даже норм, для отхода от фреймворков :)

UPD
Gvozd, а так ли часто надо ползать по текстовым нодам? Честно говоря, я не вижу большой разницы между пустыми и непустыми текстовыми нодами. Если нужно получить ее -- так почему бы не использовать DOM-методы?
А вариант реализации, о которой Вы говорите, видимо, есть тут

tenshi 28.08.2009 15:24

есть хак: добавить на все элементы биндинг через стили, который будет добавлять каждому элементу необходимые методы...

B~Vladi 28.08.2009 15:28

Цитата:

Сообщение от JSprog
Так это функция для таких случаев и нужна! Когда нуны только теги

Зачем тогда было вспоминать пустые узлы?!

JSprog 28.08.2009 15:52

То что их тоже обходит


Часовой пояс GMT +3, время: 15:54.