Aşağıdakı nümunə sənədin bütün uşaqları arasında dövr edir.

For(var i=0; i BODY

Bu xüsusiyyət üsluba nəzarət edir. Bu, CSS-də üslub təyin etməyə bənzəyir.

Məsələn element.style.width parametrini təyin edə bilərsiniz:

Bu düymə üçün mənbə kodu:

Ümumi dəyişdirmə qaydası var - əgər CSS atributunda defislər varsa, üslubu təyin etmək üçün onları böyük hərflərlə əvəz etməlisiniz.

Məsələn, z-index xassəsini 1000-ə təyin etmək üçün aşağıdakıları təyin etməlisiniz:

Element.style.zIndex = 1000

Bir vaxtlar bu xüsusiyyət yalnız IE-də dəstəklənirdi. İndi bütün müasir brauzerlər bunu dəstəkləyir.

O, node daxilində bütün HTML kodunu ehtiva edir və dəyişdirilə bilər.

innerHTML xüsusiyyəti əsasən səhifənin məzmununu dinamik şəkildə dəyişmək üçün istifadə olunur, məsələn:

Document.getElementById("footer").innerHTML = "Sağol!"

Bəlkə də innerHTML ən çox istifadə edilən DOM element xüsusiyyətlərindən biridir.

Bu xüsusiyyət elementin sinfini təyin edir. Bu, "class" html atributuna tamamilə bənzəyir.

Elem.className = "yeni sinif"

Və “on...” ilə başlayan digər xüsusiyyətlər müvafiq hadisələr üçün mağaza idarəedici funksiyaları. Məsələn, siz onclick hadisə idarəçisi təyin edə bilərsiniz.

Bu xassələr və hadisə idarəediciləri haqqında ətraflı məlumat üçün baxın

Mövzu həqiqətən mürəkkəbdir. Amma, necə deyərlər, şeytan onun çəkildiyi qədər qorxunc deyil. Ən çətin qozu buradan əldə edirəm: mümkün qədər həzm oluna bilən, lakin tamamilə primitiv olmayan “rəngləmək” kimi super vəzifə. İndiyə qədər oxuduğum bütün materiallar ya abstruktivdir, ya da primitivdir.

DOM abreviaturası deməkdir Sənəd Obyekt Modeli(sənəd obyektinin modeli).

DOM HTML, XHTML və XML sənədlərinin məzmununa daxil olmaq üçün proqramlaşdırma interfeysidir, yəni HTML, XHTML və XML teq və atributlarını, həmçinin proqramlaşdırma obyektləri kimi CSS üslublarını təmsil edir. Həm JavaScript, həm də digər veb proqramlaşdırma dilləri bu modellə işləyir.

Bir az tarix

4 DOM səviyyəsi var (0, 1, 2 və 3).

Səviyyə 0 (1996) Səviyyə 1-dən əvvəl mövcud olan DOM modellərini əhatə edirdi. Bunlar əsasən kolleksiyalardır: sənəd.şəkillər, sənəd.formalar, sənəd.layerlər və sənəd.hamısı. Bu modellər W3C tərəfindən dərc edilən rəsmi DOM spesifikasiyası deyil. Daha doğrusu, onlar standartlaşdırma prosesi başlamazdan əvvəl mövcud olanlar haqqında məlumatları təmsil edirlər.

Səviyyə 1 (1997) həmçinin XML sənədlərinin emalı üçün əsas funksionallığı da əhatə edirdi: fərdi qovşaqlarla işləməyin çoxsaylı üsulları, XML emal təlimatları ilə işləmək və s.

Bundan əlavə, DOM səviyyəsi 1 fərdi HTML elementlərini idarə edə bilən bir sıra xüsusi interfeysləri ehtiva edir. Məsələn, HTML cədvəlləri, formalar, seçim siyahıları və s. ilə işləyə bilərsiniz.

DOM Level 2 (2002) bir neçə yeni funksiya əlavə etdi.

DOM Səviyyə 1-də ad məkanları üçün dəstək olmasa da, DOM Səviyyə 2 interfeysləri XML sənədlərinin tərtibi və işlənməsi tələbləri ilə əlaqəli ad fəzalarını idarə etmək üsullarını ehtiva edir.

Bundan əlavə, DOM səviyyəsi 2 hadisələri dəstəkləyir.

Səviyyə 2 DOM spesifikasiyasının cari səviyyəsidir, lakin W3C Səviyyə 3 spesifikasiyasının bəzi bölmələrini tövsiyə edir.

DOM Level 3, DOM Level 2-nin funksionallığını genişləndirən spesifikasiyanın işçi layihəsidir. Spesifikasiyanın bu versiyasının ən mühüm xüsusiyyətlərindən biri çoxsaylı DOM genişləndirmələri ilə işləmək bacarığıdır.

"Proqram interfeysi" nə deməkdir?

İngilis dili interfeysi "əlaqə sahəsi" kimi tərcümə edilə bilər. Kompüter, kobud desək, yalnız iki şeyi başa düşür: boş bit və dolu bit. Kompüterin “danışdığı” dil sonsuz sayda müxtəlif birləşmələr verən sıfırlar və birlərin sonsuz sətri kimi təsəvvür edilə bilər.

İstənilən proqram kodu, kompüterin işlədiyi bu “sıfırlar və birlərin” proqramçı üçün başa düşülən şərhidir. Beləliklə, istənilən proqramlaşdırma dili insan-maşın interfeysidir.

Brauzerlər digər kompüter proqramları kimi işləyir. Onlar HTML, XML, CSS kodları, JavaScript, PHP, Perl və s.-ni “sıfırlar və birlər” şəklində şərh edirlər. Bu çoxdilliliklə mübarizə aparmaq üçün ümumi platforma lazımdır. Bu platforma DOM-dur - konkret proqramlaşdırma dilindən və ya işarələmədən asılı olmayan spesifikasiya. Bu, veb səhifələrin yaradılması ilə əlaqəli bir çox məşhur proqramlaşdırma dillərində istifadə edilə bilən və DOM obyektlərini başa düşmək və şərh etmək qabiliyyətinə malik bir interfeysdir.

DOM və brauzerlər

DOM və JavaScript

JavaScript-də DOM obyektlərinin iyerarxik nərdivanının yuxarı hissəsi, bu interfeysin bir növ “dirijoru” sənəd obyektidir və DOM obyektləri onun xassələrinə, xassələrinin xassələrinə və s. Onlara DOM qovşaqları da deyilir.

DOM səviyyəsi 2-də 12 növ qovşaq var. Hər bir DOM node növünə unikal adı olan bir sabit təyin edilir. Əksər qovşaqlar XML ilə işləmək üçün nəzərdə tutulmuşdur. Etdiyimiz HTML - JavaScript montajında ​​yalnız 5 növdən istifadə etmək olar. Amma hətta bu “aysberqin ucu” da çox “yayılan ağacdır” və onu bir-iki dərsdə əhatə etmək mümkün deyil.

W3C DOM spesifikasiyasında müəyyən edilmiş qovşaq tipi sabitlərinin tam dəsti (HTML - JavaScript üçün mövcud olan qovşaqlar mavi rənglə vurğulanır):

* Qeydlər təhlil edilməmiş bölmələrin formatını, qeyd atributuna malik elementlərin formatını və ya direktivin ünvanlandığı proqram proqramını müəyyən edən adlardır.

(Bu aydın deyil? Mən də hələ çox əmin deyiləm.)

DOM-da sənəd quruluşu

DOM Başlığı

Paraqraf mətni

Budur onun DOM ağacının diaqramı:

Hər bir node uşaq qovşaqları ola bilər (oxlar diaqramda onlara aparır). Sənəd obyekti - sənəd ağacının əsası - həm də qovşaqdır, lakin onun ana qovşağı yoxdur və digər qovşaqlarda olmayan bir sıra xüsusiyyətlərə və üsullara malikdir. Onun bir uşaq qovşağı var: element.

Elementin iki uşaq qovşağı var: və , bunun üçün onlarda olan bütün elementlər uşaq olur.

Diqqət!

DOM Başlığı

"Element" və "teq" sinonim deyil. Teq işarələmə işarəsidir: - bunlar iki fərqli teqdir. Element isə bu teqlərlə işarələnmiş obyektdir:

Elementlər və

İçində mətn var. Bunlar onların uşaq mətn qovşaqlarıdır. Elementin həmçinin atributu var: align="center" . Atribut qovşaqları həm də onları ehtiva edən elementlərin uşaq qovşaqlarıdır.

Düyünlərin bəzi xüsusiyyətləri

Kiçik giriş

Bir daha təkrar edirəm: skriptlərdə səhifə elementlərinə daxil olanda biz təkcə Javascript dili ilə deyil, həm də ona daxil edilmiş DOM interfeysi ilə məşğul oluruq. Bəzən bunun fərqində olmaq lazımdır, bəzən “nəsrlə danışdığımızı” unuda bilərsiniz.

Biz artıq bu şəkildə DOM obyekt modelindən bəzi xassə və metodlardan istifadə etmişik. Ona görə də vaxtaşırı əvvəlki dərslərə keçidlər verəcəm.

Bu dərsdə, bütün brauzerlərdəki bütün qovşaqların bütün xüsusiyyətlərini nəzərə alaraq, "akademik" marşruta getməyəcəyik. Əvvəlcə onların ən praktiki və “münaqişəsiz”i ilə tanış olaq.

Buna görə də, adət olduğu kimi, "əsas xüsusiyyətlər" ilə başlamayacağıq: nodeName və nodeValue.

tagName

Element teqinin adını ehtiva edən sətri qaytarır. Bütün tagName dəyərlərində yalnız böyük hərflər var.

Misal

.tagName

tagName xassəsinin sınaqdan keçirilməsi document.write(document.getElementById("testTagName"

).tagName)

Nəticə

tagName xassəsinin sınaqdan keçirilməsi

daxiliHTML

Elementin məzmununa giriş imkanı verir. Yalnız mətn məzmununu deyil, həm də elementin daxilində yerləşən bütün HTML teqlərini müəyyən edir.

Bu xüsusiyyət təkcə oxumaq üçün deyil, həm də məzmunu dəyişdirmək üçündür.

Qeyd

IE-də innerHTML bir sıra elementlər üçün yalnız oxunur: bütün cədvəl elementləri istisna olmaqla və , eləcə də və .

Məsələn, elementsiz boş cədvəl yaratdıq və biz onu proqramlı şəkildə daxil etmək istəyirik innerHTML vasitəsilə:

IE "naməlum iş vaxtı xətası" atacaq və digər brauzerlər yapışdıracaq.

Eyni zamanda, bir elementin mövcud məzmununu sorğulasaq , məsələn, alert(document.getElementById("id").innerHTML) vasitəsilə bu, IE-də işləyəcək.

Element teqinin adını ehtiva edən sətri qaytarır. Bütün tagName dəyərlərində yalnız böyük hərflər var.

Misal

innerHTML xassəsinin sınaqdan keçirilməsi

Daxil etmək üçün paraqraf

Bu dərsdə biz DOM-un nə olduğunu, nə üçün lazım olduğunu və necə qurulduğuna baxacağıq.

Brauzer bir səhifə tələb etdikdə və serverdən cavab olaraq onun mənbə HTML kodunu qəbul etdikdə əvvəlcə onu təhlil etməlidir. HTML kodunun təhlili və təhlili prosesində brauzer onun əsasında DOM ağacı qurur.

Bu və bir sıra digər hərəkətləri yerinə yetirdikdən sonra brauzer səhifəni göstərməyə başlayır. Bu prosesdə o, təbii ki, artıq orijinal HTML kodundan deyil, yaratdığı DOM ağacından istifadə edir.

DOM, brauzerin serverdən aldığı HTML kodu əsasında kompüterin yaddaşında yaratdığı sənəd obyekt modelidir.

Sadə dillə desək, HTML kodu səhifənin mətnidir və DOM brauzerin mətnini təhlil edərkən yaratdığı əlaqəli obyektlər toplusudur.

Chrome-da, brauzerin qəbul etdiyi səhifənin mənbə koduna "Veb Developer Alətləri" panelindəki "Mənbə" sekmesinde baxmaq olar.

Chrome-da onun yaratdığı DOM ağacına baxa biləcəyiniz alət yoxdur. Ancaq bu DOM ağacının HTML kodu şəklində təqdimatı var, "Elementlər" sekmesinde mövcuddur. Bu DOM təqdimatı, əlbəttə ki, veb tərtibatçısının işləməsi üçün daha rahatdır. Buna görə də, DOM-u ağac quruluşu kimi təmsil edəcək heç bir alət yoxdur.

Bu modeldəki obyektlər sənədin özü də daxil olmaqla, HTML-də olan demək olar ki, hər şeydən (teqlər, mətn məzmunu, şərhlər və s.) formalaşır. Modeldəki bu obyektlər arasındakı əlaqələr HTML elementlərinin kodda bir-birinə nisbətən necə yerləşdirilməsinə əsaslanaraq formalaşır.

Bu halda, sənədin DOM-u formalaşdıqdan sonra dəyişdirilə bilər. DOM dəyişdikdə, brauzer demək olar ki, dərhal səhifə şəklini yenidən çəkir. Nəticə etibarı ilə səhifəmizin göstərilməsi həmişə DOM-a uyğun gəlir.

DOM-u proqramlı şəkildə oxumaq və dəyişdirmək üçün brauzer bizə DOM API və ya başqa sözlə proqramlaşdırma interfeysi təqdim edir. Sadəcə olaraq, DOM API DOM-u oxumaq və dəyişdirmək üçün istifadə edə biləcəyimiz çoxlu sayda müxtəlif obyektlərin, onların xassələrinin və metodlarının toplusudur.

DOM ilə işləmək üçün əksər hallarda JavaScript istifadə olunur, çünki... Bu gün brauzerdə skriptlərin icra oluna biləcəyi yeganə proqramlaşdırma dilidir.

DOM API nə üçün bizə lazımdır?

Səhifəni tez dəyişdirmək üçün JavaScript-dən istifadə edə bilməmiz üçün bizə lazımdır, yəni. onu dinamik və interaktiv edin.

DOM API bizə (inkişafçılara) səhifədəki hər şeyi dəyişdirə biləcəyimiz, həmçinin istifadəçi ilə qarşılıqlı əlaqə qura biləcəyimiz çox sayda üsul təqdim edir. Bunlar. Bu proqram interfeysi bizə mürəkkəb interfeyslər, formalar yaratmaq, istifadəçi hərəkətlərini emal etmək, səhifəyə müxtəlif elementləri əlavə etmək və silmək, onların məzmununu, xassələrini (atributlarını) dəyişdirmək və s.

Səhifənin HTML kodu nədən ibarətdir?

Sənəd obyekti modelinin öyrənilməsinə keçməzdən əvvəl, əvvəlcə veb səhifənin (HTML sənədinin) mənbə kodunun nə olduğunu xatırlamalısınız.

Veb səhifənin mənbə kodu etiketlərdən, atributlardan, şərhlərdən və mətndən ibarətdir. Teqlər HTML-in əsas sintaktik quruluşudur. Onların əksəriyyəti cütləşir. Bu halda onlardan biri açılır, digəri isə bağlanır. Belə teqlərdən biri HTML elementini təşkil edir. HTML elementləri əlavə parametrlərə - atributlara malik ola bilər.

Sənəddə müəyyən işarələmə yaratmaq üçün bəzi elementlər digərlərinin içərisində yerləşdirilir. Nəticə olaraq, HTML sənədi bir-birinin içərisində yerləşdirilmiş HTML elementləri dəsti kimi təqdim edilə bilər.

Nümunə olaraq aşağıdakı HTML kodunu nəzərdən keçirin:

Səhifə başlığı Məqalə başlığı Məqalə bölməsi

Bu kodda kök element html-dir. Baş və bədən elementlərini ehtiva edir. Baş elementi başlıqdan, gövdə isə h1 və divdən ibarətdir. Div elementi öz növbəsində h2 və p ehtiva edir.

İndi brauzerin HTML kodu əsasında DOM ağacını necə qurduğuna baxaq.

Yuxarıda təsvir edildiyi kimi, brauzer HTML elementləri və səhifənin mənbə kodunun digər obyektləri əsasında ağac qurur. Bu prosesi həyata keçirərkən, elementlərin bir-birinin içində yuvalanmasını nəzərə alır.

Nəticədə brauzer yaranan DOM ağacından təkcə öz işində istifadə etmir, həm də JavaScript vasitəsilə onunla rahat işləmək üçün bizə API təqdim edir.

DOM-u qurarkən brauzer HTML elementlərindən, mətndən, şərhlərdən və bu dilin digər obyektlərindən obyektlər (DOM ağac qovşaqları) yaradır.

Əksər hallarda veb tərtibatçıları yalnız HTML elementlərindən əmələ gələn obyektlər (qovşaqlar) ilə maraqlanır.

Eyni zamanda, brauzer yalnız HTML elementlərindən obyektlər yaratmır, həm də onların hər birinin kodda digəri ilə əlaqəsindən asılı olaraq onları müəyyən əlaqələrlə bir-biri ilə əlaqələndirir.

Bəzi elementlərdə birbaşa olan elementlər ona münasibətdə uşaqlardır. Və onların hər biri üçün valideyndir. Bundan əlavə, bütün bu elementlər bir-birinə münasibətdə bacı (qardaş)dır.

Üstəlik, HTML-də hər hansı element həmişə bir valideynə malikdir (birbaşa yerləşdiyi HTML elementi). HTML-də elementin birdən çox valideyni ola bilməz. Yeganə istisna html elementidir. Onun valideyni yoxdur.

Brauzer qurduqca DOM ağacını əldə etmək üçün sadəcə olaraq bütün elementləri bir-birləri ilə münasibətlərindən asılı olaraq “tənzimləmək” lazımdır.

DOM ağacının yaradılması yuxarıdan aşağıya doğru aparılır.

Bu halda, DOM ağacının kökü həmişə sənədin özüdür (sənəd qovşağı). Sonra, ağac HTML kodunun strukturundan asılı olaraq qurulur.

Məsələn, yuxarıda baxdığımız HTML kodunda aşağıdakı DOM ağacı olacaq:

Bu ağacın ən yuxarı hissəsində sənəd qovşağı yerləşir. Bu node html ilə əlaqələndirilir, onun uşaqıdır. Html qovşağı html (...) elementi ilə formalaşır. Baş(...) və bədən(...) qovşaqlarının html ilə ana əlaqəsi var. Bir-birinə münasibətdə qardaşdırlar, çünki bir valideyn var. Baş düyün başlıq (lt;title>...) ilə əlaqələndirilir, onun uşaqıdır. h1 və div qovşaqları onların valideyni olan body ilə əlaqələndirilir. Div qovşağı h2(...) və p() ilə bağlıdır, onlar onun uşaqlarıdır.

Ağac, yuxarıda qeyd edildiyi kimi, sənəd obyekti (qovşağı) ilə başlayır. O, öz növbəsində html (...) elementi tərəfindən yaradılmış bir uşaq qovşağına malikdir. Head(...) və body(...) elementləri html-dədir və buna görə də onun uşaqlarıdır. Sonra, baş node başlığın valideynidir (lt;title>...). h1 və div elementləri gövdə daxilində yuvalanıb, yəni onlar onun uşaqlarıdır. Div birbaşa h2 (...) və p () elementlərini ehtiva edir. Bu o deməkdir ki, onların hər biri üçün div node anadır.

HTML koduna əsaslanan brauzerdə DOM ağacını qurmaq belə asandır.

DOM ağacının necə qurulduğunu niyə bilmək lazımdır?

Məşq edin

Şəkildə göstərilən DOM ağacına əsasən HTML kodu yaradın.

Sənəd obyekt modeli

Sənəd Obyekt Modeli (DOM) HTML ilə də işləmək üçün genişləndirilmiş XML üçün Tətbiq Proqramlaşdırma İnterfeysidir (API).

DOM-da bütün səhifə məzmunu (elementlər və mətn) qovşaqların iyerarxiyası kimi təqdim olunur. Aşağıdakı kodu nəzərdən keçirin:

Sadə səhifə

Salam Dünya!

Bu kod DOM-dan istifadə edərək qovşaqların iyerarxiyası kimi təqdim edilə bilər:

Sənədi qovşaqlar ağacı kimi təqdim etməklə, DOM API tərtibatçılara veb səhifənin məzmunu və strukturu üzərində tam nəzarət imkanı verir.

DOM-un ağac strukturunu təsvir edərkən, ailə ağaclarından götürülmüş terminologiyadan istifadə olunur.

Beləliklə, birbaşa verilmiş qovşağın üstündə yerləşən qovşaq bu qovşağın valideyni adlanır. Verilmiş qovşaqdan bir səviyyə aşağıda yerləşən qovşaqlara bu qovşağın uşaqları deyilir. Eyni səviyyədə olan və eyni valideyni olan qovşaqlara bacı-qardaş deyilir. Müəyyən bir qovşağın altında istənilən sayda səviyyədə yerləşən qovşaqlar onun uşaqları adlanır. Valideyn, nənə və baba və hər hansı digər qovşaq müəyyən bir qovşaqdan istənilən sayda yuxarıda yerləşən hər hansı digər qovşaqlara onun əcdadları deyilir.

BOM (İngilis dilindən tərcümədə Brauzer Obyekt Modeli - Brauzer Obyekt Modeli) brauzer pəncərəsinə girişi təmin edir və onu və onun elementlərini manipulyasiya etməyə imkan verir.

BOM-lar veb səhifənin məzmunundan asılı olmayaraq brauzer funksionallığına girişi təmin edir. BOM mövzusu eyni zamanda maraqlı və mürəkkəbdir, çünki spesifikasiyanın uzun müddət olmaması səbəbindən brauzer istehsalçıları BOM-u lazım bildikləri kimi genişləndirməkdə sərbəstdirlər. Brauzerlər arasında oxşar olan bir çox element qarşılıqlı uyğunluq səbəbindən bu gün də tətbiq olunan faktiki standartlara çevrilmişdir. JavaScript-in bu fundamental aspektlərini standartlaşdırmaq üçün W3C HTML5 spesifikasiyasında əsas BOM elementlərini təyin etdi.

Bu bölmə Sənəd Obyekt Modelinə (DOM) qısa giriş təqdim edir - DOM nədir, HTML və XML sənəd strukturları necə təmin edilir və onlarla necə qarşılıqlı əlaqədə olmaq olar. Bu bölmədə əsas məlumatlar və nümunələr var.

Document Object Model (DOM) HTML və XML sənədləri üçün proqramlaşdırma interfeysidir (API). DOM sənədin strukturlaşdırılmış təqdimatını təmin edir və sənədin məzmununu, üslubunu və strukturunu dəyişə bilən proqramlar tərəfindən həmin struktura necə daxil ola biləcəyini müəyyən edir. DOM görünüşü xassələri və üsulları olan qovşaqların və obyektlərin strukturlaşdırılmış qrupundan ibarətdir. Əslində, DOM veb səhifəni skript dilləri və ya proqramlaşdırma dilləri ilə əlaqələndirir.

Veb səhifə bir sənəddir. Sənəd həm brauzer pəncərəsində, həm də HTML kodunun özündə təqdim edilə bilər. Hər halda eyni sənəddir. DOM bu sənədi təmsil etmək, saxlamaq və manipulyasiya etmək üçün başqa bir yol təqdim edir. DOM veb-səhifənin obyekt yönümlü təqdimatını tam dəstəkləyir və JavaScript kimi skript dilindən istifadə edərək onu dəyişdirməyə imkan verir.

DOM ilə manipulyasiya etmək üçün xüsusi bir şey etmək lazım deyil. Fərqli brauzerlərdə DOM-un müxtəlif tətbiqləri var və bu tətbiqlər faktiki DOM standartına müxtəlif uyğunluq dərəcələrini göstərir (bu sənədləşməyə daxil olmamağa çalışdığımız mövzu), lakin hər bir brauzer veb səhifələri qarşılıqlı əlaqədə saxlamaq üçün fərqli DOM-dan istifadə edir. skript dilləri ilə.

Elementdən istifadə edərək skript yaratmaqla və ya skripti yükləmək üçün veb-səhifəyə təlimatlar daxil etməklə siz dərhal proqram proqramlaşdırma interfeysindən (API) istifadə etməyə başlaya bilərsiniz, elementlərdən ya sənədin özü ilə qarşılıqlı əlaqə yaratmaq, ya da nəsilləri əldə etmək üçün istifadə edə bilərsiniz. həmin sənəd, yəni. səhifədə müxtəlif elementlər. DOM proqramlaşdırmanız bir obyekt funksiyasından istifadə edərək mesajı çap etmək kimi sadə bir şey ola bilər və ya aşağıdakı nümunədə göstərildiyi kimi yeni məzmun yaradan daha mürəkkəb DOM metodlarından istifadə edə bilər:

Aşağıdakı misalda, JavaScript kodu elementin daxilində müəyyən edilmişdir, bu kod sənəd yükləndikdə (bütün DOM istifadə üçün mövcud olduqda) funksiya təyin edir. Bu funksiya yeni H1 elementi yaradır, həmin elementə mətn əlavə edir və sonra H1-i sənəd ağacına əlavə edir:

Bu bölmə müxtəlif növ və obyektləri sadə və əlçatan şəkildə qısaca təsvir etmək üçün nəzərdə tutulmuşdur. API-də istifadə olunan bir sıra müxtəlif məlumat növləri var ki, onlara diqqət yetirməlisiniz. Sadəlik üçün bu bölmədəki sintaksis nümunəsi adətən qovşaqlara element s, qovşaqların massivlərinə nodeList s (və ya sadəcə element s) kimi və node atributlarına sadəcə atribut s kimi istinad edir.

Aşağıda bu məlumat növlərinin qısa təsviri olan cədvəl verilmişdir.

Bu, DOM iyerarxiyasını manipulyasiya etmək üçün istifadə edə biləcəyiniz obyektlər və faktiki şeylər haqqında təlimatdır. Bunun necə işlədiyini başa düşməyin təəccüblü ola biləcəyi bir çox yer var. Məsələn, HTML forma elementini təmsil edən obyekt öz ad xassəsini HTMLFormElement interfeysindən və className xassəsini HTMLElement interfeysindən götürür. Hər iki halda, istədiyiniz əmlak həmin forma obyektindədir.

Bundan əlavə, obyektlər və onların DOM-da həyata keçirdikləri interfeyslər arasındakı əlaqə təəccüblü ola bilər və bu bölmə DOM-da mövcud interfeyslər və onlara necə daxil olmaq barədə bir az məlumat verməyə çalışır.

Bir çox obyekt çoxlu interfeyslərdən hərəkətləri həyata keçirir. Cədvəl obyekti, məsələn, createCaption və insertRow kimi metodları özündə birləşdirən xüsusi obyekti həyata keçirir. Lakin bu cədvəl olduğundan, o, həm də HTML elementidir, cədvəl bölmədə təsvir olunan Element interfeysini həyata keçirir. Nəhayət, HTML elementi (DOM mənasında) HTML və ya XML səhifəsi üçün obyekt modelini təşkil edən ağacdakı bir qovşaq olduğundan, cədvəl elementi Elementin əldə edildiyi daha ümumi Node interfeysini də həyata keçirir.

Var cədvəli = document.getElementById("cədvəl"); var tableAttrs = table.attributes; // üçün Node/Element interfeysi (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Bu bölmə DOM-da ən çox yayılmış interfeyslərin bir neçəsini sadalayır. İdeya bu API metodlarının nə etdiyini təsvir etmək deyil, DOM-dan istifadə edərkən tez-tez görəcəyiniz üsullar və xüsusiyyətlər haqqında sizə bəzi fikirlər verməkdir. API-nin bu ümumi hissələri bu yardımın sonundakı bölmədəki nümunələrin əksəriyyətində istifadə olunur.

Sənəd, pəncərə interfeyslərindən DOM proqramlaşdırmasında çox istifadə etdiyiniz obyektlərdir. Sadə dillə desək, pəncərə obyekti brauzer kimi bir şeyi, sənəd obyekti isə sənədin özünün kökünü təmsil edir. Element ümumi Node interfeysindən miras qalır və bu interfeyslər birlikdə ayrı-ayrı elementlərə tətbiq oluna bilən bir çox metod və xassələri təmin edir. Bu elementlər həmçinin əvvəlki halda cədvəl obyekti nümunəsində olduğu kimi bu elementlərin ehtiva etdiyi məlumat növləri ilə işləmək üçün ayrıca interfeyslərə malik ola bilər.

Aşağıda DOM istifadə edərək veb və XML səhifələrinin proqramlaşdırılmasında istifadə olunan ümumi API üzvlərinin qısa siyahısı verilmişdir:

• parentNode.appendChild(qovşaq)

Bu sənəddə inkişafınızda istifadə edə biləcəyiniz hər bir interfeys üçün nümunələr var. Bəzi hallarda nümunələr elementdə DOM-a çıxışı olan tam hüquqlu veb səhifələrdir, həmçinin formada skripti işə salmaq üçün lazım olan elementləri və DOM əməliyyatlarının yerinə yetiriləcəyi HTML elementlərini sadalayır. Bu baş verdikdə, sadəcə nümunəni yeni HTML sənədinə köçürə və yapışdıra, saxlaya və brauzerinizdə işə sala bilərsiniz.

Bununla belə, misalların daha qısa olduğu hallar var. İnterfeyslərin HTML elementləri ilə qarşılıqlı əlaqəsinin əsaslarını nümayiş etdirən nümunələri işə salmaq üçün siz skriptlərin içərisində funksiyaları yerləşdirəcəyiniz test səhifəsi hazırlaya bilərsiniz. Aşağıdakı çox sadə veb-səhifədə interfeysi yoxlamaq üçün funksiyaları yerləşdirə biləcəyiniz başlıq elementi var. Səhifə geri qaytarıla, təyin edilə və ya başqa sözlə manipulyasiya edilə bilən atributları olan bir neçə elementdən ibarətdir və brauzerdən istədiyiniz funksiyaları çağırmaq üçün lazım olan istifadəçi interfeysini ehtiva edir.

Sizi maraqlandıran DOM interfeyslərini sınamaq və onların brauzerlərdə necə işlədiyini görmək üçün bu test səhifəsindən və ya oxşar səhifədən istifadə edə bilərsiniz. Siz lazım olduqda test() funksiyasının məzmununu yeniləyə, daha çox düymə yarada və ya lazım olduqda elementlər əlavə edə bilərsiniz.

Bir səhifədə bir çox interfeysi, veb səhifənin rənglərini dəyişdirən xüsusiyyətlər toplusunu sınamaq üçün düymələrin, mətn sahələrinin və digər elementlərin bütün "konsolu" ilə oxşar veb səhifə yarada bilərsiniz. Aşağıdakı ekran görüntüsü test üçün interfeyslərin necə qruplaşdırıla biləcəyi barədə fikir verir

Bu nümunədə açılan menyu veb səhifənin DOM-dan əldə edilə bilən hissələrini dinamik olaraq yeniləyir (məsələn, fon rəngi, keçid rəngi və mətn rəngi). Bununla belə, test səhifələri hazırlayarkən, oxuduğunuz kimi interfeyslərin sınaqdan keçirilməsi DOM ilə effektiv işləməyi öyrənməyin vacib hissəsidir.