Основи на DOM

8 август 200719 г.

За какво е тази статия?

Тази статия е превод от книгата на Николас С. Закас ”Professional JavaScript for Web Developers”. Статията покрива част от основите на DOM, описани в самата книга, както и някой неща, добавени от самия преводач – т.е. от мене. Книгата е издадена от Wrox Press и може да бъде намерена на адреса на издателството: http://www.wrox.com/. Всички примери са тествани и работят на всички по-известни browser-и: Internet Explorer, Mozilla, Opera, Safari.

Самата статия е взета от глава 6(”DOM Basics”) на книгата и представя само 1/3 от нея.

За кого е тази статия?

Тази статия е за всеки, който има основни познания по JavaScript и иска да научи нещо повече.

Пояснения относно кода в статията

Както казах кода в статията е тестван на повечето известни browser-и. Друго, което трябва да се спомене е начина на писане имената на променливите. Както можете да забележите в самия код, някой от имената на променливите са, да речем, sText, oP, oDiv и т.н.Това се нарича Унгарска нотация, и в нея малката буква пред имета на променливата показва типът на данни, които ще се съхраняват в нея. Ето повечето тълкувания:

a – array - масив

b – boolen – 1 или 0

f – float – десетично число

fn – function - функция

i – integer – цяла число

o – object - обект

re – regular expression

s – string - низ

v – variant – може да бъде всичко

Макар да не е практика да се използва в JavaScript, а смятам че е необходимо и правилно.(авторът на книгата също.)

Пример за ползата от статията

Долу съм показал един прост и малък пример, за това какво би трябвало да може да направи един човек, ако е прочел цялата глава(за съжаление текущата статия свършва точно там, където започва информацията засягаща методите и свойствата използвани в кода долу).

Какво прави кода:

Показва съобщение на екрана на потребителя, с което брой от n до 0 секунди, след което изтрива съобщението и на негово място динамично построява проста форма за попълване на коментар.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Strict//EN">

<html>

  <head>

	<title>Dom Example</title>

	<script type="text/javascript">

	  var system =

	  {

		timeBeforeStart: 5,

		countDownContainer: undefined,

		hasLoaded: 0,

		hasStarted: 0,

		onload: undefined,

		onstart: undefined,

		objects:

		{

		  form: undefined

		}

	  };

	  function startCountDown()

	  {

		if ( system.hasLoaded === 0 )

		{

		  // We create a div for the count down

			var oDiv = system.countDownContainer = document.createElement("div");

			oDiv.appendChild( document.createTextNode("Remainning " + system.timeBeforeStart + " seconds before start.") );

			document.body.appendChild( oDiv );

		  system.hasLoaded = 1;

		  setTimeout( system.onload, 1000 );

		  return;

		}

		if ( --system.timeBeforeStart != 0 )

		{

		  var oDiv = system.countDownContainer;

		  oDiv.replaceChild(  document.createTextNode("Remainning " + system.timeBeforeStart + " second" + ( system.timeBeforeStart-1 ? 's' : '' ) + " before start."), oDiv.firstChild );

		  setTimeout( system.onload, 1000 );

		}

		else

		{

		  document.body.removeChild( system.countDownContainer );

		  system.hasStarted = 1;

		  system.onstart();

		}

	  }


	  function createForm()

	  {

		var oFragment = document.createDocumentFragment();

		// We set the form

		  var oForm = system.objects.form = document.createElement("form");

		  oFragment.appendChild( oForm );

		  oForm.method = "post";

		  // we set the text field

			oForm.appendChild( document.createTextNode("username: ") );

			var oText = document.createElement("input");

			oText.type = "text";

			oText.name = "userName";

			oForm.appendChild( oText );

			oForm.appendChild( document.createElement("br") );

		  // We set the password field

			oForm.appendChild( document.createTextNode("password: ") );

			var oPassword = document.createElement("input");

			oPassword.type = "password";

			oPassword.name = "userPassword";

			oForm.appendChild( oPassword );

			oForm.appendChild( document.createElement("br") );

		  // We set the comment field

			oForm.appendChild( document.createTextNode("comment: ") );

			oForm.appendChild( document.createElement("br") );

			var oComment = document.createElement("textarea");

			oComment.rows = "15";

			oComment.cols = "30";

			oComment.name = "userComment";

			oForm.appendChild( oComment );

			oForm.appendChild( document.createElement("br") );

		  // We create the submit button

			var oSubmit = document.createElement("input");

			oSubmit.type = "submit";

			oSubmit.value = "Submit";

			oForm.appendChild( oSubmit );

		document.body.appendChild( oFragment );

	  }


	  onload = system.onload = startCountDown;

	  system.onstart = createForm;

	</script>

  </head>


  <body>

  </body>

