Դաս 33: DOM

0

Յուրաքանչյուր վեբ կայք գտնվում է բրաուզերի պատուհանում, որը կարող է օբյեկտ համարվել:

Document օբյեկտը ներկայացնում է HTML փաստաթուղթը, որը ցուցադրված է այդ պատուհանում: Document օբյեկտը ունի զանազան հատկություններ, և վերաբերում են այլ օբյեկտներին, որոնք թույլ են տալիս փաստաթղթի կոնտենտ մուտք գործել և փոփոխությունների ենթարկել:

Թե ինչպես է փոփոխություններ կատարվում փաստաթղթում կոչվում է Document Object Model կամ DOM: Օբյեկտները կազմակերպվում են հիերարխիայում: Այս հիերարխիկ կառուցվածքը վերաբերում է Վեբ Փաստաթղթի օբյեկտների կազմակերպմանը:

  • Window object: Հիերարխիայի վերևում: Այն հիերարխիկ օբյեկտի էլեմենտի ամենահեռավոր օբյեկտն է:
  • Document object: Յուրաքանչյուր HTML փաստաթուղթ բեռնվում է պատուհանումև դառնում է փաստաթղթային օբյեկտ: Փաստաթուղթը ներառում է էջի բովանդակությունը:
  • Form object: Ամեն ինչ կցված <form>-ում…</form> ստեղծում է տեսակ օբյեկտը:
  • Form control elements: Տեսակ օբյեկտը ներառում ք բոլոր սահմանված էլեմենտները  այդ օբյեկտի համար:

Մի քանի կարևոր օբյեկտների պարզ հիերարխիան:

h

 Գոյություն ունեն մի քանի DOM-եր:

  • The Legacy DOM: Այս մեթոդը ներկայացվել է JavaScript-ի սկզբնական տարբերակներում: Այն աջակցվում է բոլոր բրաուզերների կողմից, բայց մուտք գործել է թույլ տալիս որոշակի փաստաթղթերի:
  • The W3C DOM: Այս փաստաթղթային օբյեկտը թույլ է տալիս մուտք գործել և փոփոխություններ անել բոլոր փաստաթղթերի բովանդակություններում և ստանդարտացված է World Wide Web Consortium (W3C)-ի կողմից: Այս մոդելը աջակցվում է բոլոր բրաուզերների կողմից:
  • The IE4 DOM: Այս փաստաթղթային օբյեկտի մոդելը ներկայացվել է Microsoft Internet Explorer բրաուզերի 4րդ Տարբերակում:

  Legacy DOM-ը

Սա այն մոդելն է, որը ներկայացված է JavaScript-ի սկզբնական տարբերակներում: Այն լավ աջակցված է բոլոր բրաուզերների կողմից, բայց մուտք գործել է թույլ տալիս որոշակի փաստաթղթերի:

Այս մոդելը տրամադրում է մի քանի հատկություններ, օրինակ՝ վերնագիրը, URL-ն և lastModified-ը ինֆորմացիա են տրամադրում փաստաթղթի մասին:

Փաստաթղթի Հատկությունները Legacy DOM-ում

Փաստաթղթերի հատկություններ, որոնցով կարելի է մուտք գործել, օգտագործելով Legacy DOM-ը:

S.No Հատկություն և Նկարագրություն
1

alinkColor

Կանգնեցվել է –  Լար, որը հատկորոշում է ակտիվացված հղումների գույնը:

 Օր՝: document.alinkColor

anchors[ ] 

Anchor օբյեկտների զանգվածը, մի հատ յուրաքանչյուր հաստատման համար, որը հայտնվում է փաստաթղթում:
Օր՝: document.anchors[0], document.anchors[1] and so on
applets[ ]
 3 Applet օբյեկտի զանգվածը, մի հատ յուրաքանչյուր ապլետի համար, որը հայտնվում է փաստաթղթում:
   Օր՝: document.applets[0], document.applets[1] and so on
 4 bgColor

Կանգնեցվել է- Լար,  որը հատկորոշում է փաստաթղթի գույնի հետնամասը:

Օր՝: document.bgColor

 5 Cookie

Լարային գնահատված հատկություն, հատուկ վարքագծով, որը թույլ է տալիս cookie-ներին այս փաստաթղթի հետ կապված տեղավորվել:
Օր՝: document.cookie

 6 Domain

Լար,  որը հատկորոշում է  ինտերնետային դոմեյնը փաստաթղթերի տեսակում: Օգտագործվում է անվտանգության նկատառումներով:

Օր՝: document.domain

 7 embeds[ ]

Օբյեկտի զանգվածը, որը ներկայացնում է տվյալներ ներառված փաստաթղթում <embed> tag-ով:

Հոմանիշ plugins []-ների համար:

Որոշ plugin-ներ և  ActiveX control-ներ կարող են կառավարվել JavaScript կոդով:

Օր՝: document.embeds[0], document.embeds[1] and so on

 8 fgColor

Լար, որը հատկորոշում է դեֆոլտ տեքստի գույնը փաստաթղթի համար:
Օր՝: fgColor

 9 forms[ ]

Form օբյեկտների զանգված, մի հատ յուրաքանչյուր HTML տեսակի համար, որը հայտնվում  է փաստաթղթում:

Օր՝: document.forms[0], document.forms[1] and so on

 10 images[ ]

Image Օբյեկտի զանգվածը, մի հատ յուրաքանչյուր պատկերի համար, որը տեղադրված է փաստաթղթում HTML <img> tag-ով:

Օր՝: document.images[0], document.images[1] and so on

 11 lastModified

Լար, որը հատկորոշում է տվյալները փաստաթղթի վերջին փոփոխության:

Օր՝: document.lastModified

 12 linkColor

Կանգնեցվել է – Լար,  որը հատկորոշում է  չայցելած հղումների գույնը:

Օր՝: document.linkColor

 13 links[ ]

Փաստաթղթի հղման զանգված է :

Ex: document.links[0], document.links[1] and so on

 14 Location

Փաստաթղթի  URL-ը: Կանգնեցվել է URL-ի հատկության համար:

Օր՝: document.location

 15 plugins[ ]

Հոմանիշ է embeds[ ]-ների

Օր՝: document.plugins[0], document.plugins[1] and so on

 16  Referrer

Լար, որը հատկորոշում է փաստաթղթի URL-ը: 

Օր՝: document.referrer

 18  Title

Տեքստի բովանդակությունը <title> tag-ով

Օր՝: document.title

 19  URL

Լար, որը հատկորոշում է փաստաթղթի URL-ը:

Օր՝: document.URL

 20  vlinkColor

Կանգնեցվել է – Լար, որը հատկորոշում է այցելած հղումների գույնը:

Օր՝: document.vlinkColor 

 Փաստաթղթի Մեթոդները  Legacy DOM-ում

 Legacy DOM-ի աջակցած մեթոդները:

S.No Հատկություն և Նկարագրություն
1 clear()

Կանգնեցվել է –Ջնջում է փաստաթղթի բովանդակությունները և ոչինչ չի վերադարձնում:

Օր՝: document.clear()

2 close( )

Փակում է փաստաթուղթը open( ) մեթոդով և ոչինչ չի վերադարձնում:

Օր՝: document.clear( ) close( )

3 open( )

Ջնջում է առկա փաստաթղթի բովանդակությունը և բացում է հոսք է բացում դեմի նոր փաստաթղթի բովանդակություն: Ոչինչ չի վերադարձնում:

Օր՝: document.open( )

4 write( value, …)

 Տեղադրում է հատկորոշված լարը կամ լարերը փաստաթղթում:

Օր՝: document.write( value, …)

5 writeln( value, …)

Նույնն է գրելու համար ( ), բացի նրանից, որ նոր տողի կերպար է   կցում:Ոչինիչ չի վերադարձնում:

Օր՝: document.writeln( value, …)

 

 Օրինակ՝

Կարող ենք տեղորոշել ցանկացած HTML էլեմենտ, այլ HTML փաստաթղթի հետ օգտագործելով HTML DOM: Օրինակ՝, եթե վեբ փաստաթուղթը ներառում է տեսակի էլէմենտ, ապա օգտագործելով JavaScript մենք կարող ենք այն վերաբերել որպես document.forms[0]: Եթե Ձեր վեբ փաստաթուղթը ներառում է երկու տեսակի էլեմենտ, առաջին տեսակը վերաբերում է որպես document.forms[0] և երկրորդը document.forms[1]:

Օգտագործելով հիերախիյա և հատկություններ, մենք կարող ենք մուտք գործել առաջին տեսակի էլեմենտը օգտագործելով document.forms[0].elements[0]:

Այս օրինակը ցույց կտա ինչպես մուտք գործել փաստաթղթի հատկություններ օգտագործելով Legacy DOM մեթոդը:

<html>

<head>

<title> Document Title </title>

<script type=”text/javascript”>

<!–

function myFunc()

{

var ret = document.title; alert(“Document Title : ” + ret );

var ret = document.URL; alert(“Document URL : ” + ret );

var ret = document.forms[0]; alert(“Document First Form : ” + ret );

var ret = document.forms[0].elements[1]; alert(“Second element : ” + ret );

}

//–>

</script>

</head>

<body>

