Функция parseBooklnfoO отвечает за синтаксический анализ DOM-] кумента. Эта функция принимает один аргумент, который и преде ляет собой собственно DOM-документ:1
function parseBooklnfo(oXmlDom) {
var oRoot = oXmlDom.documentElement; var oFragment = document.createDocumentFragmentQ;
В переменную oRoot записывается ссылка на корневой элемент мента XML. Сделано это исключительно ради удобства, потому что| печатать слово oRoot намного проще, чем oXmlDom. documentElement. также создается фрагмент документа. Функция parseBooklnfoO рирует множество элементов HTML, и потому в HTML DOM будет i изводиться множество изменений. Добавлять каждый элемент по| дельности - слишком дорогое удовольствие в смысле затрачивав! времени, которое необходимо на отображение изменений. Поэтому i
Следует четко различать понятия «DOM-документ» и «XML-документ»,» ной стороны почти тождественные, а с другой - качественно раз DOM-документ, создаваемый приложением, есть внутренний объект] следнего, и в общем случае о его физической реализации никому ниче известно (аналогично мы работаем с документами Word, ничего не о формате их хранения). Содержимое DOM-документа становится до ным для всех остальных приложений путем сохранения его в фор XML-файла. Таким образом, XML-документ - это представление DOJ кумента на языке XML. См. http://www.microsoft.com/Rus/Msdn// MSVB/ Archive/Mixture/XML/376.mspx. - Примеч. науч. ред.
: отдельный элемент будет добавляться сначала во фрагмент доку-га, и лишь затем, когда все элементы HTML будут добавлены, весь фрагмент целиком будет добавлен к документу. Такая реализация поз-1 обновить документ всего один раз, что значительно сокращает I, требуемое на отображение изменений.
известно, что дочерними элементами корневого узла являются двлько элементы , поэтому мы можем обойти их в цикле, ис-додьзуя массив childNodes:
"var aBooks = oRoot.getElementsByTagNameC'book"); .
tfor (var i = 0; i < aBooks.length; i++) {
var slsbn = aBooks[i].getAttribute("isbn"); . var sAuthor, sTitle, sPublisher;
Внутри цикла for собственно и начинается фактический анализ. Сна-чада с помощью функции getAttribute() извлекается атрибут isbn и со-драняется в переменной slsbn. Это значение понадобится для вывода воложки книги и самого ISBN перед пользователем. Здесь также объ¬явлены переменные sAuthor, sTitle и sPublisher - в них будут храниться адачения элементов , и соответственно.
Далее из документа извлекается информация о книге. Для этого есть даоса способов. Например, можно воспользоваться массивом childN-auss и обойти все узлы в цикле, но в этом примере выбран иной подход. Те же самые результаты могут быть получены с помощью цикла do... ■rile, в котором задействуются свойства f irstChild и lastChild:
f. var oCurrentChild = aBooks[i].firstChild; %?do {
fe. switch (oCurrentChild.tagName) { br,- . case "title":
sTitle = oCurrentChild.text; break;
case "author":
sAuthor = oCurrentChild.text; break;
Г case "publisher": .
J" sPublisher =• oCurrentChild. text;
?*• break;
2 . default:
Ш
break, .
;.r "' oCurrentChild.-oCurrentChild. nextSibling;
1 } while (oCurrentChild = oCurrentChild.nextSibling);
Впервой строке в переменную oCurrentChild записывается ссылка на яервый дочерний элемент текущего узла . (Не забывайте, мы все еще находимся внутри цикла for.) На основании значения свойст¬ва tagName мы в блоке switch будем определять, что надо сделать с данными. Затем в блоке switch производится запись данных в переме из соответствующих им tagName текущего элемента. Для извлече данных используется свойство text, которое содержит значения текстовых узлов текущего элемента. Затем в переменную oCurrent с помощью свойства nextSiblingNode записывается ссылка на узел, дующий сразу же за текущим. Если следующий братский узел сущ вует, то цикл продолжается; если нет, то в переменную oCurrent записывается значение null и цикл завершается.
Когда все необходимые данные будут записаны в переменные, м начинать создание элементов HTML для отображения этих да Структура элементов, которая создается программным способом, глядит так:
Professional Ajax
Written by: Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett -ISBN #0471777781
Published by Wrox
Чтобы как-то оживить список на экране, содержимое элементов , и внутренний элемент ). Этот тоже создается с помощью метода createElement():
"f «г пЗТШе = document.createElement("h3"); ^^itle.appendChildCdocument.createTextNode(sTitle)); *r cavContent.appendChild(h3Title);
Чтобы создать текстовый узел с названием книги, необходимо вызвать ■под createTextNodeO, который добавит текст в элемент <пЗ />, после чего сформированный заголовок надо добавить в divContent.
Далее необходимо добавить информацию об авторах и номер ISBN. Эта «■формация состоит из двух текстовых узлов, которые должны быть жшавлены уже в другой элемент - divContent. Кроме того, между эти-ащ двумя текстовыми узлами вставляется элемент переноса строки:
* divContent.appendChild(document.createTextNode("Авторы: " + sAuthor));
i divContent.appendChild(document.createElement("br"));
r divContent.appendChild(document.createTextNode("ISBN: #" + slsbn));
Этот фрагмент кода создает два текстовых узла. Первый из них, содер¬жащий сведения об авторах книги, добавляется в divContent, вслед ж ним создается и добавляется перенос строки (элемент ). По-еаедним добавляется текстовый узел с номером ISBN.
В последнюю очередь добавляются сведения об издательстве:
; var divPublisner = document.createElement("div"); У,Ш>Ь;;.Х!>Ш^^№:\-j divPublisner.className = "bookPublisher";
divPublisher.appendChild(document.createTextNode("Vl3flaTeflbCTBo: " + . sPublisher));
divContent,appendChild(divPublisher);
Название издательства отображается в отдельном элементе . По¬сле создания этого элемента ему присваивается класс "bookPublisher"
и в него добавляется текстовый узел с названием издательства. На эя элемент divPublisher можно считать сформированным и добавить* в элемент divContent.
На этом работа с данными завершается. Однако для элемента diva
tent еще не определено имя класса CSS, а кроме того, его надо добавя
в элемент divContainer, который, в свою очередь, должен быть дош
лен во фрагмент документа. Эти действия выполняют следующие я
строки кода:divContent.className = "bookContent"; 1
divContainer.appendChild(divContent); 1
oFragraent.appendChild(divContainer); 1
И наконец, последний шаг - добавить полученный фрагмент докуяв
та в тело страницы после обхода всех узлов : j
document.body.appendChild(oFragment); i
В действительности эта строка не добавляет сам фрагмент докумея]
а добавляет его дочерние узлы, одновременно выполняя все необхш
мые изменения в HTML DOM. Этой последней строкой заканчивав]
функция parseBooklnfoO.