</html>

Както споменах този код е само демонстация на основните неща, един човек вникнал надълбоко в материята, може да постигне много по сериозни и сложни резултати. Ами..... аз мисля да започваме. Основи на DOM* DOM, самостоятелно, е може би една от най-големите иновации в мрежата, след като HTML* беше първоначално използван, за да се свържат отделните документи заедно. DOM дава на програмистите неограничен достъп до HTML, давайки им възможност да го видят като XML*-ски документ. DOM представлява по-високо ниво Динамичен HTML, пресъздаден от Майкрософт и Нетскейп, в един истински мулти платформен самостоятелен език. DOM, или Document Object Model, в превод означава Обектния Модел на Документа HTML = Hyper Text Markup Language XML = eXtensible Markup Language Какво е DOM? Преди да почнем да говорим за DOM, трябва да разберем какво е довело до неговото създаване. Въпреки че DOM беше сериозно повлиян от възхода на Динамичния HTML, W3C* направи крачка назад и го приложи първо за XML. W3C = World Wide Web Consortium Въведение в XML XML беше първоначално създаден от по-ранен език наречен SGML*, чиято цел беше да дефинира синтаксис за езиците за маркиране, така че да представят информация чрез тагове. SGML = Standart Generalized Markup Language Таговете се състоят от текст затворен между знаците за по-малко (”<”) и по-голямо (”>”), както в <tag>. Таговете биват два вида: за отваряне на област( като <start> ) и за затваряне на дадена област. Таговете за затваряне на дадена област изглеждат почти по същия начин, като тези използвани за отваряне на област, само че имат наклонена черта (”/”) точно след отварящия знак за по-малко.( като </start> ). SGML също така дефинира атрибути за таговете, който представляват различна информация сложена в даденият таг, както когато се задава адреса на една картинка в HTML: <img src=”picture.jpg”>. Не е случайно че примера е на HTML, защото оригиналният HTML е най-известната имплементация на SGML досега. SGML беше използван, за да се дефинира DTD* за HTML, и още се използва за да се пишат DTD-а за XML. Проблемът на SGML беше че позволява да се използва неправилен синтаксис, което правеше създаването на създаването на четец за HTML трудна задача:

Някой тагове не изискваха затварящ таг, като <img>. Добавянето на затварящ таг води до грешка.
Таговете можеха да се слагат във всякакъв ред. Примерно, Това е пробен низ, се третираше като правилно разположение, въпреки че е видимо че разположението на таговете не е симетрично.
Някой атрибути не изискваха стойности, като nowrap в <td nowrap>.
Атрибутите можеха да бъдат дефинирани както с кавички, така и без. Това значи че <img src=”picture.jpg”> и <img src=picture.jpg> се третираха по един и същ начин.

Всички тези бележки, правеха създаването на SGML базиран език, найстина трудна задача. И тука е мястото където се намесва XML. DTD, или Document Type Definition, в превод означава Дефиниция за Типът на Документа XML не се стреми към свободата, която SGML предлага. Вместо това дефинира следните правила:

Всеки отварящ таг трябва задължително да има и затварящ.
Ако за даден таг не е предвиден затварящ такъв, тогава в края на въпросният таг се добавя ”/”, като в <img />.
Таговете трябва да се затварят в точният ред в който се отварят, като Това е пробен низ.
Всички атрибути задължително изискват стойности.
Всички стойности на атрибутите трябва задължително да са обградени в кавички.