<h1 id=”title”>This is main title</h1> <p>Click the following to see the result:</p>

<form name=”FirstForm”>

<input type=”button” value=”Click Me” onclick=”myFunc();” />

<input type=”button” value=”Cancel”>

</form>

<form name=”SecondForm”>

<input type=”button” value=”Don’t ClickMe”/>

</form>

</body>

</html>

Արդյունք

Հիմնական վերնագիրը

Սեղմեք հետևյալը արդյունքը տեսնելու համար:

Սեղմել Անվավեր համարել
Չսեղմել

 

W3C DOM

Այս փաստաթղթային օբյեկտը թույլ է տալիս մուտք գործել և փոփոխություններ անել բոլոր փաստաթղթերի բովանդակություններում և ստանդարտացված է World Wide Web Consortium (W3C)-ի կողմից: Այս մոդելը աջակցվում է բոլոր բրաուզերների կողմից:

 W3C DOM ստանդարտացնում է հատկությունների մեծամասնությունը և նոր հատկություններ է ավելացնում:

W3C DOM փաստաթղթի հատկություններ

Այս մեթոդը աջակցում է բոլոր հասնելի հատկությունները Legacy DOM-ում:

S.No Հատկություն և Նկարագրություն
 1  Body

Element օբյեկտի վկայակոչում, որը ներկայացնում է  փաստաթղթի<body> tag-ը:

Օր՝: document.body 

 2 defaultView

Կարդալու հատկություն է և ներկայացնում է պատուհանը, որտեղ փաստաթուղտը ցուցադրվում է:

Օր՝: document.defaultView

3  documentElement

Կարդալու վկայակոչում փաստաթղթի<html> tag-ով:

Օր՝: document.documentElement8/31/2008

4 Implementation

Կարդալու հատկություն է և ներկայացնում է DOMImplementation-ի օբյեկտը, որը ներկայացնում է այս փաստաթղթի իրագործումը:

Օր՝: document.implementation

W3C DOM-ի փաստաթղթային մեթոդներ

W3C DOM-ի աջակցած մեթոդները:

S.No Հատկություն և Նկարագրություն
1 createAttribute( name)

Վերադարձնում է նորաստեղծ Attr node-ը հատկորոշված անունով:

Օր՝: document.createAttribute( name)

2 createComment( text)

Ստեղծում և վերադարձնում է նոր Comment node-ը ներառելով հատկորոշված տեքստը:

Օր՝: document.createComment( text)

 3  createDocumentFragment( )

Ստեղծում և վերադարձնում  է դատարկ DocumentFragment node:

Օր՝: document.createDocumentFragment( )

 4  createElement( tagName)

Ստեղծում և վերադարձնում  է  նոր Element node հատկորոշված անունով:

Օր՝: document.createElement( tagName) 

 5  createTextNode( text)

Ստեղծում և վերադարձնում  է  նոր Text node, որը ներառում է հատկորոշված տեքստը: 

Օր՝: document.createTextNode( text) 

 6  getElementById( id) 

Վերադարձնում է այս փաստաթղթի էլեմենտը, որը ունի հատկորոշված արժեք իր id  ատրիբուտով:  

Օր՝: document.getElementById( id) 

7 getElementsByName( name) 

Վերադարձնում է node-երի բոլոր էլեմենտների  զանգված փաստաթղթում, որը ունի հատկորոշված արժեք իրենց ատրիբուտային անունների համար:Եթե նմանատիպ էլեմենտներ հայտնաբերված չեն, վերադառնում է զրո երկարությամբ զանգված: 

Օր՝: document.getElementsByName( name) 

 8  getElementsByTagName( tagname) 

Վերադարձնում է այս փաստաթղթի էլեմենտ node-երի զանգվածը, որն ունի հատկորոշված անուն: 

Օր՝: document.getElementsByTagName( tagname)

 9  importNode( importedNode, deep) 

Ստեղծում և վերադարձնում  է node տեսակի այլ փաստաթուղթ,որը համապատասխան է այս փաստաթղթում տեղադրելու համար:

Օր՝: document.importNode( importedNode, deep)

Օրինակ՝

Սա շատ հեշտ կեղծելու փաստաթղթային էլեմենտ է, օգտագործելով W3C DOM: Կարող եք օգտագործել ցանկցած մեթոդ՝ getElementById, getElementsByName, կամ getElementsByTagName:

Ահա ինչպես փաստաթուղո մուտք գործել օգտագործելով W3C DOM մեթոդը:

<html>

<head>

<title> Document Title </title>

<script type=”text/javascript”>

<!–

function myFunc(){

var ret = document.getElementsByTagName(“title”);

alert(“Document Title : ” + ret[0].text );

var ret = document.getElementById(“heading”);

alert(“Document URL : ” + ret.innerHTML );

}

