Добро пожаловать в Грубое Руководство по DOM.
В двух частях этой серии описывается объектная модель документа, объясняются ее преимущества и рассматривается ее реализация.
Грубое руководство по DOM — часть 1
Это проклятие веб-разработчиков во всем мире — противоречивые стандарты, несовместимость браузеров и код, который меняется каждый раз, когда новая версия браузера попадает в Интернет.
Но не бойтесь — напасть на белого коня придет героический рыцарь, одетый в одежду нового W3C DOM и вооруженный инструментами, чтобы этот кошмар навсегда закончился. Читайте дальше, чтобы узнать, как новый DOM, наконец, привносит некоторые стандарты в совершенно нестандартный мир Интернета.
Грубое руководство по DOM — часть 2
Теперь, когда вы знаете теорию нового DOM, пришло время снять перчатки и испачкать руки.
В этой статье вы узнаете, как новые правила применяются к старым избранным элементам, таким как обмен изображениями, проверка форм и навигация по фреймам, а затем узнаете, как использовать обычный JavaScript для добавления и удаления элементов из дерева документов на лету.
Грубое руководство по DOM — часть 1
Текущее состояние Дании
В «Гамлете» Шекспира один из персонажей замечательно отмечает: «Что-то гнилое в штате Дания». И каждый раз, когда я сажусь кодировать какой-нибудь dHTML, меня мучает чувство удивления по поводу его проницательности. Этот комментарий, наполненный подтекстом гибели, является настолько прекрасной оценкой многочисленных несовместимостей между двумя основными браузерами и проблем, которые они ежедневно создают для разработчиков, что трудно не смеяться. И я бы … если бы я не был уже плачущим ведром.
Эти несовместимости особенно ярко проявляются в области, известной как DOM или объектная модель документа, стандартный метод доступа к каждому элементу в документе вместе с его атрибутами. Когда была впервые представлена примитивная версия DOM, разработчики сразу поняли, насколько она полезна для добавления новых уровней интерактивности на статическую веб-страницу. Однако, поскольку два основных браузера разветвлялись в разных направлениях, разрабатывая конструкции DOM, которые были взаимно несовместимыми, это восторг быстро превращался в разочарование — в конце концов, ни одному разработчику не нравится писать разные версии одного и того же скрипта для разных браузеров.
Конечно, еще не все потеряно. Предпринимаются усилия, особенно в W3C, по установлению общих стандартов для всех браузеров. Выпуск спецификации CSS, а затем спецификаций DOM Level 0 и Level 1 привел к тому, что большинство основных браузеров оказались в соответствии с предлагаемыми стандартами. Обратная сторона: поскольку стандарт теперь доступен, производители браузеров скоро перестанут поддерживать свои предыдущие версии DOM… это означает, что весь написанный вами код и продуманные обходные пути, которые вы разработали, больше не будут работать в новых версиях браузеров.
Вы уже можете видеть, что это происходит — код, написанный специально для Netscape 4.x, больше не работает в Netscape 6.x, который построен на движке Mozilla — и поэтому каждый разработчик должен понимать новый стандарт DOM и его влияние на код dHTML развитие.
На следующих нескольких страницах я проиллюстрирую некоторые из новых конструкций DOM, а также примеры того, как их можно использовать в «реальных» документах HTML. Моим верным конем в этом путешествии будет Mozilla, замечательный браузер с открытым исходным кодом, доступный по адресу http://www.mozilla.org/ , который претендует на звание самого совместимого со стандартами браузера на сегодняшний день.
Прежде чем мы начнем, несколько оговорок.
Во-первых, это руководство не является исчерпывающей ссылкой на DOM — вы можете купить книгу для этого. Это просто руководство, которое поможет вам осуществить переход к новой объектной модели.
Во-вторых, я не претендую на звание эксперта по DOM, и большая часть материала этого руководства основана на моем собственном опыте разработчика.
Наконец, поскольку новые стандарты DOM предлагаются и утилизируются, материал может стать недействительным; Вы всегда должны обращаться к самой последней версии стандарта или рекомендации по адресу http://www.w3.org/DOM/ для получения актуальной информации (это один из моих любимых документов — я часто использую его, когда у меня возникают проблемы со сном) ,
С формальностями с пути, давайте начнем.
Вернуться к основам
Мы начнем с основ — очень простой HTML-страницы.
<html> <head></head> <body bgcolor="white"> <div id="a" style="font-family: Arial; color: white; background: black">Wassup?</div> </body> </html> Давайте изменим цвет шрифта текста внутри <div> . В Internet Explorer это обычно выполняется с помощью
<script language="JavaScript"> document.all.a.style.color = "red"; </script>
Вот код, который я бы использовал в Mozilla:
<script language="JavaScript"> var obj = document.childNodes[0].childNodes[1].childNodes[0]; obj.style.color = "red"; </script>
Объяснение здесь в порядке. В новом DOM каждый элемент в документе HTML является частью «дерева», и вы можете получить доступ к каждому элементу, перемещаясь по «ветвям» дерева, пока не достигнете соответствующего «узла». Учитывая это, вот мое представление HTML-документа выше, в виде «дерева».
document | -- <html> | -- <head> | -- <body> | -- <div>
Теперь, чтобы добраться до <div> , мне нужно:
- начать сверху («
document»); - перейти вниз к основной ветви — тегу
<html>или «document.childNodes[0]»; - затем ко второй подветви —
<body>или «document.childNodes[0].childNodes[1]»; - затем к
<div>— «document.childNodes[0].childNodes[1].childNodes[0]»;
На этом этапе я успешно прошел путь к элементу <div> в дереве документа. Быстрый способ убедиться в этом — использовать alert() для объекта.
<script language="JavaScript"> var obj = document.childNodes[0].childNodes[1].childNodes[0]; alert(obj.nodeName); obj.style.color = "red"; </script>
который отображает имя тега — DIV — в окне предупреждения.
С этого момента я могу начать возиться с атрибутами объекта — в приведенном выше примере я изменил атрибут стиля «цвет». Не волнуйтесь об этом на данный момент; просто убедитесь, что вы поняли, как я перемещался по дереву документов, чтобы добраться до DIV .
Copyright Melonfire , 2000. Все права защищены.
Навигация по Семейному древу
В дополнение к различным childNodes[] , DOM также предлагает ряд других объектов / свойств, которые могут упростить навигацию между элементами документа.
-
firstChild— ссылка на первый дочерний узел в коллекции -
lastChild— ссылка на последний дочерний узел в коллекции -
parentNode— ссылка на узел на один уровень выше в дереве -
nextSibling— ссылка на следующий узел в текущей коллекции -
previousSibling— ссылка на предыдущий узел в текущей коллекции
Итак, со ссылкой на пример выше, я мог бы использовать любой из альтернативных маршрутов ниже, чтобы перейти к тегу <div> .
document.childNodes[0].childNodes[1].firstChild document.childNodes[0].firstChild.nextSibling.firstChild document.childNodes[0].childNodes[1].firstChild.firstChild.parentNode
Каждый дочерний элемент в дереве может быть тегом HTML или «текстовым узлом». Это поднимает важный момент — пробелы и возврат каретки между различными тегами могут влиять на древовидную структуру документа, создавая текстовые узлы в древовидной структуре и вызывая сильные скрежеты зубов при настройке кода для нового дерева.
Что в имени?
Именно по этой причине DOM предлагает более быстрый и эффективный метод доступа к элементам на странице — метод getElementById() .
Я переписал приведенный выше пример, чтобы продемонстрировать, как можно использовать этот метод.
<script language="JavaScript"> var obj = document.getElementById("a"); obj.style.color = "red"; </script>
Как видите, это гораздо проще читать… и кодировать.
Каждый узел имеет некоторые базовые свойства, которые пригодятся разработчику — например, свойство «nodeName» возвращает имя тега, а свойство «nodeType» возвращает число, указывающее тип узла (HTML tag = 1; атрибут HTML tag = 2; текстовый блок = 3). Если узел является текстовым, а не тегом, свойства «data» и «nodeValue» возвращают текстовую строку.
В следующем примере показано, как можно получить доступ к различным свойствам узла — раскомментируйте различные вызовы метода alert (), чтобы отобразить различные свойства объекта.
<html> <head></head> <body id="body" bgcolor="white"><font face="Arial" size="2">This stuff is giving me a headache already!</font> <script language="JavaScript"> // get to the <font> tag var fontObj = document.getElementById("body").childNodes[0]; // check the tag - returns "FONT" // alert(fontObj.nodeName); // check the type of node - returns 1 // alert(fontObj.nodeType); // get the text within the <font> tag var textObj = fontObj.childNodes[0]; // check the text value - returns "This stuff is giving me a headache already!" // alert(textObj.data); // check the type of node - returns 3 // alert(textObj.nodeType); </script> </body> </html>
И, кстати, — текстовый узел, который не содержит данных, возвращает значение « #text » свойству «nodeName» — попробуйте заменить строку текста из тегов <font> выше на пару пробелов, чтобы понять, что я имею в виду.
Утки в ряд
В дополнение к методу getElementById() , который обычно используется для получения ссылки на определенный элемент, DOM также предлагает метод getElementsByTagName() , используемый для возврата коллекции элемента определенного типа. Например, код
document.getElementsByTagName("form");
вернет коллекцию или массив, содержащий ссылки на все теги <form> в документе. Каждая из этих ссылок является узлом, и затем может управляться с использованием стандартных методов и свойств DOM.
Рассмотрим следующий документ, который содержит три элемента <div> , каждый из которых содержит строку текста
<html> <head> </head> <body bgcolor="white"> <div id="huey"> Huey here! </div> <div id="dewey"> Dewey in the house! </div> <div id="louie"> Yo dude! How's it hangin'? </div> </body> </html>
а затем изучите код, который я буду использовать для манипулирования текстом во втором <div>
<script language="JavaScript"> // get a list of all <div> tags var divCollection = document.getElementsByTagName("div"); // get a reference to the second <div> in the collection var deweyObj = divCollection[1]; // verify that we are where we think we are // alert(deweyObj.getAttribute("id")); // change the text string within the <div> deweyObj.childNodes[0].data = "Dewey rocks!"; </script>
Собрание всех тегов в документе (очень похоже на « document.all ») можно получить с помощью
document.getElementsByTagName("*");
Copyright Melonfire , 2000. Все права защищены.
Меняем вещи вокруг
Теперь, когда вы знаете, как найти путь к определенным элементам HTML в документе, пришло время научиться манипулировать ими. Поскольку большая часть этой манипуляции включает в себя изменение атрибутов тега на лету, DOM предлагает getAttribute() и setAttribute() , которые специально разработаны для этой цели.
Рассмотрим следующую модификацию только что увиденного примера, в которой используются эти два метода для изменения размера шрифта и текстовой строки.
<html> <head></head> <body id="body" bgcolor="white"><font face="Arial" size="2">This stuff is giving me a headache already!</font> <br> Click to <a href="javascript:increaseFontSize();">increase font size</a> or <a href="javascript:changeText()">change text string</a> <script language="JavaScript"> // get to the <font> tag var fontObj = document.getElementById("body").childNodes[0]; // check the tag - returns "FONT" // alert(fontObj.nodeName); // check the type of node - returns 1 // alert(fontObj.nodeType); // get the text within the <font> tag var textObj = fontObj.childNodes[0]; // check the text value - returns "This stuff is giving me a headache already!" // alert(textObj.data); // check the type of node - returs 3 // alert(textObj.nodeType); function changeText() { // alter the node value textObj.data = "I need some aspirin. Now."; } function increaseFontSize() { // get the value of the "size" attribute of the node var size = fontObj.getAttribute("size"); // increase by 1 size += 1; // set the new value fontObj.setAttribute("size", size); } </script> </body> </html>
Я использовал два разных метода здесь. Чтобы изменить размер шрифта, я сначала использовал метод getAttribute() для возврата текущего значения атрибута, а затем использовал метод setAttribute() для записи нового значения. Однако изменение текстовой строки — это просто вопрос изменения значения свойства «data» текстового узла.
При использовании getAttribute() и setAttribute() учитывать getAttribute() setAttribute() . Все имена атрибутов должны быть в нижнем регистре, а имена и значения должны быть заключены в кавычки (если вы опустите кавычки, значения будут рассматриваться как переменные). Очевидно, что вы должны использовать только те атрибуты, которые имеют отношение к рассматриваемому тегу — например, вы не можете использовать setAttribute("src") для <font> .
альтернативы
Альтернативный способ получения (и установки) значений атрибута заключается в коллекции attributes[] , которая по сути является массивом, содержащим список всех пар атрибут-значение для определенного тега. Я изменил предыдущий пример, чтобы проиллюстрировать, как это работает — раскомментируйте различные alert() чтобы увидеть значения различных свойств.
<html> <head></head> <body id="body" bgcolor="white"> <font face="Arial" size="2">This stuff is giving me a headache already!</font> <script language="JavaScript"> // get to the <font> tag var fontObj = document.getElementById("body").childNodes[0]; // return the number of attributes of the <font> tag // or the length of the attributes[] collection // returns 2 // alert(fontObj.attributes.length); // returns the name of the first attribute - "face" // alert(fontObj.attributes[0].name); // returns the value of the first attribute - "Arial" // alert(fontObj.attributes[0].value); // changes the value of the first attribute to "Verdana" fontObj.attributes[0].value = "Verdana"; // returns the new value of the first attribute - "Verdana" // alert(fontObj.attributes[0].value); </script> </body> </html>
Copyright Melonfire , 2000. Все права защищены.
Shazam!
DOM также позволяет вам изменять свойства CSS определенных тегов HTML — как показано в следующем примере:
<html> <head> <script language="JavaScript"> function disappear() { var obj = document.getElementById("mirage"); obj.style.display = "none"; } </script> </head> <body> <div id="mirage"> Now you see it... </div> <a href="javascript:disappear()">...now you don't!</a> </body> </html>
Я сделал нечто подобное в самом первом примере в этой статье — взгляните и на этот, пока вы на нем.
Используя эту технику, можно применить практически любой встроенный стиль к элементу на странице. Помните, что свойства стиля, которые являются дефисами — например, « background-color » и « font-family » — должны быть написаны как одно слово с первым символом после дефиса в fontFamily — например, « backgroundColor » и « fontFamily » , Следующий пример должен ясно проиллюстрировать это:
<html> <head> <script language="JavaScript"> function transform() { var obj = document.getElementById("marvel"); obj.style.fontFamily = "Verdana"; obj.style.fontSize = "40pt"; obj.style.backgroundColor = "red"; obj.style.color = "black"; obj.style.textDecoration = "underline"; obj.style.textAlign = "center"; obj.style.letterSpacing = "10"; } </script> </head> <body> <div id="marvel"> Captain Marvel </div> <a href="javascript:transform()">shazam!</a> </body> </html>
Это об этом на данный момент. Во второй части этой статьи я рассмотрю несколько простых примеров кода для простых приложений JavaScript — обмен изображениями, проверка формы и навигация по фреймам — с использованием новых структур DOM. Я также буду обсуждать функции appendChild() и createNode() , которые позволяют разработчикам добавлять новые элементы в дерево документа через программный код. Не пропустите!
Примечание. Все примеры в этой статье были протестированы на Mozilla (сборка 18). Примеры являются только иллюстративными и не предназначены для производственной среды. YMMV!
Copyright Melonfire , 2000. Все права защищены.
Грубое руководство по DOM — часть 2
Копать глубже
В первой части этой статьи я ознакомил вас с основами навигации по HTML-документу через DOM и объяснил различные доступные вам методы и коллекции. Если вы все это поняли (и я надеюсь, что вы поняли), то теперь у вас должно быть достаточно четкое представление о том, как управлять типичным HTML-документом и изменять элементы интерфейса на лету.
На следующих нескольких страницах я собираюсь углубиться в DOM с иллюстрациями того, как DOM взаимодействует с таблицами, формами, изображениями и фреймами. Я также буду обсуждать некоторые методы, доступные для добавления (и изменения) узлов в дерево DOM через JavaScript, и укажу на некоторые из лучших веб-ресурсов по этой теме.
Давайте взломать!
Создание Swap()
Первый пункт повестки дня сегодня — это иллюстрация того, как вы можете использовать DOM для выполнения одного из самых популярных приложений dHTML — обмена изображениями. Взгляните на следующий HTML-документ:
<html> <head> </head> <body> <a href="http://www.melonfire.com/" onMouseOver="javascript:imageSwap();" onMouseOut="javascript:imageSwap();"><img id="logo" src="logo_n.gif" width=50 height=50 border=0></a> </body> </html>
Теперь я настроил это так, чтобы события mouseover и mouseout на изображении обрабатывались JavaScript-функцией imageSwap() . Эта функция отвечает за обмен изображения каждый раз, когда происходит событие, поэтому давайте посмотрим на него.
<script language="JavaScript"> var normal = "logo_n.gif"; var hover = "logo_h.gif"; function imageSwap() { var imageObj = document.getElementById("logo"); var imageSrc = imageObj.getAttribute("src"); if (imageSrc == normal) { imageObj.setAttribute("src", hover); } else { imageObj.setAttribute("src", normal); } } </script>
Если вы помните то, чему я вас научил в прошлый раз, ничто из этого не должно вызывать удивления. Сначала я определил изображения « normal » и « hover » состояния, а затем создал функцию imageSwap() , которая вызывается всякий раз, когда мышь перемещается над изображением.
Функция imageSwap() получает ссылку на изображение через его идентификатор, а затем получает текущее значение атрибута изображения « src ». Затем он сравнивает значение со значениями переменных « normal » и « hover » и соответствующим образом изменяет источник изображения.
Поворачивая таблицы
Далее таблицы. Взгляните на следующий HTML-документ, который содержит таблицу с двумя строками по три ячейки в каждой.
<html><head></head><body><table border="1" cellspacing="5" cellpadding="5"><tr><td>R1, C1</td><td>R1, C2</td><td>R1, C3</td></tr><tr><td>R2, C1</td><td>R2, C2</td><td id="r2c3">R2, C3</td></tr></table></body></html>
Теперь, когда вы перемещаетесь по таблице, следует помнить об одном важном моменте — из DOM vie таблицу следует обрабатывать так, как если бы она включала дополнительный <tbody> сразу после <table> и перед <tr> теги. Добавляя это к уравнению, страница выше теперь выглядит так:
<html><head></head><body><table border="1" cellspacing="5" cellpadding="5"><tbody><tr><td>R1, C1</td><td>R1, C2</td><td>R1, C3</td></tr><tr><td>R2, C1</td><td>R2, C2</td><td id="r2c3">R2, C3</td></tr></tbody></table></body></html>
Теперь применяются обычные правила навигации DOM, как показано в следующем примере. Этот сценарий выполняет детализацию до последней ячейки второй строки и изменяет как цвет фона ячейки, так и текстовую строку внутри нее.
<script language="JavaScript"> // get to the cell // you could also use // var cellObj = document.childNodes[0].childNodes[1].childNodes[0].childNodes[0]. childNodes[1].childNodes[2]; var cellObj = document.getElementById("r2c3"); // get to the text within the cell var cellTextObj = cellObj.childNodes[0]; // set background colour cellObj.setAttribute("bgcolor", "red"); // and text cellTextObj.data = "Second row, third column"; </script>
Copyright Melonfire , 2000. Все права защищены.
Хорошо Сформированный
Другое очень популярное использование JavaScript — проверка формы — проверка данных, введенных в онлайн-форму. В следующем примере я буду использовать DOM и несколько простых JavaScript, чтобы убедиться, что флажок установлен и адрес электронной почты, введенный в текстовое поле, имеет правильный формат. Вот форма:
<html> <head> </head> <body> <form action="somescript.cgi" method="post" onSubmit="return check();"> Email address: <br> <input id="email" type="text" name="email" size="30"> <br> <input id="spam_me" type="Checkbox" name="spam_me">Yes, I want you to send me megabytes of useless advertisements via email. I love buying crummy products from people who probably flunked kindergarten. <br> <input type="submit"> </form> </body> </html>
И вот сценарий проверки:
<script language="JavaScript"> function checkEmail() { // get to the field var obj = document.getElementById("email"); // value of field var str = obj.value; // define pattern to match email address var pattern = /^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+ (.[a-zA-Z0-9_-]+)+/; // match the string to the pattern var flag = pattern.test(str); if(!flag) { alert ("Please enter a valid email address"); return false; } else { return true; } } function checkSpam() { // get to the field var obj = document.getElementById("spam_me"); // checkbox ticked? if (obj.checked) { return true; } else { alert ("Please check the box"); return false; } } function check() { // perform validation and submit form if all is well if(checkEmail() && checkSpam()) { return true; } else { return false; } } </script>
Как видите, форма отправляется только после получения положительного ( true ) результата из функции JavaScript check() . Эта функция, в свою очередь, вызывает функции checkEmail() и checkSpam() , которые сначала получают ссылки на их соответствующие элементы формы, а затем проверяют их значения на достоверность.
Copyright Melonfire , 2000. Все права защищены.
В рамке
Также интересно посмотреть, как DOM работает с фреймами. Рассмотрим следующий пример, который устанавливает два фрейма, « left.html » и « right.html ».
<html> <head> </head> <frameset cols="20%,*"> <frame name="left" src="left.html" scrolling="auto" frameborder="no"> <frame name="right" src="right.html" scrolling="auto" frameborder="no"> </frameset> </html>
Чтобы проиллюстрировать, как перемещаться по фреймам, я собираюсь написать простой скрипт, который меняет цвет фона правого фрейма при щелчке соответствующей ссылки в левом фрейме. Вот правильный кадр,
<html> <head> </head> <body id="body"> </body> </html>
и вот левый кадр — обратите внимание, как каждая ссылка вызывает changeFrameBackground() с цветом в качестве параметра.
<html> <head> </head> <body> <a href="javascript:changeFrameBackground('red')">Red</a> <br> <a href="javascript:changeFrameBackground('blue')">Blue</a> <br> <a href="javascript:changeFrameBackground('green')">Green</a> <br> <a href="javascript:changeFrameBackground('black')">Black</a> </body> </html>
Наконец, давайте посмотрим на функцию, которая выполняет всю работу.
<script language="JavaScript"> var bodyObj = top.right.document.getElementById("body"); function changeFrameBackground(col) { bodyObj.setAttribute("bgcolor", col); } </script>
Поскольку это набор фреймов, необходимо добавить префикс вызова метода document.getElementById() со ссылкой на соответствующий фрейм. Этот префикс необходим для определения DOM, какой кадр вызывается, и для получения ссылки на правильное дерево документа.
Как только ссылка на тэг <body> правого фрейма получена, изменение цвета фона фрейма выполняется простым setAttribute() .
Разветвление
DOM также поставляется с набором встроенных методов, предназначенных для управления деревом DOM, добавления и удаления узлов из него на лету. Как вы уже видели, узел в дереве DOM может быть либо HTML-тегом, либо фрагментом текста — и DOM поставляется с методами для добавления обоих этих типов узлов в дерево посредством программного кода.
Я начну с метода createElement() , который используется для создания нового тега HTML. Следующий фрагмент кода создает <img> в качестве узла и присваивает ему имя « imageObj ».
<script language="JavaScript"> var imageObj = document.createElement("img"); </script>
После того, как узел создан, ему могут быть присвоены атрибуты с помощью setAttribute() . Например, фрагмент кода
<script language="JavaScript"> imageObj.setAttribute("src", "logo_n.gif"); imageObj.setAttribute("width", "50"); imageObj.setAttribute("height", "50"); </script>
эквивалентен тегу
<img src="logo_n.gif" width="50" height="50">
После того, как узел был создан, следующий заказ — добавить его в дерево документов — задача, выполняемая методом appendChild() . Метод appendChild() используется для добавления вновь созданного узла в определенное место в дереве.
Следующий фрагмент кода прикрепит узел « imageObj » как дочерний элемент элемента, идентифицируемого как « heading1 ».
<script language="JavaScript"> document.getElementById("heading1").appendChild(imageObj); </script>
Copyright Melonfire , 2000. Все права защищены.
Dumbing It Down
Точно так же, как вы можете создавать HTML-теги как узлы, DOM также позволяет создавать новые текстовые узлы на дереве с помощью метко названного createTextNode() . Вот пример:
<script language="JavaScript"> var insultObj = document.createTextNode("Could you *be* any dumber?"); </script>
Опять же, метод appendChild() вступает в игру, чтобы присоединить новый текстовый узел к соответствующей ветви дерева документа.
<script language="JavaScript"> document.getElementById("heading1").appendChild(insultObj); </script>
Посмотрим, как это получится на примере из реальной жизни. Я собрал простую HTML-страницу, которая не содержит ничего, кроме набора тегов <p> и некоторого кода JavaScript. JavaScript создаст новый текстовый узел и новый <img> и добавит их в дерево документа в качестве дочерних элементов <p> , используя фрагменты кода, которые я только что продемонстрировал.
<html> <head> </head> <body> <p id="heading1"></p> <script language="JavaScript"> // set up the image var imageObj = document.createElement("img"); imageObj.setAttribute("src", "logo.gif"); imageObj.setAttribute("width", "50"); imageObj.setAttribute("height", "50"); document.getElementById("heading1").appendChild(imageObj); // set up the text node var insultObj = document.createTextNode("Could you *be* any dumber"); document.getElementById("heading1").appendChild(insultObj); // use this for testing var pObj = document.getElementById("heading1"); // returns IMG // alert (pObj.childNodes[0].nodeName); // returns #text // alert (pObj.childNodes[1].nodeName); </script> </body> </html>
Хотя страница содержит только один <p> , запуск сценария добавит <img> и строку текста в дерево документа, которое будет сразу же видно в браузере.
Конечно, DOM поставляется с кучей других методов — вот краткий список, вместе с объяснением их функции.
-
removeNode()— удаляет узел (и / или все его дочерниеremoveNode()) из дерева документа -
replaceNode()— заменить узел другим узлом -
cloneNode()— дублировать существующий узел -
swapNode()— поменять местами позиции двух узлов в дереве документа -
insertBefore()— вставляет узел в определенную точку дерева документа
Большинство из них говорят сами за себя, и они используются не так часто, поэтому я не планирую обсуждать их подробно — они включены сюда для полноты картины.
Выводы
Если вы хотите узнать больше о DOM, вам будет доступен ряд ресурсов в Интернете. Вот краткий список:
Официальные спецификации W3C DOM, http://www.w3.org/DOM/
Ресурсы для разработчиков Mozilla.org: http://www.mozilla.org/docs/ и
http://www.mozilla.org/docs/web-developer/
Пример кода DOM по адресу http://www.mozilla.org/docs/dom/samples/
Интересная статья о переходе от проприетарных DOM к стандарту W3C, на http://sites.netscape.net/ekrockhome/standards.html
Структурное (логическое) представление DOM по адресу http://www.xml.com/1999/07/dom/xml_dom.gif
XML введение в DOM, по адресу http://www.xml101.com/dom/
И, прежде чем я уйду, последний комментарий. Хотя новый DOM может показаться гораздо менее гибким и простым в использовании, чем те, к которым привыкли разработчики патентованных моделей, факт остается фактом: он предлагает одно очень важное преимущество: стандартизацию. Этот DOM был написан таким образом, что каждый элемент на странице наконец доступен для разработчика через стандартные правила навигации и может управляться с помощью стандартных методов и свойств объекта.
В краткосрочной перспективе может быть трудно — даже сложно — перекодировать веб-страницы в соответствии с новым DOM; Тем не менее, я считаю, что эти усилия стоит потратить, поскольку они сразу же гарантируют, что ваши страницы будут доступны для просмотра во всех браузерах, соответствующих стандартам. Следует отметить, что большая часть путаницы в прошлом (и в результате обилие проприетарных интерфейсов DOM) была вызвана отсутствием четкого руководства со стороны W3C; Теперь, когда спецификация DOM была завершена и выпущена, будущие версии всех основных браузеров должны полностью ее поддерживать, и мы надеемся, что мы увидим конец несовместимости браузеров, которая преследовала разработчиков в прошлом.
Здесь надеемся!
Примечание. Все примеры в этой статье были протестированы на Mozilla (сборка 18). Примеры являются только иллюстративными и не предназначены для производственной среды. YMMV!
Copyright Melonfire , 2000. Все права защищены.