Тези прости правила, на който е изграден XML, помогнаха да се избегнат всичките проблеми около SGML. Поради това от XML, само за първите 6 години, се появиха различни езици базирани на него: MathML, SVG, RDF, RSS, SOAP, XSLTm XSL-FO, и съответно доведе до реформиране на HTML в XHTML.

<?xml version=”1.0”?>

      <books>

        <!--  begin list of books -->

        <book isbn=”07645443555”>

          <title>Professionl JavaScript for Web Developers</title>

          <author>Nicholas C. Zakas</author>

          <description><![CDATA[

Professional JavaScript for Web Developers brings you up to speed on the latest innovations in the word of JavaScript. This book provides you with the details of JavaScript implementations in Web browsers and introduces the new capabilities relating to recently-developed technologies such as XML and Web Services.

          ]]></description>

          </book>

          <book isbn=”0764570773”>

            <title>Beginning XML, 3rd Edition</title>

            <author>David Hunter</author>

            <author>Andrew Watt</author>

            <author>Jeff Rafter</author>

            <author>Jon Duckett</author>

            <author>Danny Ayers</author>

            <author>Nicholas Chase</author>

            <author>Joe Fawcett</author>

            <author>Tom Gaven</author>

            <author>Bill Patterson</author>

            <description><![CDATA[

Beginning XML, 3rd Edition, like the first two editions, begins with a broad overview of the technology and then focuses on specific facets of the various specifications for the reader. This book teaches you all you need to know about XML: what it is, how it works, what technologies surround it, and how it can best be used in a variety of situations, from simple data transfer to using XML in your Web pages. It builds on the strengths of the first and second editions, and provides new material to reflect the changes in the XML landscape - notably RSS and SVG.

            ]]></description>

            </book>

            <book isbn=”0764543555”>

              <title>Professional XML Development with Apache Tools</title>

              <author>Theodore W. Leung</author>

              <description><![CDATA[

If you`re a Java programmer working with XML, you probably already use some of the tools developed by the Apache Software Foundation. This book is a code-intensive guide to the Apache XML tools that are most relevant for Java developers, including Xerces, Xalan, FOP, Cocoon, Axis, and Xindice.

              ]]></description>

            </book>

          </books>

Ето тука можете да видите реално как ще изглежда този XML документ в browser-а. Всеки XML документ започва със XML въведение(пролог), както е показано на първата линия в предишния код:

<?xml version=”1.0”?>

. Този ред казва на различните програми, включително и на browser-а, че текущия документ, трябва да бъде третиран като XML-ски, и че за него са валидни всички правила дискутирани по-рано в статията. Следващата линия:

<books>

, е елемент на документа(елемент се счита съдържанието на всеки отаварящ и затварящ таг). Следващата линия:

<!--  begin list of books -->

е коментар, и е едно от нещата наследени от SGML. Малко по-надолу в кода се намира тагът/елементът <description>(описание). В него намираме следният код:

<![CDATA[  ]]>

. Това служи, за да се каже на програмата, която чете XML-ския файл, че текста заключен в този таг не бива да се подлага на правилата на XML, а трябва да бъде третиран като обикновен текст. Ако да речем бяхме написали:

<description>If you’re a Java programmer working with XML, you probably already use some of the tools developed by the Apache Software Foundation. This book is a code-intensive guide to the Apache XML tools that are most relevant for Java developers, including Xerces, Xalan, FOP, Cocoon and Axis. <and Xindice>

</description>

То програмата щеше да сметне <and Xindice> за таг и тъй като той няма затварящ, програмата щеше да прекъсне работа, казвайки че този XML файл е невалиден. Затова се и използва

<![CDATA[  ]]>

тага, за да се каже, че текста там не трябва да се подлага на правилата на XML.

Document – Най-високият нод в йерархията, към който се закачат всички други нодове.
DocumentType – Обектното представяне на DTD използвайки <!DOCTYPE>, като в <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>. Този нод няма дъщерни нодове.
DocumentFragment – Използва се за временно съхраняване на нодове.
Element – Представя съдържанието на отварящ и затварящ таг като <tag></tag> или <tag />. Този нод е единственият, който може да съдържа атрибути или други дъщерни нодове.
Text – Представя обикновен текст в XML документ, съдържащ се между отварящия и затварящия таг, или в CData Секция. Този нод не може да има дъщерни нодове.
CDataSection – обектното представяне на <![CDATA[ ]]>. Този нод може да има само текстови нодове, като дъщерни такива.
Comment – представяне на XML коментар. Този нод няма дъщерно нодове.

Даден документ е направен от йерархия от много такива типове нодове. Вземете за пример следния XML код:

<?xml version=”1.0”?>

  <employees>

    <!-- only employee -->

    <employee>

    <name>Michael Smith</name>

    <position>Software Engineer</position>

    <comments>

      <![CDATA[  His birthday is on 8/14/68.  ]]>

    </comments>

    </employee>

</employees>

Ето тука можете да видите реално как ще изглежда този XML документ в browser-а. Този код може да бъде представен в DOM, както е показано по-долу:

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_REFERENCE_NODE (5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTUION_NODE (7)
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9)
Node.DOCUMENT_TYPE_NODE (10)
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12)

Бележка: Ако се чудите за какво би ви потрябвало това, си предтсвете, че имате за задача да извлечете цялата информация от една таблица. Къде е основният проблем: Ами не знаете от колко тага е съставена таблицата. Тя може да бъде както просто съставена:

…

<td>Some text here</td>

…

така и сложно:

…

<td>

  <div style=”color: black;”>

    <a href=”#”>Some text here</a>

  </div>

</td>

…

Затова вие трябва да се спуснете по всички нодове(започвайки от <td />) и за всеки да проверявате дали е текст(Node.TEXT_NODE). Ако горния списък го нямахте това би било много трудно постигнато. Интерфайсът на нодовете също така дефинира група от свойства и методи, който всеки нод притежава. А именно: Свойство/Метод - Какво връща - Описание

nodeName – Низ – Името на нода; Това зависи от типът на нода.
nodeValue – Низ – Стойността на нода; Това зависи от типът на нода.
nodeType – Число – Типът на нода; И да, това са онези същите константи, които дефинирахме, преди малко.
ownerDocument – Адрес – Адресът на нода, който е родител на текущия нод.
firstChild – Адрес – Адресът на първият дъщерен нод.
lastChild – Адрес – Адресът на последният дъщерен нод.
childNodes – Масив – Масив от адреси към всички дъщерни нодове на текущия нод.
hasChildNodes – Число(0 или 1) – връща 1 ако текущия нод има дъщерни нодове. Ако няма, връща 0.
attributes – Масив – масив от обекти. Всеки обект представя атрибут на текущия нод. Това свойство е валидно само за нодове тип Element.
appendChild( node ) – Адрес – Добавя дъщерен нод към текущия нод и връща адресът на новосъздадения нод.
removeChild( node ) – Адрес – Обратно на appendChild(), removeChild() премахва дъщерен нод от текущия нод, и връща адрес към премахнатия нод. Ако този адрес не бъде присвоен на някаква променлива, то премахнатия нод се загубва завинаги.
replaceChild( newnode, refnode ) – Адрес – Заменя дъщерния нод refnode със newnode нод и връща адресът на новия нод.
insertBefore( newnode, refnode ) – Адрес – Добавя дъщерения нод – newnode, преди refnode нода.

Като допълнение DOM, добавя няколко допълнителни свойства, които обаче не са много популярни сред програмистите и рядко се използват:

NodeList – масив от всички нодове, индиксирани в реда си на срещане в документа.
NamedNodeMap – масив от всички нодове, индиксирани по име.

Другите DOM-ове Всеки език базиран на XML, като XHTML и SVG, може да се възползва от ядрото на DOM, част от него дискутирано токущо, защото технически тези езици са си XML. Въпреки това, много езици дефинират свой собствено DOM-ове, за да разширят ядрото на XML и да си добавят собствени спецификаций. Едновременно с разработването на DOM за XML, W3C разработи и DOM, специлиазиран в XHTML(и HTML). Този DOM добавя спецификацията, че всеки елемент се представя от свой собствен тип, като HTMLDivElement, което отговаря на <div>. Това правило има много малко изключения, за много малко елементи, за които не се изискват специални свойства или методи, различни от тези които всеки елемент получава по принцип.

<html>

  <head>

    <title>DOM Example</title>

    <script type=”text/javascript”>

      function bodyOnLoad()

     {

        /* All the JavaScript code here */

      }

    </script>

  </head>


  <body onload=” bodyOnLoad()”>

    <p style=”color: red;” id=”p1”>Hello World!</p>

    <p>Isn`t it exciting?</p>

    <p>You are learning to use the DOM!</p>

  </body>

</html>

Малко поясния относно кода: Когато една страница започне да се download-ва на компютъра на потребителя, browser-а започва да я чете в момента на пристигането на първия бит информация. Съответно, всичко друго, като изграждане на DOM дървото или изпълнението на JavaScript се върши в движение. Затова е най-добре да се работи с DOM само когато страницата се е заредила напълно, т.е. DOM-а напълно е завършил дървото си. Също така, за да се постигне това, се използва функция, в нашия случай bodyOnLoad(), чрез която вече програмиста стартира всичко друго, което му трябва. За да накара bodyOnLoad() да се стартира със зареждането на страницата, се използва onload свойството на <body /> тага. По същата логика, ще разберете, че ако не използваме фунцкия е невъзможно да вземеш адреса на, да речем, първия таг, защото дефакто в момента, когато browser-а е почнал да изпълнява JavaScript-а, частта с тага сигурно дори още не се е download-нала на компютъра на клиента. И така... за да получим достъп до <html> елемента ще използваме documentElement свойството:

  var oHtml = document.documentElement;

documentElement свойството сочи към елемента, който се намира най-отгоре в йерархията.

  var oHead = oHtml.firstChild;

  var oBody = oHtml.lastChild;

Ако искате можете да използвате свойството childNodes[], което нод съдържаш дъшерни нодове притежава:

  var oHead = oHtml.childNodes[0];

  var oBody = oHtml.childNodes[1];

Ако искате може да проверите точно колко дъщерни нода притежава даден нод със свойството length на childNodes:

  alert( oHtml.childNodes.length );

Това би трябвало да ви изкара ”2”. Проверка за типа на нода Може да проверите типа на нода използвайки nodeType свойството:

  alert( oHtml.nodeType );

  alert( document.nodeType );

Първия ред ще доведе до ”1”, а втория ”9”. Сега е момента да се сетите за онази малка таблица, за която ви казах че ще ви трябва много. Ако се върнете на нея и направите справка, ще видите, че oHtml отговаря на Node.ELEMENT_NODE, а document е Node.DOCUMENT_NODE. Същия ефект можете да постигнете ако използвате следния код:

  alert(oHtml.nodeType === Node.ELEMENT_NODE);

  alert( document.nodeType === Node.DOCUMENT_NODE );

  Node =

  {

	ELEMENT_NODE: 1,

	ATTRIBUTE_NODE: 2,

	TEXT_NODE: 3,

	CDATA_SECTION_NODE: 4,

	ENTITY_REFERENCE_NODE: 5,

	ENTITY_NODE: 6,

	PROCESSING_INSTRUCTUION_NODE: 7,

	COMMENT_NODE: 8,

	DOCUMENT_NODE: 9,

	DOCUMENT_TYPE_NODE: 10,

	DOCUMENT_FRAGMENT_NODE: 11,

	NOTATION_NODE: 12

  };

Сега вече кода би трявало да проработи. Относно атрибутите Както споменах по-рано, само Element таговете имат атрибути(Въпреки че всеки нод, без значение типа, наследява такова свойство, само при Element типовете това свойство дефакто има значение). Ето част от методите и свойствата, който свойството attributes притежава:

getNamedItem( name ) – връща нодът, чието nodeName свойство е равно на name.
removeNamedItem( name ) – премахва нода, чието nodeName свойство е равно на name.
setNamedItem( node ) – добавя нод към атрибутите на текущия нод.
item( position ) – връща нода, на назиция position.
length – показва броя на атрибутите на дадения нод.

<p style=”color: red;” id=”p1”>Hello World!</p>

За да веземем адрес на нода представящ тага, ще използваме:

  var oP = document.body.firstChild;

Да речем че ние се интересуваме какво е id-то на тага. Това може да го проверим ето така:

  alert( oP.attributes.getNamedItem(”id”).nodeValue );

Или:

  var sId = oP.attributes.getNamedItem(”id”).nodeValue;

  alert(sId);

Ако искаме да сменим стойността на id-то на , ще направим следното:

  oP.attributes.getNamedItem(”id”).nodeValue = ”newId”;

Тъй като е неприятно всеки път да пишем nodeValue или nodeName, в DOM са въведени две допълнителни свойства, съответно value и name, който всеки attr нод притежава. Тези свойства са синхронизирани със ”братята” си, така че няма проблем кое ще използвате. DOM предлага и още нещо свързано с опростяване кода, който се пише от програмиста. това са няколко метода, който са методи на самия нод, а не на attributes свойството:

getAttribute( name ) – същото като attributes.getNamedItem( name ).value;
setAttribute( name, newValue ) – същото като attributes.getNamesItem( name ).value = newValue;
removeAttribute( name ) – същото като attributes.removeNamesItem( name );

С тези методи горе изписания код може да се преработи и да стане много по-разбираем:

  var oP = document.body.firstChild;

  var sId = oP.getAttribute(”id”);

  alert( sId );

  oP.setAttribute( ”id”, ”newId” );

  sId = oP.getAttribute(”id”);

  alert( sId );

Ако искаме можем сега да вземем стойността на текста вътре в самия таг:

  var oP = document.body.firstChild;

  var sText = oP.firstChild.nodeValue;

  alert( sText );

Тука свършва първата част от главата. Надявам се статията да е била добра.

Превод: JS ([email protected])

За повече техническа информация относто SGML и XML посетете http://www.w3.org/TR/NOTE-sgml-sml.html.

Днес XML е една от най-бързо развиващите се технологии в светът. Неговата основна цел е да представя информация в структуриран вид използвайки обикновен текст. XML файловете обаче не са като базите данни(където информацията също се съхранява в структуриран вид). Ето един пример за XML файл:

Ако се интересувате повече от XML и всевъзможните му приложения, е добре да си набавите Beginning XML, 3rd Edition издателство Wiley Publishing.

API* за XML След като XML беше одобрен като език, на дневен ред излезе нуждата от език за програмиране, с който да се представя и манипулира XML-a. API, или Aplication Program Interface, в превод означава Интерфайса за дадена програма(апликация) Първо се появи SAX*, предоставяйки API, базирано на събития. SAX, просто започва да чете от началото на файла и всеки път когато намери стартиращ/затварящ таг, атрибут, или друг XML синтаксис, изтрелва събитие. Работа на разработчика е обаче да установи какво да прави когато дадено събитие бъде изтреляно. SAX, или Simple API for XML, SAX беше добър, защото работеше бързо и точно, предоставяйки пълна информация относно XML-а. Неговият недостатък беше в това, че беше неспособен да спре, да се върне назаде или да отиде до точно определена част от файла. DOM e API за XML с дървовидна струтура. Неговата основна цел не е просто да прочете кода, а по-точно да представи въпросния код, използвайки поредица(серия) от вътрешно-свързани обекти, които могат да бъдат модифицирани директно, без да е нужно кода да почва да се чете отначало. Използвайки DOM, кодът се прочита само веднъж, за да се създаде тази дървовидна структура, за която говорехме (за което понякога се използва и SAX), след което повторното четене на кода е ненужно, защото XML-а е напълно пресъздаден в DOM модел, и оригиналният код вече не е нужен. Въпреки че DOM е доста по-бавен от SAX и изисква много повече ресурси, заради толкова многото обекти, които създава, точно той е избран да се използва от Web browser-ите и JavaScript-а.

Имайте превид, че DOM, е независимо API, т.е. не е свързан с Java, JavaScript, или някой друг език. Но за целите на тази статия, ще запазя фокуса върху връзката между JavaScirpt и DOM.

Йерархия от възли(нодове) Та какво значи е API с дървовидна структура? Когато говорим за DOM дървета говорим за йерархия от нодове. DOM дефинира интерфейса за нодовете, както и голям брой от типове нодове, за да покаже многото аспекти на XML:

Всеки правоъгълник представя различен нод в DOM дървото, като в удебелено е показан типът на нода, а другото е съдържанието му. Едновременно коментарите и <employee /> нодовете се считат за дъщерни нодове на <employees />, и същевременно <employees /> се счита за майчин нод на коментарите и <employee /> нодовете. Нод интерфейса дефинира 12 константи, чрез които ще можете да разберете типът на даден нод(Тези константи са много важни и примери с тях се разглеждат по-нататък в статията):

Нормалният HTML не е валиден XHTML; Въпреки това, много нови web browser-и все още конвентират нормалния HTML в DOM документ. Въпреки това, винаги е най-добре да използвате XHTML, когато пишете даден код.

W3C също така е и публикувала и различни DOM-ове дефинирани за SVG( http://www.w3.org/TR/SVG ), SMIL Animation( http://www.w3.org/TR/smil-animation ) и MathML( http://www.w3.org/TR/MathMl2 )

DOM Поддръжка Както казах преди, не всички browser-и поддръжат DOM. Ако говорим направо, Mozilla най-добре се справя с DOM и работи с най-новите стандарти, т.е. поддържа почти целия DOM ниво 2 и част от DOM ниво 3. След Mozilla, Opera и Safari са другия най-добър избор. те направиха някои доста значителни стъпки, относно DOM поддръжката – поддръжат целия DOM ниво 1 и по-голямата част от DOM ниво 2. Най-назад на опашката се реди Internet Explorer, с пълната си неподдръжка на кавото и да било. И като заговорихме за DOM... И така стига теория. Отсега нататък преминаваме на практика, САМО на практика, е и малко теория ще има, но важното е че в следващите секции най-добре ще се запознаете с DOM и с неговите способности. Достъп до отделни нодове Нека за следващите няколко секции да си преставим, че имаме следния HTML документ:

Заради грешно разбиране на DOM, Internet Explorer5.5 връща <body /> елемента вместо <html />. В Internet Explorer 6.0 този проблем е оправен.

Сега вече променливата oHtml съдържа обект, отговарящ на <html /> тага. Ако искате да получите достъп до <head /> и <body /> елементите може да използвате следното:

Не се притеснявайте ако това нещо не проработи от първия път в Internet Explorer. Затова си има причина. Internet Explorer, както казах, едвам поддържа DOM ниво1, и не е чудно, че много неща при него не ратотят. За да се избегне това, ще трябва сами да си дифинираме този Node обект.

Дефинирането на Node обект за Internet Explorer не се различава по нищо от нормалното дефиниране на обект.

Имайте предвид, че всеки от тези методи, връща нод тип Attr, а не стойноста на атрибута, който търсим

Когато даден нод се използва, за да се представя атрибут, то nodeName свойството на този нод е равно на името на атрибута. Също така nodeValue свойството е равно на стойността на атрибута. За пример, нека да вземем, първия таг от body секцията:

Редактирано 8 август 200719 г. от Rincewind2 (преглед на промените)

Добре дошли!

Основи на DOM

Featured Replies

Разглеждащи това в момента 0

Дарение

Бюлетин

Профил

Навигация

Търсене

Конфигуриране на push известия в браузъра

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)