//–>

</script>

</head>

<body>

<h1 id=”heading”>This is main title</h1>

<p>Click the following to see the result:</p>

<form id=”form1″ name=”FirstForm”>

<input type=”button” value=”Click Me” onclick=”myFunc();” />

<input type=”button” value=”Cancel”>

</form>

<form d=”form2″ name=”SecondForm”>

<input type=”button” value=”Don’t ClickMe”/>

</form>

</body>

</html>

 

Արդյունք

Սա գլխավոր վերնագիրն է

Սեղմեք հետևյալը արդյունքը տեսնելու համար:

 Սեղմել  Չեղյալ համարել
Չսեղմել

 

IE 4 DOM

Այս փաստաթղթային օբյեկտի մոդելը ներկայացվել է Microsoft Internet Explorer բրաուզերի 4րդ Տարբերակում:

IE 4 DOM Փաստաթղթային Հատկությունները

activeElement

Կարդալու հատկությու, որը վերաբերում է մուտքագրված էլեմենտին, որն ներկա պահին ակտիվ է:

Օր՝: document.activeElement

all[ ]

Element օբյեկտների զնագված փաստաթղթում: Այս զանգվածը հնարավոր է ինդեքսավորված է  թվաբանորեն, էլեմենտներում մուտք գործելու համար :

Օր՝: document.all[ ] 

Charset

Փաստաթղթում տեղադրված կերպար:

 Օր՝: document.charset

 children[ ] 

Զանգված, որը ներառում է HTML էմեմենտներ: 

Օր՝: document.children[ ] defaultCharset

Փաստաթղթում տեղադրված դեֆոլտ կերպար:  

Օր՝: document.defaultCharset 

expand 

Այս հատկությունը, եթե սխալ տեղադրել, կանխում է օբյեկտները  տարածվելուց: 

Օր՝: document.expando parentWindow

Պատուհան, որը ներառում է փաստաթուղթ: 

Օր՝: document.parentWindow 

readyState

Հատկորոշում է բեռնվող փաստաթղթի ստատուսը :

Օր՝: document.readyState

Uninitialized

Փաստաթուղթը չի սկսել բեռնվել: Օրինակ՝: document.uninitialized

 Loading

Փաստաթուղթը բեռնվում է:  

Օր՝: document.loading interactive

Փաստաթուղթը բավականաչափ բեռնվել է: 

Օր՝: document.interactive complete

Փաստաթուղթը ամբողջովին բեռնվել է: 

Օր՝: document.complete

IE4 DOM-ի փաստաթղթային Մեթոդները

elementFromPoint(x,y)

Վերադարձնում է էլեմենտընշելով հատկորոշված տեղը: 

Օր՝: document.elementFromPoint(x,y) 

Օրինակ՝

 IE 4 DOM չի աջակցում getElementById() մեթոդին: Փոխարենը այն թույլ է տալիս նայել ինքնակամ փաստաթղթի էլեմենտներին  id ատրիբուտով, բոլոր[] փաստաթղթի օբյեկտի զանգվածով:

var lists = document.all.tags(“UL”);

var items = lists[0].all.tags(“LI”);

 Մեկ այլ օրինակ.

<html>

<head>

<title> Document Title </title>

<script type=”text/javascript”>

<!–

function myFunc(){

var ret = document.all[“heading”];

alert(“Document Heading : ” + ret.innerHTML );

var ret = document.all.tags(“P”);; alert(“First Paragraph : ” + ret[0].innerHTML);

}

//–>

</script>

</head>

<body>

<h1 id=”heading”>This is main title</h1>

<p>Click the following to see the result:</p>

<form id=”form1″ name=”FirstForm”>

<input type=”button” value=”Click Me” onclick=”myFunc();” />

<input type=”button” value=”Cancel”>

</form>

<form d=”form2″ name=”SecondForm”>

<input type=”button” value=”Don’t ClickMe”/>

</form>

</body>

</html>

 

 Արդյունք

Սա հիմնական վերանգիրն է

Սեղմեք հետևյալը արդյունքը տեսնելու համար:

 Սեղմեք  Չեղյալ համարել

 

Չսեղմել

 

DOM-ի համատեղելիություն

Եթե ցանկանում եք սկրիպտ գրել W3C DOM կամ IE 4 DOM ճկունությամբ, ապա կարող եք օգտագործել կարողություն փորձարկելու մոտեցմամբ:

if (document.getElementById) {

// If the W3C method exists, use it

}else if (document.all) {

// If the all[] array exists, use it

}else {

// Otherwise use the legacy DOM

}

 

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.