Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Работа с HTML до его вставки в дерево DOM, пришел HTML аяксом, обраб. "до" вставки 
V
    Опции темы
WIPS
Дата 15.6.2009, 13:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8



Суть вопроса.

Допустим, что от аякса (не важно откуда) пришел HTML, он содержится как строка в переменной. Теперь нам этот HTML нужно вставить в дерево элементов, чтобы он пропарсился и все такое, делаем так:
Код

// переменная, где у нас HTML
var html_string;
document.getElementById('some_container').innerHTML = html_string;

Вопрос в том, можно ли как-то менять этот HTML средствами DOM (а не парсиньем строки), до того как мы включим его в дерево элементов документа, т.е. как-то так (ф-ции выдуманные, не пинать!):
Код

// переменная, где у нас HTML
var html_string;
// создаем из строки дерево элементов
var sub_document = createDocument(html_string);
// в нашем альтернативном дереве производим какие-то действия с помощью DOM (не важно какие)
sub_document.getElementById('some_element').style.color = '#123456';
sub_document.getElementById('some_element2').style.color = '#654321';
// измененный DOM снова вставляем в переменную
var html_sting = sub_document.toString();
// вставляем наш измененный HTML
document.getElementById('some_container').innerHTML = html_string;
// ощущаем счастье и удовлетворенность :)

Насколько я понял - это не возможно, но буду рад если кто-нибудь меня переубедит smile
... или подскажет альтернативы
--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Astraller
Дата 15.6.2009, 13:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5



Возможно извращение, но почему не так:
Код

// переменная, где у нас HTML
var html_string;
// создаем из строки дерево элементов
var sub_document = document.createElement("span");
sub_document.innerHTML = html_string;
// в нашем альтернативном дереве производим какие-то действия с помощью DOM (не важно какие)
sub_document.childNodes[0].style.color = '#123456';
sub_document.childNodes[0].style.color = '#654321';
// вставляем наш измененный DOM
document.getElementById('some_container').appendChild(sub_document);
// ощущаем счастье и удовлетворенность :)


Это сообщение отредактировал(а) Astraller - 15.6.2009, 13:49


--------------------
A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair
PM MAIL WWW ICQ   Вверх
WIPS
Дата 15.6.2009, 14:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8



В такой ситуации во время 
Код

var sub_document = document.createElement("span");
sub_document.innerHTML = html_string;

элемент span и наша строка уже вставляется в дерево DOM, а мне надо перед этим произвести манипуляции...
--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Astraller
Дата 15.6.2009, 14:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5



Я думал суть в изменении не до фактического вставления в DOM, а в изменении до того как увидит пользователь... я ошибался? 


--------------------
A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair
PM MAIL WWW ICQ   Вверх
Aliance
Дата 15.6.2009, 15:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



А почему бы это не сделать после добавления в документ? Ведь DOM работает с узлами, а не со строками.
PM MAIL WWW ICQ Skype   Вверх
WIPS
Дата 15.6.2009, 16:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8



Цитата(Astraller @  15.6.2009,  13:33 Найти цитируемый пост)
Я думал суть в изменении не до фактического вставления в DOM, а в изменении до того как увидит пользователь... я ошибался?  

Суть именно в том, чтобы изменить до вставки. Камень предкновения не в отображении.

Цитата(Aliance @  15.6.2009,  14:13 Найти цитируемый пост)
А почему бы это не сделать после добавления в документ? Ведь DOM работает с узлами, а не со строками. 

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

Кстати, как оказалось параллельно альтернативный документ создать нельзя :(
Код

var my_doc = new Document(); // такая конструкция не работает... жаль

--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Astraller
Дата 15.6.2009, 17:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5



Ээээ, в действительности можно попробовать соорудить скрытый фрейм, в который поместить полученный HTML. Таким образом вы получите "экземпляр странице в пробирке". С которым можно делать все что угодно.


--------------------
A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair
PM MAIL WWW ICQ   Вверх
bazzjr
Дата 15.6.2009, 17:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: нет
Всего: 6



Не понял для какой целы нужны данные манипуляции, да и вообще правильный ли подход к решению проблеммы...
PM MAIL ICQ   Вверх
ksnk
Дата 15.6.2009, 19:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Вообще-то document.createElement(...)+ innerHTML=... никуда никакой элемент не вставляют. И getElementById свежесостряпанную веточку найти не смогут до его реальной вставки в дерево.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
WIPS
Дата 15.6.2009, 21:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8



Цитата(Astraller @  15.6.2009,  13:33 Найти цитируемый пост)
в действительности можно попробовать соорудить скрытый фрейм  

Да я тоже об этом думал. Но фрейм как-то громоздко smile

Цитата(bazzjr @  15.6.2009,  16:50 Найти цитируемый пост)
Не понял для какой целы нужны данные манипуляции, да и вообще правильный ли подход к решению проблеммы...

Цель - мировое господство smile только я Вам этого не говорил ;) Суть не в подходе. Задача решена. Тут уже академический интерес.

