Èåðàðõèÿ äîêóìåíòîâ â áðàçóåðå
Îáúåêòû Navigator, Window, Images, Forms
Âëîæåííîñòü äîêóìåíòîâ. Children ó äîêóìåíòà
Ïðåäûäóùàÿ ãëàâà îïèñûâàëà òàê íàçûâàåìóþ îáúåêòíóþ ìîäåëü äîêóìåíòà (DOM), êîòîðàÿ íà÷àëà èñïîëüçîâàòüñÿ ïðèìåðíî â 2000 ãîäó. Ñòàíäàðò îáúåêòíîé ìîäåëè, íàçâàííûé DOM Level 1 (à åñòü åùå è DOM Level 2, è äàæå DOM Level 3) áûë ïðèíÿò 1 îêòÿáðÿ 1998 ãîäà. Ïðè÷åì ñëåäóåò çàìåòèòü, ÷òî äàæå ýòîò ñòàíäàðò ÿâëÿåòñÿ íå áîëåå ÷åì ðåêîìåíäàöèåé (à íå îáÿçàòåëüíûìè òðåáîâàíèÿìè).
Âïðî÷åì, åñëè âñïîìíèòü èñòîðèþ ÿçûêà JavaScript, òî ëåãêî çàìåòèòü, ÷òî ÿçûê ïîÿâèëñÿ ãîðàçäî ðàíüøå. Êàêèì æå îáðàçîì ÿçûê èñïîëüçîâàëñÿ äî ââåäåíèÿ DOM-ìîäåëè?
Íà ýòîò âîïðîñ ìîæíî îòâåòèòü, ïîñìîòðåâ â îðèãèíàëüíóþ ñïåöèôèêàöèþ JavaScript, îïóáëèêîâàííóþ ôèðìîé Netscape. Õîòÿ íè äåðåâà ýëåìåíòîâ, íè ìåòîäîâ äëÿ ìàíèïóëÿöèè ýòèì äåðåâîì íå áûëî, ñïîñîáû îáðàùåíèÿ ê äîêóìåíòó óæå áûëè. Èìåííî ýòè ìåòîäû èç îðèãèíàëüíîé ñïåöèôèêàöèè òàêæå áûëè (ñ íåêîòîðûìè èçìåíåíèÿìè) ðåàëèçîâàíû è â Internet Explorer, è â Opera. Âïîñëåäñòâèè, ïîñëå ïðèíÿòèÿ ñòàíäàðòà DOM 1 ýòè ìåòîäû ïîëó÷èëè íàçâàíèå DOM 0 (òî åñòü, ôàêòè÷åñêè -- «òî ÷òî áûëî äî DOM»), è, õîòÿ ýòè ìåòîäû óæå ÿâëÿþòñÿ ïî ñóùåñòâó óñòàðåâøèìè, îíè ÷àñòî èñïîëüçóþòñÿ â ñêðèïòàõ è â íåêîòîðûõ ñëó÷àÿõ äàæå áîëåå ýôôåêòèâíû, ÷åì íîâûå DOM-ñðåäñòâà.
Î ñòðóêòóðå êëàññîâ, êîòîðûå ñóùåñòâîâàëè äî DOM, è ïîéäåò ðå÷ü.
Îáúåêòû navigator, window, images, forms
Ìîäåëü êëàññîâ áðàóçåðà, ïîçâîëÿþùàÿ ïðîãðàììàì íà ÿçûêå JavaScript âçàèìîäåéñòâîâàòü ñ äîêóìåíòîì è áðàóçåðîì â öåëîì, áàçèðóåòñÿ íà îáúåêòå window. Âñå ïîñëåäóþùèå ìîäåëè âçàèìîäåéñòâèÿ òàê èëè èíà÷å èñïîëüçóþò óæå ðåàëèçîâàííûå êëàññû.
Ôàêòè÷åñêè, îáúåêò window ÿâëÿåòñÿ îòîáðàæåíèåì îêíà áðàóçåðà â ñêðèïòå. Îí ñîäåðæèò â ñåáå îáúåêò èíôîðìàöèè î áðàóçåðå (navigator), îáúåêò «ýêðàíà» (òî åñòü âèçóàëüíîãî îòîáðàæåíèÿ) screen, ôðåéìû, åñëè òàêîâûå åñòü, ñîáñòâåííî HTML äîêóìåíò (à êóäà æå áåç íåãî?), à òàêæå ñâÿçàí ñ èñòîðèåé ïåðåõîäîâ, ïàíåëÿìè ìåíþ è òàê äàëåå...  îáùåì, áîëüøàÿ ÷àñòü òîãî, ÷òî åñòü â áðàóçåðå, åñòü òàêæå è â ýòîì îáúåêòå.
Åäèíñòâåííîå íåóäîáñòâî – êàæäûé áðàóçåð ñîäåðæèò íåìíîãî ðàçëè÷íûå ñâîéñòâà îáúåêòà îêíà, òàê ÷òî íå âñåãäà ìîæíî áûòü óâåðåííûì, ÷òî ñâîéñòâî èëè ôóíêöèÿ ïîääåðæèâàåòñÿ. Êàê ïðèìåð ìîæíî âçÿòü ïðîâåðêó ïîëíîýêðàííîãî ðåæèìà îòîáðàæåíèÿ ïðè ïîìîùè ñâîéñòâà window.fullscreen (â Mozilla Firefox ýòî ìîæíî ñäåëàòü, à â IE è Opera – íåëüçÿ). Êðîìå òîãî, íóæíî áûòü îñòîðîæíûì ñ îïðåäåëåíèåì ãëîáàëüíûõ ôóíêöèé è ïåðåìåííûõ. Ïåðåîïðåäåëèòü ôóíêöèþ, åñëè ñóùåñòâóåò äðóãàÿ ôóíêöèÿ ñ òàêèì æå èìåíåì, íåëüçÿ, à ïåðåîïðåäåëåíèå ïåðåìåííîé (èëè ÷òî åùå õóæå – èñïîëüçîâàíèå íåîáúÿâëåííîé ïåðåìåííîé) ìîæåò ïðèâåñòè ê íåïðåäñêàçóåìûì ðåçóëüòàòàì.
Åñëè îáúåêò window ñâÿçàí ñ îêíîì (èëè âêëàäêîé) áðàóçåðà, òî îáúåêò navigator ñâÿçàí ñî âñåì áðàóçåðîì öåëèêîì. Èìåííî ýòîò îáúåêò èñïîëüçóåòñÿ äëÿ îïðåäåëåíèÿ òèïà áðàóçåðà, à òàêæå îïåðàöèîííîé ñèñòåìû. Êðîìå ýòîãî, ïðè ïîìîùè îáúåêòà navigator ìîæíî îïðåäåëèòü îïåðàöèîííóþ ñèñòåìó, ÿçûê âûáðàííûé â áðàóçåðå ïî óìîë÷àíèþ è ñïèñîê mime-òèïîâ è óñòàíîâëåííûõ ïëàãèíîâ.
Îáúåêò screen òîæå ÿâëÿåòñÿ «ñîñòàâíîé ÷àñòüþ» îêíà è, â ñâîþ î÷åðåäü, ñâÿçàí ñ îáëàñòüþ ïîêàçà ñòðàíèöû (òî åñòü òîé ÷àñòüþ îêíà, â êîòîðîé è ïîêàçûâàåòñÿ óæå îòðèñîâàííàÿ ñòðàíèöà, íå âêëþ÷àÿ ñêðîëëèíã). Áëàãîäàðÿ ýòîìó îáúåêòó ìîæíî ïîëó÷àòü ýêðàííîå ðàçðåøåíèå, ñóììàðíûé ðàçìåð ñòðàíèöû è ïîëîæåíèå ñêðîëëåðîâ (òî åñòü, íàïðèìåð, ìîæíî îòñëåæèâàòü, ïðîêðóòèë ëè ïîëüçîâàòåëü ñòðàíèöó äî ñàìîãî íèçà èëè îãðàíèçîâàòü ñêðîëëèíã ìåíþ ê îïðåäåëåííîé òî÷êå ýêðàíà â ïðîöåññå ïðîêðóòêè). Êðîìå òîãî, ýòîò æå îáúåêò èñïîëüçóåòñÿ ïî÷òè âñåìè ñ÷åò÷èêàìè ïîñåùåíèé äëÿ òîãî ÷òîáû îïðåäåëèòü ðàçðåøåíèå ýêðàíà è ãëóáèíó öâåòà.
Îáúåêòû images, forms, à êðîìå íèõ – îáúåêòû links, anchors, embeds è applets èñïîëüçîâàëèñü (è ìîãóò èñïîëüçîâàòüñÿ ïî íûíåøíåå âðåìÿ) äîñòóïà ê ýëåìåíòàì äîêóìåíòà. Î íåêîòîðûõ èç ýòèõ îáúåêòîâ ïîéäåò ðå÷ü íèæå, î äðóãèõ – â ñëåäóþùèõ ãëàâàõ.
Âëîæåííîñòü äîêóìåíòîâ. Children ó äîêóìåíòà.
Ãîâîðÿ î âëîæåííîñòè, ñðàçó ïðåäóïðåæó – ðàññìàòðèâàòüñÿ áóäóò êàê êîëëåêöèè îáúåêòîâ (ôîðìû, êàðòèíêè è ïðî÷åå), òàê è çàãðóæàåìûå îáúåêòû (ñêðèïòû, êàðòèíêè è ñòèëè). Ïåðâûå – ïîòîìó ÷òî îíè ïðåäñòàâëÿþò ñîáîé àëüòåðíàòèâíûå ñïîñîáû äîñòóïà ê ýëåìåíòàì, òî åñòü ðåàëèçóþò äî÷åðíèå ýëåìåíòû äîêóìåíòà.
Âòîðûå – ïîòîìó ÷òî áîëåå ïîäõîäÿùåãî ìåñòà íå íàøëîñü (à ãäå åùå ìîæíî îïèñûâàòü «âëîæåííûå äîêóìåíòû», êàê íå âî âëîæåííîñòè äîêóìåíòîâ?), è ïîòîìó ÷òî îíè òîæå â îïðåäåëåííîé ñòåïåíè ÿâëÿþòñÿ ïîòîìêàìè äîêóìåíòà.
Èòàê, ïåðâîå – êîëëåêöèè ýëåìåíòîâ.
Êàê âû óæå çíàåòå, ê ëþáîìó ýëåìåíòó ìîæíî îáðàòèòüñÿ ïðè ïîìîùè ññûëîê âíóòðè äåðåâà ýëåìåíòîâ, à òàêæå ïðè ïîìîùè ôóíêöèé ïîèñêà ýëåìåíòîâ.
Íî îïèñûâàåìûé ñïîñîá íåìíîãî îòëè÷àåòñÿ.
Ëþáîé áðàóçåð ïî ñîîáðàæåíèÿì ñîâìåñòèìîñòè íåñåò â ñåáå íàñëåäèå ïðåäêîâ, òî åñòü – áðàóçåðîâ ìåíüøåé âåðñèè.
Ýòèì íàñëåäèåì ÿâëÿþòñÿ îáúåêòû document.forms, document.images, document.links, document.embeds è document.applets.
Åñëè ïîñëåäíèå äâà èç íèõ èñïîëüçóþòñÿ î÷åíü ðåäêî – âðÿä ëè óâèäèøü â íàøå âðåìÿ ñòðàíèöó ñî âíåäðåííûìè Java (áåç script) àïïëåòàìè, à èç âíåäðåííûõ äîêóìåíòîâ èñïîëüçóþòñÿ â ëó÷øåì ñëó÷àå Flash-àíèìàöèè, òî ïåðâûå òðè âåñüìà è âåñüìà âîñòðåáîâàíû.
Ýòè îáúåêòû ñîäåðæàò â ñåáå êîëëåêöèè (èëè, èíà÷å, ìàññèâû) ôîðì (ýòî, êàê âû ïîíÿëè, document.forms), êàðòèíîê è ññûëîê òåêóùåãî HTML-äîêóìåíòà.
Ïî ñóòè, âñå ýòè îáúåêòû ïîõîæè, ïîýòîìó ÿ áóäó ðàññìàòðèâàòü îáúåêò document.images êàê ïðèìåð âñåõ îñòàëüíûõ îáúåêòîâ.
Îáúåêò document.images ïðåäñòàâëÿåò èç ñåáÿ ìàññèâ. Òî åñòü êàæäûé ýëåìåíò ýòîãî îáúåêòà – ññûëêà íà êàðòèíêó (ïðè÷åì – òîëüêî çàäàííóþ òåãîì img, â òî âðåìÿ åùå íèêòî íå ñëûøàë ïðî ñòèëè è èñïîëüçîâàíèå ñâîéñòâà background).
Íåâàæíî, â êàêîì ìåñòå äîêóìåíòà íàõîäèòñÿ ýòà êàðòèíêà – îíà îáÿçàòåëüíî ïîïàäåò â ìàññèâ document.images
Äëÿ êàæäîé êàðòèíêè ìîæíî ìåíÿòü àäðåñ èñõîäíîãî ôàéëà ïðîñòûì èçìåíåíèåì ñâîéñòâà src êàðòèíêè, à òàêæå èçìåíÿòü width è height (íî íå âî âñåõ áðàóçåðàõ ýòî èçìåíåíèå ðàáîòàåò íîðìàëüíî).
Ñàìîå ïðèÿòíîå ñâîéñòâî ýòîãî ìàññèâà – îí â êàêîé-òî ñòåïåíè çàìåíÿåò ôóíêöèþ getElementByTagName, êîòîðàÿ áûëà ââåäåíà òîëüêî â ñàìûõ íîâûõ áðàóçåðàõ, ïðàâäà, òîëüêî äëÿ òåãà img.
Îáúåêò document.images èñïîëüçóåòñÿ äëÿ ìíîæåñòâà âåùåé. Íàïðèìåð, ñ åãî ïîìîùüþ â ñâîå âðåìÿ äåëàëèñü àíèìàöèè ïðè íàâåäåíèè ìûøè – äåëî â òîì, ÷òî ïðè ñìåíå àäðåñà èñõîäíîãî ôàéëà áðàóçåð çàãðóæàë ýòîò ôàéë (èëè áðàë èç êýøà) è – êàê ñëåäñòâèå – íà÷èíàë ïðîèãðûâàíèå gif-àíèìàöèè ïðè íàëè÷èè òàêîâîé. Äà è ïðîñòî ìîæíî áûëî ïîìåíÿòü êàðòèíêó íà äðóãóþ ïðè íàâåäåíèè
Êðîìå òîãî, ýòîò æå îáúåêò ïîçâîëÿë ñäåëàòü «ïðåäâàðèòåëüíóþ çàãðóçêó» èçîáðàæåíèé. Åñëè âû íå çíàåòå, çà÷åì ýòî íóæíî áûëî – ïðî÷òèòå åùå ðàç ïðåäûäóùèé àáçàö.
Ïðåäñòàâüòå – âñå êàðòèíêè çàãðóçèëèñü, âû íàâîäèòå ìûøü íà êíîïêó ñ òàêèì âîò ýôôåêòîì ñìåíû êàðòèíêè, è íîâàÿ êàðòèíêà íà÷èíàåò çàãðóæàòüñÿ... è ãðóçèòñÿ öåëûõ ïîëòîðû ñåêóíäû, ïðåâðàùàÿñü íà ýòî âðåìÿ â ïóñòîé êâàäðàòèê. Íåêðàñèâî, è ïîðòèò âñþ êðàñîòó.
Êîíå÷íî, ñåé÷àñ, ñ ïîÿâëåíèåì òàêèõ òåõíèê êàê CSS-ñïðàéòû, ýòîò ñïîñîá êàæåòñÿ íàèâíûì, íî â ñâîå âðåìÿ îí áûë î÷åíü âîñòðåáîâàííûì (äàæå ñåé÷àñ ìîæíî ïîèñêàòü ñêðèïòû ïîä íàçûâàíèåì «image preloader» -- âû áóäåòå ïîðàæåíû èõ êîëè÷åñòâîì).
Îáúåêò document.forms ïðåäîñòàâëÿåò äîñòóï ê ôîðìàì, ïðè÷åì â òîì æå âèäå – ýòî îáû÷íûé ìàññèâ ññûëîê íà ôîðìû (êîòîðûå, â ñâîþ î÷åðåäü, ñîäåðæàò ìàññèâû elements – ñî ññûëêàìè íà ïîëÿ ââîäà ýòèõ ôîðì). Íóæíî ñêàçàòü, ÷òî èåðàðõèÿ ôîðì äâóõñòîðîííÿÿ – ó ëþáîãî ýëåìåíòà ââîäà, êîòîðûé íàõîäèòñÿ âíóòðè ôîðìû, åñòü ññûëêà íà form (òîò ñàìûé ýëåìåíò èç document.forms). Áîëüøèíñòâî ôóíêöèé äëÿ ðàáîòû ñ ôîðìàìè èñïîëüçóþò èìåííî ýòîò îáúåêò.
Îñíîâíûì îòëè÷èåì ýòèõ îáúåêòîâ ÿâëÿåòñÿ òî, ÷òî ê ýëåìåíòó ìîæíî îáðàòèòüñÿ êàê ïî èíäåêñó (êàê â îáû÷íîì ìàññèâå), òàê è ïî èìåíè ýëåìåíòà – â òîì ñëó÷àå, åñëè ó ýëåìåíòà çàäàí ïàðàìåòð name.
À òåïåðü, ïëàâíî ïåðåéäåì îò êàðòèíîê ê çàãðóæàåìûì ýëåìåíòàì.
Ýëåìåíò, êîòîðûé çàãðóæàåòñÿ èç îòäåëüíîãî ôàéëà, ìîæíî íàçâàòü çàãðóæàåìûì. Ê ñîæàëåíèþ, ïîðÿäîê çàãðóçêè ôàéëîâ òî÷íî îïðåäåëèòü íåëüçÿ – áîëüøèíñòâî áðàóçåðîâ, êîíå÷íî, çàãðóæàþò è âûïîëíÿþò ñêðèïòû â ïîðÿäêå èõ ïîÿâëåíèÿ â HTML êîäå, íî ñòîïðîöåíòíîé ãàðàíòèè äàòü íåëüçÿ (ýòî íå îïèñàíî â ñòàíäàðòàõ).
Çàãðóæàåìûå ýëåìåíòû îáÿçàòåëüíî èìåþò àäðåñ ôàéëà èëè ðåñóðñà, èç êîòîðîãî îíè çàãðóæàþòñÿ – àäðåñ ýòîãî «ôàéëà» çàäàåòñÿ èëè ïðè ïîìîùè àòðèáóòà src, èëè – äëÿ òåãîâ rel – ïðè ïîìîùè àòðèáóòà href.
Åñëè èçìåíèòü çíà÷åíèå ýòîãî àòðèáóòà, òî áóäåò çàãðóæåíî è ïðèìåíåíî íîâîå ñîäåðæèìîå (ïî êðàéíåé ìåðå â Firefox, Opera è Internet Explorer – êàê ýòî ïðîècõîäèò â Safari ÿ íå çíàþ, ïðîâåðèòü íå÷åì). Òàêèì îáðàçîì ìîæíî çàãðóçèòü íîâóþ êàðòèíêó, ñìåíèòü ñòèëü, óêàçàòü äðóãîé àäðåñ ó iframe...
À âîò çàãðóçèòü íîâûé ñêðèïò òàêèì îáðàçîì íåëüçÿ. Ê ñîæàëåíèþ, çàìåíà àäðåñà ó òåãà script íå äàåò òàêèõ ðåçóëüòàòîâ – íîâûé ñêðèïò íå çàãðóæàåòñÿ, à ñòàðûé íèêóäà íå äåâàåòñÿ.
Åäèíñòâåííûé ñïîñîá «äîãðóçèòü» íîâûé ñêðèïò – ýòî ñîçäàòü åùå îäèí òåã script ñ íóæíûì âàì àäðåñîì.
Äà è ïðè ñîçäàíèè ýòîãî ñêðèïòà òîæå íóæíî ó÷èòûâàòü îäíó îñîáåííîñòü: åñëè ñîçäàâàòü ýòîò òåã ïðè ïîìîùè innerHtml äðóãîãî ýëåìåíòà, òî íè÷åãî íå ïîëó÷èòñÿ. Òåã ñîçäàñòñÿ, à çàãðóæåí íå áóäåò.
Ïîýòîìó òóò íóæíî èñïîëüçîâàòü èñêëþ÷èòåëüíî createElement, èëè, íà õóäîé êîíåö, document.write (÷òî î÷åíü íå ðåêîìåíäóåòñÿ – ôóíêöèÿ óñòàðåëà äàâíûì äàâíî, è áåç ïîëíîãî ïîíèìàíèÿ, êàê îíà ðàáîòàåò, ëó÷øå åå íå èñïîëüçîâàòü – íó, ïðèìåðíî êàê è innerHtml).
Òîëüêî â ýòîì ñëó÷àå ñêðèïò çàãðóçèòñÿ.
Íó, è íàïîñëåäîê, íåìíîãî ïðèÿòíîãî – äëÿ ýëåìåíòîâ, êîòîðûå çàãðóæàþòñÿ, ìîæíî ñîçäàâàòü ñîáûòèÿ çàãðóçêè (÷àùå âñåãî onLoad). ß åùå íàïîìíþ îá ýòîì â ãëàâå ïðî ñîáûòèÿ (è çàîäíî ðàññêàæó, ÷òî òàêîå ýòè ñîáûòèÿ), à ñåé÷àñ ìîæåòå ïðîñòî ñäåëàòü ïîìåòêó íà áóäóùåå, ÷òî ýòî ñâîéñòâî – åñòü.
