Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2015, 12:32
Интересующийся
Отправить личное сообщение для WebBizMedia Посмотреть профиль Найти все сообщения от WebBizMedia
 
Регистрация: 13.01.2015
Сообщений: 11

Визуализация структуры DOM-дерева
Уважаемые знатоки подскажите решение по данному вопросу, нужно визуализировать DOM-дерева. Как вариант думаю можно для этого использовать плагин jstree, так как его функционал идеально подходит для решения задуманной идеи, но как его настроить для визуализации DOM-дерева.

допустим имеем:
<body title='body'>
<div title='div1'>
   <div title='div2'>
       <p title='text'>text</p>
       <p title='text'>text</p>
   </div>
   <div title='div3'>
       <p title='text'>text</p>
   </div>
</div>
</body>


на выходе получаем что-то типо этого:

<ul>body
    <ul>div1
        <ul>div2
             <ul>text</ul>
             <ul>text</ul>
         </ul>
         <ul>div3
             <ul>text</ul>
         </ul>
     </ul>
</ul>



Вот попытался реализовать проход по 1-му уровню вложенности, не работает (((
А как сделать чтобы проходил по всему дереву с учетом всех родителей и их дочерних элементов понятия не имею.
function createTreeDoom(parent){
	var children = parent.children();
	if(children.length > 0){
		var treeDoom = $('<ul/>',{title: $(this).attr('title')});
		$.each(children, function(){
			$('<ul/>',{title: $(this).attr('title')}).appendTo(treeDoom);
			});
		}
		return treeDoom;
		console.log(treeDoom);		
};
createTreeDoom($('.pages'));

Последний раз редактировалось WebBizMedia, 26.03.2015 в 14:48.
Ответить с цитированием
  #2 (permalink)  
Старый 27.03.2015, 16:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от WebBizMedia Посмотреть сообщение
<ul>body
    <ul>div1
        <ul>div2
             <ul>text</ul>
             <ul>text</ul>
         </ul>
         <ul>div3
             <ul>text</ul>
         </ul>
     </ul>
</ul>
Это что такое?
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2015, 17:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Никак не понять ни о стеке, ни о рекурсии? ) Хорошо, вот вам код РНР, о котором я говорил. Стояла задача проверки списка из UL OL LI. Смотрите, может и наведет на мысли (скопировано пояснение и код).

Для простых тегов, типа параграфа, ссылки и т.п., все просто, а вот для тегов имеющих дочерние элементы, необходимо описывать правила. Вот появилось время немного, написал как можно это реализовать. Объявим массив, который будет описывать правила структуры вложений для некоторых тегов (в примере только те, что у вас - UL, OL, LI).

Сначала открывающие теги. Тегам OL, LI может предшествовать только тег LI, или же отсутствовать. Следовательно для них указываем правило - "пустой" или ''li". А так как мы всегда ожидаем в обязательном порядке вначале открывающий тег, то значение "пустой" загрузим в вершину стека при его инициализации. Это единственное значение стека, которое никогда не будет из него извлечено, и при верном вложении тегов, каждый новый открывающийся тег (вне вложений) будет будет соответствовать этому правилу. А в случае, если открывающему тегу списка предшествует тег не описанный в условии (вершина стека не равна ни одному тегу условий, а ключ проверяемого тега есть в условиях), то действует правило - первый элемент массива правил тега должен быть равен "пусто". Тегу LI всегда должен предшествовать тег указанный в условиях.


$order = array( 
  'ul' => array('','li'), 
  'ol' => array('','li'), 
  'li' => array('ul','ol') 
); 
$stack = array(''); //инициализация стека 

$s = 'text...  
<li>111</li>  
<li>222</li> 
text...'; 
//разобьем проверяемый текст на строки, 
//так удобнее производить поиск и вывести строку с ошибкой  
$s = explode("\r\n", $s); 
$i = 1; //условно начальный номер строк 
$error = null;     
foreach($s as $v) { 
   $match = preg_match_all("/(<.*?>)/i", $v, $tag); 
   if($match) { 
     $tag = array_map('strtolower', $tag[0]); 
     foreach($tag as $t) { 
        $src = $t[1]!='/' ? 1 : 0; //определяем тип тега 
        $t = trim($t,'</> '); //получаем имя тега, в примере не учитываются его атрибуты, иначе нужно удалять их 
        if(!$t) { 
           $error = 'Ошибка в строке '.$i.' - некорректное имя тега!'; 
           break 2; 
        } 
        if($src) { //открывающий тег 
           //если тег соответствует правилу вложения, то помещаем его в стек, вершина стека растет 
           if(!array_key_exists($t, $order) ||  
               array_key_exists($t, $order) && in_array($stack[0], $order[$t]) || 
               array_key_exists($t, $order) && !$order[$t][0] 
           ) array_unshift($stack, $t);  
           else { 
              $error = 'Ошибка в строке '.$i.' - отсутствует предшествующий тег '.implode(' или ', array_diff($order[$t],array(''))).'!'; 
              break 2; 
           }     
        } else { //закрывающий тег 
           if($t==$stack[0]) array_shift($stack); //если тег соответствует открывающему, то извлекаем открывающий тег из стека, вершина стека убывает 
           else { 
              $error = 'Ошибка в строке '.$i.' - незакрыт предшествующий тег '.$stack[0].'!'; 
              break 2; 
           }     
        } 
     } 
   } 
   $i++; 
} 
//вывод ошибок вложения 
//и при их отсутствии проверка "чистоты" стека - отсутствие одиночного открытого тега    
echo $error ? $error : count($stack)==1 ? 'Вложение корректное.' : 'Ошибка - отсутствует закрывающий тег '.$stack[0].'!'; 
//контроль стека 
echo '<br><pre>'; 
print_r($stack);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
событие, которое срабатывает при изменении DOM структуры amigo* Events/DOM/Window 30 11.04.2017 13:39
обход дерева DOM Nickolas Events/DOM/Window 16 11.07.2012 07:31
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 16:19
сохрание дерева DOM Paska Events/DOM/Window 3 02.08.2010 10:22
Сохранение дерева DOM в файл Александр1985 Общие вопросы Javascript 7 24.01.2009 23:15