как "достать" все объекты документа
все элементы хтмл-документа можно создавать яваскриптом
а как сохранить все элементы-узлы объекта document со всеми ид классами и тд например для повторного создания всех этих узлов |
element.cloneNode() |
я имел в виду не копирование и вставку
а экспорт например в json всех хэлементов dom и импорта из json для воссоздания dom |
Не выйдет так просто -после перекидки объект -ясон-объект , объект уже не будет иметь тип htmlElement. Нужно писать парсер элемент-ясон-элемент. Можно обойтись без парсера элемент-ясон конечно а сделать через стандартный перевод в ясон.
|
парсер чтобы сохранял нужные важные для тебя параметры элемента и записывал ил в ясон(ну и транскрипция) , и наоборот.
ну еще как вариант похранить element.innerHTML сроку)) но не факт что сохранятся и обработчики |
сохранить во фрагменте, потом вставить
<head>
<script>
window.onload = function () {
function createTree(el, par) {
var ul = document.createElement('ul');
par.appendChild(ul);
var childs = el.children;
var len = childs.length;
for (var i = 0; i < len; i++) {
var li = document.createElement('li');
li.innerHTML = childs[i].tagName;
ul.appendChild(li);
createTree(childs[i], ul);
}
}
var frag = document.createDocumentFragment();
createTree(document.body, frag);
document.body.appendChild(frag);
}
</script>
</head>
<body>
<div>
<div>
<span>span</span>
<button>button1</button>
<input>
</div>
<div>
<form>
<input>
<input>
<span>span2</span>
<button>button2</button>
</form>
</div>
</div>
<div>
<div>
<span>span</span>
<button>button1</button>
<input>
</div>
<div>
<form>
<input>
<input>
<span>span2</span>
<button>button2</button>
</form>
</div>
</div>
</body>
|
мужики, вопрос концептуальный - все узлы DOM это элементы объекта document
это обычный объект со свойствами можно добавлять эти свойства как в обычный объект JS соответственно должен быть простой способ сохранения этого объекта со всеми его свойствами, например сохраниения на клиенте или в БД на сервере - самое логичное конечно же JSON причем без всяких конвертаций же |
Цитата:
var div=document.createElement('div');
alert( div);
div=JSON.parse(JSON.stringify(div));
alert( div);
var a={};
alert(a);
что не понятного ?самый простой способ: кинуть в ясон. затем перевести назад. создать узел(тип тега можно получить из свойств распарсеного) переписать ему все свойства из из распарсеного, перечислением. -но если необходим ещё и минимальный ясон ,то и для первого пункта нужен парсер |
Вопрос, зачем вообще понадобились такие извращения?
Проблема стоит не в том как распарсить DOM а гораздо ранее на этапе когда такая потребность ВООБЩЕ ПОЯВИЛАСЬ у тебя |
это простите не извращения - это я грызу гранит и пытаюсь понять логику
повторюсь ибо ответы ваши не об том чо я спрашиваю - правильно ли я понимаю что хтмл-документ это объекты DOM и следовательно объекты JS-программы и возможно полностью прочитать все элементы объекта document в виде пар ключ-значение и сохранить эти данные, и обратно прочитать эти данные и воссоздать первоначальный документ вопрос наверное к профессорам типа автора учебника этого сайта)) |
Все - нельзя, есть запретные, но почти все - можно.
Однако: 1. document - адски большой. 2. В document полно саморекурсивных ссылок(firstChild <-> parentNode итд) 3. document и child'ы - не просто объекты - это Node объекты, соответственно если в строку превратить с оговорками(см пункт 2) ещё можно, то обратно уже никак(ну точнее без извращений никак - оно того не стоит). А так FireBug примерно это и делает при построении модели DOM. У меня даже где-то валяется древняя наговнокоженная функция сериализации любых объектов. |
Нет ты понимаешь не правильно, DOM это модель документа, которая через javascript доступка как API в виде обьекта document // то что находится в обьекте document это НЕ обычные обьекты javascript.
Элементы DOM просто ПРЕДСТАВЛЕНЫ в виде обьектов javascript и похожи на них, но на самом деле это API к DOM которая находится в движке браузера. Я думаю Так понятнее? |
да, так более понятно спасибо
итак - JS может полностью сформировать с нуля хтмл-документ любой сложности при этом JS может использовать JSON-данные для создания узлов документа соответственно "модель" документа может быть представлена в виде JS-объекта |
да, ты можешь считать данные о DOM через этот API доступ к которому осуществляется через document / Превратить эти данные в любой удобный для тебя формат, а потом используя этот же API (обьект document) наполнить DOM этими данными.
|
в принципе мне не надо считывать любой документ, то есть парсить его
я размышляю о генерации с нуля хтмл-документа то есть можно же создавая или удаляя или перемещая с помощью JS узлы, писать все эти изменения в "Json-модель" хтмл-документа скажите пожалуйста - как в общих чертах происходит в обычных фреймворках редактирование хтмл-документа в браузере - то есть создание новых узлов, так чтобы все нововведения записывались в БД |
var div = document.createElement('div');
div.className = 'myClass';
div.id = 'myId';
// засунем созданный элемент (через api) в DOM
document.body.appendChild( div );
// БАБАХ API метод appendChild добавил в DOM элемент DIV
в jQuery напрмиер так
$('<div>', {className:'myClass', id: 'myId'}).appendTo( 'body' );
или еще проще $( ' < div class="myClass" id="myId" > ' ).appendTo( 'body' ); |
Только чтоб заблуждений не возникло: jquery делает тоже самое, что в первом примере просто внутри себя, для удобства использования.
P.S. Некоторые шаблонизаторы построены на json, в котором содеждится описание нужных элементов. |
кстати да, какая цель то у тебя вообще? ты хочешь придумать какой то формат чтобы присылать сервером данные о РАЗМЕТКЕ а яваскрипт бы наполнял ими DOM ??
|
о возможном применении я уже написал
подробнее сказать нечего какбе я грызу этот гранит и хочу глубоко понимать а непросто делать как все )) ну и сразу же думаю о своем фреймворке например мне неохота заморачиваться реляционными БД - мне достаточно плоских файлов на ПХП |
Цитата:
не глянул что это было уже ранее. Цитата:
|
хе хе ))
о базовых знаниях и речь а уж шедевер ли - речь вобще не об этом, и надо уметь и не боятся выдумывать велисапеды согласитесь лучше не просто делать как все а еще и в квантовой механике объектной модели разбираться )) |
товарищи, правильно ли я понимаю что для манипуляций узлами DOM лучше использовать JQuery
|
Цитата:
Цитата:
|
Maxmaxmахimus , большое спасибо за ваши любезные ответы - пешите есчо
|
угу, так че за БД)?
|
вопрос ваш неясен весьма
с удовольством отвечу когда пойму про реляционные БД и плоские файлы вроде бы все знают |
да но как это связанно с DOM и работой с ним через javascript?
|
Цитата:
|
Цитата:
|
храни разметку приложений в виде html файлов или шаблонов. а ДАННЫЕ храни в базе данных. нужно логически разделять данные от представления
|
я хорошо понимаю принцип разделения mvc
но данные это сами хтмл-документы я понимаю хтмл-документ как набор ключей-значений плюс оформление (css) плюс поведение (js) - они могут быть общими для многих документов |
Цитата:
Код:
DROP TABLE mytable --надеюсь, Вы поняли, к чему я клоню. |
пардоньте, не понял ))
какбы это факт шо хтмл это структурированные данные |
HTML это данные о разметке и структуре но не сами данные.
сами данные достаются из базы данных и записываются в html структуру. Например есть разметка <div></div> она хранится в виде html шаблона. А вот ТО ЧТО ТУДА ВСТАВИТСЯ <div>ОЛОЛО</div> это уже ДАННЫЕ и они хранятся в базе данных. Это делается либо на стороне сервера либо на стороне клиента. Цитата:
|
не готов спорить, и возможно вопрос философский (я о философии архитектуры программ)
то что сервер заполняет шаблон - это один из способов архитектурных а если структура документов всегда разная? тогда шо? шаблоны хранить в бд? то есть из бд доставать шаблон и доставать его наполнение? изначально по смыслу хтмл это не шаблон, это документ с информацией да и вообще не важно как вы выдаете хтмл-файлы клиенту - это ваши проблемы но клиент всегда получает документ, который в идеале по хорошему должен и обязан быть читаемым и без цсс и скриптов |
macdack,
Если вы придумаете как сериализовать/десериализовать object из кода ниже, то вы будете на шаг ближе к полной сериализации/десериализации document
(function() {
var a = 1;
var b = 1;
window.object = {//объект который нужно сериализовать
func: function(num) {
return 1 === num ? a : b;
}
};
})();
метод func после десериализации должен полностью сохранить свое поведение |
Цитата:
Gvozd, а и б как я понял это навешанные обработчики событий)? |
еще вопрос - когда скрипт меняет ДОМ добавляя удаляя элементы то меняется ли при этом хтмл документ?
и если да то сохраняя документ через меню браузера "сохранить как" сохранятся ли так все "правки" документа |
macdack,
1) Да 2) Да Очень легко проверить (выполни в консоли браузера):
document.getElementsByTagName('body')[0].innerHTML = "";
Затем, нажми "Сохранить как" :) |
Вообще не существует ни какого HTML документа браузер партит код странички в DOM и забывает о существоании HTML документа)))
но при сохранении снова его генерит исходя из данных в DOM П.С. Hoshinokoe, document.body.innedHTML |
| Часовой пояс GMT +3, время: 14:13. |