Цитата(ksnk @  15.6.2009,  18:30 Найти цитируемый пост)
Вообще-то document.createElement(...)+ innerHTML=... никуда никакой элемент не вставляют. 

Хм... а что же тогда происходит? Поподробнее пожаста, если Вас не затруднит.

Цитата(ksnk @  15.6.2009,  18:30 Найти цитируемый пост)
И getElementById свежесостряпанную веточку найти не смогут до его реальной вставки в дерево. 

А в какой момент происходит "реальная" вставка. На element.show()? Тоже хотелось бы поподробнее.


Это сообщение отредактировал(а) WIPS - 15.6.2009, 21:25
--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Astraller
Дата 15.6.2009, 21:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5



Цитата(WIPS @  15.6.2009,  21:25 Найти цитируемый пост)
А в какой момент происходит "реальная" вставка. На element.show()? Тоже хотелось бы поподробнее.

Как я понимаю, в момент appendChild'а smile


--------------------
A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair
PM MAIL WWW ICQ   Вверх
ksnk
Дата 15.6.2009, 22:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Цитата(WIPS @  15.6.2009,  21:25 Найти цитируемый пост)
А в какой момент происходит "реальная" вставка. На element.show()? Тоже хотелось бы поподробнее.

Код

<div id="container"></div>
<script>

var $x=[];

$x.push('at start');$x.push(document.getElementById('xxx'));

var el=document.createElement('div');
el.innerHTML='<div id="xxx">Hello! world</div>';

$x.push('after creation');$x.push(document.getElementById('xxx'));

document.getElementById('container').appendChild(el);

$x.push('after insertion');$x.push(document.getElementById('xxx'));

alert($x);
</script>



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
youri
Дата 15.6.2009, 23:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16



Цитата(WIPS @  15.6.2009,  16:58 Найти цитируемый пост)
Например мне придут элементы с id, кот. уже есть в текущем документе, мне нужно будет повыбирать те, кот. еще нет в моем документе и потом их повставлять в него

с этой проблемой вроде разобрались, что еще не так?

Цитата(WIPS @  15.6.2009,  16:58 Найти цитируемый пост)
Кстати, как оказалось параллельно альтернативный документ создать нельзя

можно, но не нужно

Цитата(WIPS @  15.6.2009,  21:25 Найти цитируемый пост)
Суть не в подходе

а в чем же, как не в нем? Или ты предпочитаешь решать проблемы так, как в голову всбредет, а не выбирать лучший в данной ситуации (нормальный) подход?
PM   Вверх
WIPS
Дата 16.6.2009, 10:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8



Цитата(youri @  15.6.2009,  22:24 Найти цитируемый пост)
Цитата(WIPS @  15.6.2009,  16:58 )
Например мне придут элементы с id, кот. уже есть в текущем документе, мне нужно будет повыбирать те, кот. еще нет в моем документе и потом их повставлять в него

с этой проблемой вроде разобрались, что еще не так?

интересно как это Вы разбираетесь с одинаковыми id?

Цитата(youri @  15.6.2009,  22:24 Найти цитируемый пост)
Цитата(WIPS @  15.6.2009,  16:58 )
Кстати, как оказалось параллельно альтернативный документ создать нельзя

можно, но не нужно

я сам решу нужно ли мне создавать альтернативный документ, а вот если Вы знаете как это сделать, то милости прошу - поведайте

Цитата(youri @  15.6.2009,  22:24 Найти цитируемый пост)
Цитата(WIPS @  15.6.2009,  21:25 )
Суть не в подходе

а в чем же, как не в нем? Или ты предпочитаешь решать проблемы так, как в голову всбредет, а не выбирать лучший в данной ситуации (нормальный) подход?

я предпочитаю решать проблему оптимальным способом, и если бы Вы были внимательнее, то увидели бы выше, что проблема уже решена, или словосочетание "академический интерес" Вам не понятно?

Цитата(Astraller @  15.6.2009,  20:28 Найти цитируемый пост)
Как я понимаю, в момент appendChild'а

Судя по эксперименту ksnk так и есть.

ksnk, спасибо Вам за точный пример по теме! 

Но повторюсь, что чисто в образовательных целях было бы интересно, можно ли как-то сделать операцию аналогичную такой:
Код

var el = document.createElement('div');
el.innerHTML = '<div id="xxx">Hello! world</div>';
alert(el.getChildById('xxx'));


Это сообщение отредактировал(а) WIPS - 16.6.2009, 10:07
--------------------
Автопроизводители, машины, марки, модели!
PM MAIL WWW ICQ Skype   Вверх
Astraller
Дата 16.6.2009, 10:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5



Цитата(WIPS @  16.6.2009,  10:00 Найти цитируемый пост)
Но повторюсь, что чисто в образовательных целях было бы интересно, можно ли как-то сделать операцию аналогичную такой:

А в чем проблема то:
Код

function getChildById(id){
  for(i=0;this.childNodes[i];i++){
    if (this.childNodes[i].getAttribute('id') == id){
      return this.childNodes[i];
    }
  }
  return false;
}



--------------------
A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair
PM MAIL WWW ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1826 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.