Ներածություն. Մաքուր JavaScript DOM մանիպուլյացիայի dom օբյեկտի մոդել

Այս դասում մենք կանդրադառնանք, թե ինչ է DOM-ը, ինչու է այն անհրաժեշտ և ինչպես է այն կառուցված:

Ի՞նչ է DOM-ը:

Բրաուզերը, երբ խնդրում է էջ և ստանում դրա սկզբնական HTML կոդը՝ ի պատասխան սերվերից, նախ պետք է վերլուծի այն: HTML կոդը վերլուծելու և վերլուծելու գործընթացում զննարկիչը դրա հիման վրա կառուցում է DOM ծառ:

Այս և մի շարք այլ գործողությունների կատարումից հետո զննարկիչը անցնում է էջի արտապատկերմանը: Այս գործընթացում նա, իհարկե, արդեն օգտագործում է իր ստեղծած DOM ծառը, ոչ թե բնօրինակ HTML-ը։

DOM-ը փաստաթղթի օբյեկտի մոդելն է, որը զննարկիչը ստեղծում է համակարգչի հիշողության մեջ՝ հիմնվելով սերվերից ստացած HTML կոդի վրա:

Պարզ ասած, HTML կոդը էջի տեքստն է, իսկ DOM-ը հարակից օբյեկտների մի շարք է, որը ստեղծվել է բրաուզերի կողմից՝ տեքստը վերլուծելիս:

Chrome-ում զննարկիչը ստացած էջի սկզբնական կոդը կարելի է դիտել «Վեբ մշակողի գործիքներ» վահանակի «Աղբյուր» ներդիրում:

Chrome-ում չկա գործիք, որը կարող է օգտագործվել իր ստեղծած DOM ծառը դիտելու համար: Բայց կա այս DOM ծառի ներկայացումը HTML կոդի տեսքով, այն հասանելի է «Elements» ներդիրում։ DOM-ի այս ներկայացուցչությունը, իհարկե, շատ ավելի հարմար է վեբ ծրագրավորողի հետ աշխատելու համար: Հետևաբար, չկա գործիք, որը կներկայացնի DOM-ը ծառի կառուցվածքի տեսքով:

Այս մոդելի օբյեկտները ձևավորվում են գրեթե ամեն ինչից, ինչ կա HTML-ում (պիտակներ, տեքստային բովանդակություն, մեկնաբանություններ և այլն), ներառյալ հենց փաստաթուղթը: Մոդելի այս օբյեկտների միջև հարաբերությունները ձևավորվում են այն բանի հիման վրա, թե ինչպես են HTML տարրերը գտնվում կոդում միմյանց նկատմամբ:

Այս դեպքում փաստաթղթի DOM-ը ձևավորումից հետո կարող է փոխվել: Երբ DOM-ը փոխվում է, զննարկիչը վերագծում է էջի պատկերը գրեթե ակնթարթորեն: Արդյունքում, էջի մեր մատուցումը միշտ համապատասխանում է DOM-ին:

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

DOM-ի հետ աշխատելու համար շատ դեպքերում օգտագործվում է JavaScript, քանի որ. մինչ օրս դա միակ ծրագրավորման լեզուն է, որով սկրիպտները կարող են իրականացվել բրաուզերում:

Ինչու՞ մեզ պետք է DOM API: Մեզ դա պետք է, որպեսզի կարողանանք JavaScriptփոխել էջը թռչելիս, այսինքն. դարձնել այն դինամիկ և ինտերակտիվ:

DOM API-ն մեզ (մշակողներին) տրամադրում է հսկայական քանակությամբ մեթոդներ, որոնցով մենք կարող ենք փոխել ամեն ինչ էջում, ինչպես նաև շփվել օգտատիրոջ հետ: Նրանք. Այս ծրագրավորման ինտերֆեյսը մեզ թույլ է տալիս ստեղծել բարդ ինտերֆեյսներ, ձևեր, մշակել օգտվողի գործողությունները, ավելացնել և հեռացնել տարբեր տարրեր էջում, փոխել դրանց բովանդակությունը, հատկությունները (ատրիբուտները) և շատ ավելին:

Այժմ համացանցում գործնականում չկան այնպիսի կայքեր, որոնց սկրիպտներում DOM-ի հետ աշխատանք չի լինի:

Ի՞նչ է HTML կոդը էջի համար:

Նախքան փաստաթղթի օբյեկտի մոդելի ուսումնասիրությանը անցնելը, նախ պետք է հիշել, թե որն է վեբ էջի սկզբնական կոդը (HTML փաստաթուղթ):

Վեբ էջի սկզբնական կոդը բաղկացած է թեգերից, ատրիբուտներից, մեկնաբանություններից և տեքստից: Թեգերը HTML-ի հիմնական շարահյուսությունն են: Նրանցից շատերը զույգերով են։ Տվյալ դեպքում դրանցից մեկը բացողն է, իսկ մյուսը՝ փակող։ Նման զույգ թեգերից մեկը կազմում է HTML տարր: HTML տարրերը կարող են ունենալ Լրացուցիչ ընտրանքներ- հատկանիշներ.

Որոշակի նշում ստեղծելու փաստաթղթում որոշ տարրեր գտնվում են մյուսների ներսում: Արդյունքում, HTML փաստաթուղթը կարելի է համարել որպես HTML տարրերի մի շարք:

Որպես օրինակ, հաշվի առեք հետևյալ HTML կոդը.

Էջի վերնագիր Հոդվածի վերնագիր հոդվածի բաժին

Հոդվածի բովանդակությունը

Այս կոդում արմատային տարրը html է: Գլխի և մարմնի տարրերը բույն են դրված դրա մեջ։ Գլխավոր տարրը պարունակում է վերնագիր, իսկ մարմնի տարրը պարունակում է h1 և div: Div տարրն իր հերթին պարունակում է h2 և p:

Հիմա եկեք տեսնենք, թե ինչպես է զննարկիչը կառուցում DOM ծառ՝ հիմնվելով HTML կոդի վրա:

Ինչպե՞ս է կառուցված փաստաթղթի DOM ծառը:

Ինչպես արդեն նկարագրված է վերևում, զննարկիչը կառուցում է ծառ՝ հիմնված HTML տարրերի և այլ սուբյեկտների վրա: աղբյուր կոդըէջեր։ Այս գործընթացը կատարելիս հաշվի է առնվում տարրերի բնադրումը միմյանց մեջ։

Արդյունքում, զննարկիչը օգտագործում է ստացված DOM ծառը ոչ միայն իր աշխատանքում, այլ նաև տրամադրում է մեզ API-ի համար հարմար շահագործումդրա հետ JavaScript-ի միջոցով:

DOM-ը կառուցելիս զննարկիչը ստեղծում է օբյեկտներ (DOM ծառի հանգույցներ) HTML տարրերից, տեքստից, մեկնաբանություններից և այս լեզվի այլ միավորներից:

Շատ դեպքերում վեբ մշակողներին հետաքրքրում են միայն HTML տարրերից ձևավորված օբյեկտները (հանգույցները):

Միևնույն ժամանակ, զննարկիչը ոչ միայն օբյեկտներ է ստեղծում HTML տարրերից, այլև դրանք կապում է միմյանց հետ որոշակի կապերով՝ կախված նրանից, թե ինչպես է դրանցից յուրաքանչյուրը վերաբերվում մյուսին կոդի մեջ:

Այն տարրերը, որոնք ուղղակիորեն գտնվում են տարրի մեջ, նրա զավակներն են: Եվ նա նրանցից յուրաքանչյուրի համար ծնող է: Բացի այդ, այս բոլոր տարրերը միմյանց նկատմամբ եղբայրներ են (եղբայրներ):

Ավելին, HTML-ում ցանկացած տարր միշտ ունի մեկ ծնող (HTML տարրը, որում այն ​​ուղղակիորեն գտնվում է): HTML-ում տարրը չի կարող ունենալ մի քանի ծնող: Միակ բացառությունը html տարրն է: Նա ծնող չունի։

DOM ծառը ստանալու համար, ինչպես այն կառուցում է բրաուզերը, պարզապես անհրաժեշտ է «դասավորել» բոլոր տարրերը՝ կախված միմյանց հետ ունեցած հարաբերություններից:

DOM ծառի ստեղծումը կատարվում է վերևից ներքև։

DOM ծառի արմատը միշտ հենց փաստաթուղթն է (փաստաթղթի հանգույցը): Ավելին, ծառը կառուցվում է կախված HTML կոդի կառուցվածքից:

Օրինակ, HTML կոդը, որը մենք նայեցինք վերևում, կունենար հետևյալ DOM ծառը.

Այս ծառի ամենավերևում փաստաթղթի հանգույցն է: Այս հանգույցը կապված է html-ի հետ, դա նրա զավակն է: Ձևավորվում է html հանգույցը html տարր(...). Գլխի (...) և մարմնի (...) հանգույցները ծնողական հարաբերություններ ունեն html-ի հետ: Իրար նկատմամբ նրանք քույրեր ու եղբայրներ են, քանի որ ունենալ մեկ ծնող. Գլխի հանգույցը կապված է վերնագրի հետ (lt;title>...) և նրա զավակն է։ h1 և div հանգույցները կապված են մարմնի հետ, նրանց համար դա ծնողն է: Div հանգույցը կապված է h2(...) և p(-ի հետ), դրանք նրա զավակներն են։

Ծառը սկսվում է, ինչպես նշվեց վերևում, օբյեկտի (հանգույցի) փաստաթղթից: Այն իր հերթին ունի մեկ երեխա հանգույց՝ ձևավորված html (...) տարրով։ Գլուխ(...) և մարմին(...) տարրերը html-ում են և հետևաբար նրա զավակներն են: Հաջորդը, գլխավոր հանգույցը վերնագրի մայրն է (lt;title>...): h1 և div տարրերը գտնվում են մարմնի ներսում, ինչը նշանակում է, որ նրանք նրա զավակներն են: Div-ն ուղղակիորեն պարունակում է h2(...) և p() տարրեր: Սա նշանակում է, որ նրանցից յուրաքանչյուրի համար div հանգույցը ծնողն է:

Ահա թե ինչպես է DOM ծառը պարզապես կառուցվում բրաուզերում՝ հիմնվելով HTML կոդի վրա։

Ինչու՞ պետք է իմանաք, թե ինչպես է կառուցվում DOM ծառը: Նախ, դա այն միջավայրի ըմբռնումն է, որտեղ դուք ցանկանում եք ինչ-որ բան փոխել: Երկրորդ, DOM-ի հետ աշխատելիս գործողությունների մեծ մասը հանգում է անհրաժեշտ տարրերի որոնմանը (ընտրմանը): Առանց իմանալու, թե ինչպես է դասավորված DOM ծառը և կապերը հանգույցների միջև, բավականին դժվար կլինի դրանում կոնկրետ տարր գտնել։

Զորավարժություններ

Նկարում ցուցադրված DOM ծառի հիման վրա ստեղծեք HTML կոդը:

Այս հրապարակումը նախորդում է հոդվածների շարքին այլընտրանքային ուղիներաշխատել XML-ի հետ: «Այլընտրանք», քանի որ, որպես կանոն, 1C-ում XML-ով աշխատելը սահմանափակվում է xml-ի վերլուծությամբ՝ օգտագործելով հաջորդական ընթերցանություն՝ տեքստի բովանդակության տող առ տող վերլուծություն: Եվ կան նաև այլ ուղիներ:

Օրինակ՝ օգտագործելով xPath XML հարցման լեզուն կամ XSL փոխակերպման օրինաչափությունները: Այս տարբերակները կքննարկվեն հետագա հոդվածներում: Բայց նրանք բոլորն էլ ապավինում են XML փաստաթղթերի հիմքում ընկած DOM ներկայացմանը: Այն մասին, թե ինչ է DOM-ը (փաստաթղթի օբյեկտի մոդելը կամ փաստաթղթի օբյեկտի մոդելը) և կքննարկվի հրապարակման մեջ:

DOM-ը հիմնված է ցանկացած կառույցի փաստաթղթի ներկայացման վրա՝ հանգույցների ծառի տեսքով, որի յուրաքանչյուր հանգույց (հանգույց) տարր է, տարրի հատկանիշ, տարրի տեքստային արժեք և այլն։ հանգույցները կառուցված են «ծնող-ենթակա» սկզբունքով։ Փաստաթղթի արմատը (DOM ծառ) չունի ծնող: Կոճ տարրը չունի ստորադաս տարր (այդպիսի տարրերը վերացականորեն կոչվում են ծառի տերևներ): Այսպիսով, DOM մոդելը կարող է ստեղծվել ոչ միայն XML-ի, այլ իրականում ցանկացած կառուցվածքային փաստաթղթի համար (HTML, XHTML): Այսպիսով, օրինակ, օգտատիրոջ զննարկիչը, ինտերնետից ստանալով վեբ էջի HTML կոդը, օգտատիրոջ համակարգչի RAM-ում կառուցում է այս էջի DOM ծառը։

DOM-ը բացվում է լայն հնարավորություններփաստաթղթերի տվյալների մանիպուլյացիա. Դուք կարող եք ստեղծել նոր հանգույցներ, տեղադրել դրանք ծառի տարբեր մակարդակներում, պատճենել հանգույցները, ջնջել հանգույցները, որոնել հանգույցներ տարբեր պարամետրերով և շատ ավելին:

DOM մոդել XML փաստաթուղթհստակ ցույց է տրված ստորև նկարում:

Ցանկացած ժամանակակից ծրագրավորման լեզու ունի նման ծառի հետ աշխատելու գործիքներ (վերլուծիչներ): Ստանալով տողերի բովանդակությունը որպես մուտքագրում, XML վերլուծիչը RAM-ում կառուցում է հանգույցների ծառ և կատարում մանիպուլյացիաներ ծառի տվյալների հետ: Այս մոտեցման առավելությունը տող առ տող վերլուծության նկատմամբ ակնհայտ է. ծառին ուղղված մեկ հարցումով դուք կարող եք ընտրել անհրաժեշտ տվյալները՝ առանց ամբողջ փաստաթղթի տող առ տող անցնելու, քանի որ RAM-ը պարունակում է տարրերի ամբողջական ներկայացում բոլորով: փոխկապակցումներ.

1C հարթակում DOM մոդելը ներկայացված է հատուկ DocumentDOM օբյեկտով, որն իր հերթին կառուցված է DOM Builder օբյեկտի և նրա Read մեթոդի միջոցով։ Այս մեթոդը սովորաբար ընդունում է կամ XML Reader կամ HTML Reader օբյեկտ որպես մուտքագրում, որը կարող է օգտագործվել ուղղակիորեն կարդալու ֆայլերից կամ բեռնելու XML կամ HTML տեքստային բովանդակության տողից: Դե, ուրեմն կան մի շարք կառույցներ, որոնք թույլ են տալիս տվյալներ հանել ընթերցված փաստաթղթի օբյեկտի մոդելից:

Բոլոր տարբերակներից իմ տեսանկյունից ամենահետաքրքիրը #1 տարբերակն է՝ օգտագործելով EvaluateXPath Expression մեթոդը։ Հաջորդ հոդվածը նվիրված կլինի դրան։

Տող առ տող վերլուծության առավելությունները. ռեսուրսների կարիքն ավելի քիչ է: Դեմ. երկար ժամանակ է անհրաժեշտ տվյալներ ստանալու համար ամբողջ ֆայլը տող առ տող կարդալու համար, բարդություն ծրագրի կոդըբարդ կառուցվածքով XML փաստաթղթերը վերլուծելիս:

DOM-ի միջոցով նմուշառման առավելությունը՝ տվյալների նմուշառման արագությունը, ծրագրի կոդի պարզությունը: Դեմ. ծախսվում է ռեսուրսների պահանջարկը, DOM-ի կառուցումը և հարցումը RAMև մշակման հզորությունը։

DOM-ը հաճախ կոչվում է DOM ծառ, քանի որ այն կազմված է օբյեկտների ծառից, որը կոչվում է հանգույցներ: Դուք իմացաք, թե ինչ է փաստաթղթի օբյեկտի մոդելը (DOM), ինչպես մուտք գործել փաստաթղթի օբյեկտ և փոխել դրա հատկությունները վահանակի միջոցով, և մենք նաև իմացանք HTML աղբյուրի կոդի և DOM-ի տարբերությունը:

Այս ձեռնարկում դուք կգտնեք HTML տերմինաբանությունը, որն անհրաժեշտ է JavaScript-ի և DOM-ի հետ աշխատելու համար, կիմանաք ծառերի և DOM հանգույցների մասին և կսովորեք բացահայտել հանգույցների ամենատարածված տեսակները: Դուք կարող եք նաև JavaScript ծրագիր ստեղծել վահանակում՝ DOM-ը ինտերակտիվ կերպով փոխելու համար:

HTML տերմինաբանություն

HTML և JavaScript տերմինները հասկանալը կարևոր է DOM-ի հետ աշխատելու համար: Եկեք արագ նայենք հիմնական տերմիններին:

Նայեք այս HTML տարրին.

տուն

Այն ունի խարիսխ, որը հղում է դեպի index.html:

• a - պիտակ
• href - հատկանիշ
• html - հատկանիշի արժեք
• Տուն - տեքստ:

Բացման և փակման պիտակների միջև ամեն ինչ HTML տարր է:

Եկեք վերադառնանք index.html ֆայլին նախորդ ձեռնարկից.

Սովորելով DOM


Փաստաթղթի օբյեկտի մոդել

JavaScript-ով տարր մուտք գործելու ամենահեշտ ձևը id հատկանիշն է: Եկեք վերը նշված հղումը ավելացնենք index.html ֆայլին id="nav"-ով:

...

Փաստաթղթի օբյեկտի մոդել
տուն

...

Բեռնեք (կամ թարմացրեք) էջը դիտարկիչի պատուհանում և նայեք DOM-ին՝ համոզվելու համար, որ կոդը թարմացվել է:

Այնուհետև օգտագործեք getElementById() մեթոդը՝ ամբողջ տարրը մուտք գործելու համար: Վահանակում մուտքագրեք հետևյալը.

document.getElementById("nav");
տուն

GetElementById() մեթոդը կվերցնի ամբողջ տարրը: Այժմ, այս օբյեկտը և մեթոդը մուտքագրելու փոխարեն ամեն անգամ, երբ դուք պետք է մուտք գործեք nav հղումը, կարող եք տարրը դնել փոփոխականի մեջ, որպեսզի հեշտացնեք դրա հետ աշխատելը:

թող navLink = document.getElementById ("nav");

NavLink փոփոխականը պարունակում է խարիսխը: Այստեղ դուք կարող եք հեշտությամբ փոխել ատրիբուտները և արժեքները: Օրինակ՝ հղումի գտնվելու վայրը փոխելու համար փոխեք href հատկանիշը՝

navLink.href = "https://www.wikipedia.org";

Կարող եք նաև փոխել տեքստը՝ վերահանձնելով textContent հատկությունը.

navLink.textContent = «Նավարկություն դեպի Վիքիպեդիա»;

Այժմ, եթե այս տարրը դիտեք վահանակում կամ ստուգեք Elements թեգը, կտեսնեք, թե ինչպես է այն թարմացվել:

navlink;
Նավարկեք դեպի Վիքիպեդիա

Փոփոխությունները կարտացոլվեն նաև ճակատային մասում:

Էջի թարմացումը կվերադարձնի բոլոր սկզբնական արժեքները:

Այս պահին դուք պետք է հասկանաք, թե ինչպես օգտագործել փաստաթղթի մեթոդը տարր մուտք գործելու համար, ինչպես տարր վերագրել փոփոխականին և ինչպես փոխել տարրերի հատկություններն ու արժեքները:

Ծառ և DOM հանգույցներ

DOM-ի բոլոր տարրերը սահմանվում են որպես հանգույցներ: Կան բազմաթիվ տեսակի հանգույցներ, բայց կան երեք հիմնական, որոնց հետ դուք կաշխատեք առավել հաճախ.

Տարրերի հանգույց

Տեքստային հանգույց

Մեկնաբանության հանգույց

Երբ HTML տարրը DOM-ի տարր է, այն կոչվում է տարրային հանգույց: Տարրից դուրս ցանկացած առանձին տեքստ տեքստային հանգույց է և HTML մեկնաբանություն- մեկնաբանությունների հանգույց: Բացի այս երեք տեսակի հանգույցներից, փաստաթղթի օբյեկտն ինքնին փաստաթղթի հանգույցն է, որը բոլոր մյուս հանգույցների արմատային հանգույցն է։

DOM-ը բաղկացած է ներդիր հանգույցներից բաղկացած ծառի կառուցվածքից, որը հաճախ կոչվում է DOM ծառ: Դուք հաստատ գիտեք, թե ինչ է տոհմածառ- Սա ընտանեկան կապերի սխեմատիկ ներկայացումն է, որը բաղկացած է ծնողներից, երեխաներից և անմիջական ընտանիքից: DOM-ի հանգույցները կոչվում են նաև ծնող և երեխա հանգույցներ՝ ելնելով այլ հանգույցների հետ ունեցած կապից:

Օրինակ՝ ստեղծել nodes.html ֆայլ: դրան ավելացնել տեքստային հանգույց, ինչպես նաև մեկնաբանությունների և տարրերի հանգույցներ:

Սովորում հանգույցների մասին


Տարրերի հանգույց

Տեքստային հանգույց:

html տարրի հանգույցը ծնողն է: գլուխը և մարմինը html մանկական հանգույցներ են: մարմինը պարունակում է երեք մանկական հանգույցներ, և դրանք բոլորը նույն մակարդակի վրա են. հանգույցի տեսակը չի ազդում բնադրման մակարդակի վրա:

Նշում. HTML-ով ստեղծված DOM-ի հետ աշխատելիս HTML-ի սկզբնաղբյուրի նահանջը ստեղծում է բազմաթիվ դատարկ տեքստային հանգույցներ, որոնք տեսանելի չեն լինի DevTools Elements ներդիրում: Այս մասին ավելի մանրամասն՝ հղումով։

Հանգույցի տեսակի սահմանում

Փաստաթղթի յուրաքանչյուր հանգույց ունի իր տեսակը, որը հասանելի է nodeType հատկության միջոցով: Mozilla Developer Network-ն ունի բոլոր հանգույցների տիպի հաստատունների թարմացված ցուցակ: Ստորև ներկայացված է հանգույցների ամենատարածված տեսակների աղյուսակը:

Developer Tools-ի Elements ներդիրում կարող եք նկատել, որ երբ սեղմում եք և ընտրում եք DOM-ի որևէ տող, դրա կողքին հայտնվում է == $0 արժեքը: Սա շատ հարմար միջոցմուտք գործել ընթացիկ ակտիվ տարր:

Node.html վահանակում սեղմեք մարմնի առաջին տարրի վրա (h1):

Օգտագործելով վահանակը, պարզեք ընտրված հանգույցի տեսակը՝ օգտագործելով nodeType հատկությունը:

$0.nodeType;
1

Ընտրելով h1 տարրը, որպես ելք կտեսնեք 1-ը, որը վերաբերում է ELEMENT_NODE-ին: Նույնը արեք այլ հանգույցների հետ, և նրանք կվերադարձնեն համապատասխանաբար 3 և 8:

Իմանալով, թե ինչպես մուտք գործել տարր, դուք կարող եք տեսնել հանգույցի տեսակը՝ առանց DOM-ի տարրերն ընդգծելու:

document.body.nodeType;
1

Բացի nodeType-ից, կարող եք օգտագործել նաև nodeValue հատկությունը՝ տեքստի կամ մեկնաբանության հանգույցի արժեքը ստանալու համար, իսկ nodeName-ը՝ տարրի պիտակը ստանալու համար:

DOM-ի փոփոխություն Իրադարձություններով

Մինչ այժմ դուք տեսել եք, թե ինչպես կարելի է փոխել DOM-ը վահանակում, և հայտնի է, որ նման փոփոխությունները ժամանակավոր են. ամեն անգամ, երբ էջը թարմացվում է, բոլոր փոփոխությունները կորչում են: Դուք թարմացրել եք վահանակի էջի ֆոնի գույնը: Փորձեք համատեղել այն, ինչ սովորել եք այս ձեռնարկում և այն, ինչ արդեն գիտեք, ստեղծելու համար ինտերակտիվ կոճակ, որը փոխում է ֆոնի գույնը:

Վերադարձեք index.html ֆայլին և ավելացրեք կոճակի տարր id-ով։ Անհրաժեշտ է նաև հղում ավելացնել նոր ֆայլդեպի նոր js գրացուցակ js/scripts.js:

Սովորելով DOM


Փաստաթղթի օբյեկտի մոդել
Փոխել ֆոնի գույնը

JavaScript-ում իրադարձությունը գործողություն է, որը կատարում է օգտատերը: Օգտագործողը սավառնում է տարրի վրա, սեղմում դրա վրա կամ սեղմում է ստեղնաշարի որոշակի ստեղնը. սրանք բոլորը իրադարձություններ են: Այս կոնկրետ դեպքում, կոճակը պետք է կատարի գործողություն, երբ օգտագործողը սեղմում է դրա վրա: Դա անելու համար դուք պետք է ավելացնեք իրադարձությունների լսող: Ստեղծեք scripts.js ֆայլ և պահեք այն նոր js գրացուցակում: Դուք պետք է ֆայլում սահմանեք կոճակի տարր և վերագրեք այն փոփոխականին:

Օգտագործելով addEventListener() մեթոդը, կոճակը կլսի սեղմումները և կկատարի իր գործառույթը սեղմելուց հետո:

...
button.addEventListener("սեղմել", () => (
// գործողությունը կգնա այստեղ
});

Ֆունկցիայի ներսում դուք պետք է տեղադրեք նախորդ ձեռնարկի կոդը՝ ֆոնի գույնը ֆուչիայի փոխելու համար:

...

Ահա թե ինչ տեսք ունի սցենարը.

let button = document.getElementById("changeBackground");
button.addEventListener("սեղմել", () => (
document.body.style.backgroundColor = «ֆուքսիա»;
});

Պահպանեք և փակեք ֆայլը: Թարմացրեք index.html էջը բրաուզերում: Մամուլ նոր կոճակ, և էջի ֆոնի գույնը կփոխվի։

Tags:

Սովորաբար, մշակողները օգտագործում են jQuery, երբ նրանք պետք է ինչ-որ բան անեն DOM-ի հետ: Այնուամենայնիվ, DOM-ի գրեթե ցանկացած մանիպուլյացիա կարող է իրականացվել մաքուր JavaScript-ում՝ օգտագործելով իր DOM API-ն:

Եկեք նայենք այս API-ին ավելի մանրամասն.

Վերջում դուք կգրեք ձեր սեփական պարզ DOM գրադարանը, որը կարող է օգտագործվել ցանկացած նախագծում:

DOM հարցումներ

DOM հարցումները կատարվում են օգտագործելով .querySelector() մեթոդը, որը որպես փաստարկ ընդունում է կամայական CSS ընտրիչ:

Const myElement = document.querySelector ("#foo > div.bar")

Այն կվերադարձնի առաջին համապատասխան տարրը: Դուք կարող եք հակառակն անել՝ ստուգեք՝ արդյոք տարրը համապատասխանում է ընտրիչին.

MyElement.matches("div.bar") === ճշմարիտ

Եթե ​​ցանկանում եք ստանալ ընտրիչին համապատասխանող բոլոր տարրերը, օգտագործեք հետևյալ կառուցվածքը.

Const myElements = document.querySelectorAll(."bar")

Եթե ​​գիտեք, թե որ ծնող տարրին հղում կատարել, կարող եք պարզապես որոնել նրա երեխաների մեջ՝ ամբողջ ծածկագիրը որոնելու փոխարեն.

Const myChildElemet = myElement.querySelector("input") // Փոխարենը՝ // document.querySelector ("#foo > div.bar input")

Հարց է առաջանում. ինչու՞ այդ դեպքում օգտագործել այլ, ոչ այնքան հարմար մեթոդներ, ինչպիսիք են.getElementsByTagName()-ը: Մի փոքր խնդիր կա՝ output.querySelector()-ի արդյունքը չի թարմացվում, և երբ ավելացնում ենք. նոր տարր(տես), այն չի փոխվի։

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) element1.length === տարրեր2.length // կեղծ

Նաև querySelectorAll()-ը հավաքում է ամեն ինչ մեկ ցուցակի մեջ, ինչը դարձնում է այն ոչ այնքան արդյունավետ:

Ինչպե՞ս աշխատել ցուցակների հետ:

Բացի այդ, .querySelectorAll()-ն ունի երկու փոքր տարօրինակություն: Դուք չեք կարող պարզապես մեթոդներ անվանել արդյունքների վրա և ակնկալել, որ դրանք կկիրառվեն դրանցից յուրաքանչյուրի վրա (ինչպես կարող եք սովոր լինել անել jQuery-ի հետ): Ամեն դեպքում, ձեզ հարկավոր է կրկնել օղակի բոլոր տարրերը: Երկրորդ, վերադարձված օբյեկտը տարրերի ցանկ է, այլ ոչ թե զանգված: Հետևաբար, զանգվածային մեթոդները չեն աշխատի: Իհարկե, ցուցակների համար կան մեթոդներ, ինչ-որ .forEach() , բայց, ավաղ, դրանք ոչ բոլոր դեպքերի համար են հարմար։ Այսպիսով, ավելի լավ է ցուցակը վերածել զանգվածի.

// Օգտագործելով Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Կամ զանգվածի նախատիպ (pre-ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Ավելի հեշտ.forE. (myElements, doSomethingWithEachElement)

Յուրաքանչյուր տարր ունի որոշ հատկություններ, որոնք վերաբերում են «ընտանիքին»:

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Քանի որ Element միջերեսը ժառանգված է Node ինտերֆեյսից, հետևյալ հատկությունները նույնպես առկա են.

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Նախկին հատկությունները վերաբերում են տարրին, մինչդեռ վերջինները (բացառությամբ .parentElement-ի) կարող են լինել ցանկացած տեսակի տարրերի ցուցակներ: Համապատասխանաբար, դուք կարող եք ստուգել տարրի տեսակը.

MyElement.firstChild.nodeType === 3 // այս տարրը կլինի տեքստային հանգույց

Դասերի և հատկանիշների ավելացում

Ավելացնել նոր դասՇատ պարզ:

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Տարրին հատկություն ավելացնելը ճիշտ նույնն է, ինչ ցանկացած օբյեկտի հատկություն ավելացնելը.

// Ստացեք հատկանիշի արժեքը const value = myElement.value // Սահմանեք հատկանիշը որպես myElement.value = "foo) տարրի հատկություն" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Դուք կարող եք օգտագործել .getAttibute() , .setAttribute() և .removeAttribute() մեթոդները։ Նրանք անմիջապես կփոխեն տարրի HTML ատրիբուտները (ի տարբերություն DOM հատկությունների), ինչը կգործարկի զննարկչի վերարտադրումը (դուք կարող եք տեսնել ցանկացած փոփոխություն՝ ստուգելով տարրը՝ օգտագործելով զննարկիչում մշակողի գործիքները): Նման վերագծումները ոչ միայն պահանջում են ավելի շատ ռեսուրսներ, քան DOM-ի հատկությունները սահմանելը, այլև կարող են հանգեցնել անսպասելի սխալների:

Դրանք սովորաբար օգտագործվում են այն տարրերի վրա, որոնք չունեն համապատասխան DOM հատկություններ, օրինակ՝ colspan: Կամ եթե դրանց օգտագործումն իսկապես անհրաժեշտ է, օրինակ՝ HTML հատկությունների համար ժառանգելիս (տես)։

CSS ոճերի ավելացում

Դրանք ավելացվում են այնպես, ինչպես մյուս հատկությունները.

MyElement.style.marginLeft = «2em»

Որոշ հատուկ հատկություններ կարող են սահմանվել օգտագործելով .style, բայց եթե ցանկանում եք արժեքներ ստանալ որոշ հաշվարկներից հետո, ավելի լավ է օգտագործել window.getComputedStyle(): Այս մեթոդը վերցնում է տարրը և վերադարձնում է CSSStyleDeclaration, որը պարունակում է ինչպես տարրի, այնպես էլ նրա ծնողի ոճերը.

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

DOM-ի փոփոխություն

Դուք կարող եք տեղափոխել տարրեր.

// Ավելացնելով տարր 1-ին որպես տարր 2-ի վերջին զավակ1.appendChild(element2) // Տեղադրել տարր 2-ը որպես տարր 1-ի երեխա՝ նախքան element3 element1.insertBefore(element2, element3)

Եթե ​​դուք չեք ցանկանում տեղափոխվել, բայց պետք է տեղադրեք պատճենը, օգտագործեք.

// Ստեղծել կլոն const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() մեթոդը որպես արգումենտ ընդունում է բուլյան արժեք, և եթե ճիշտ է, ապա երեխայի տարրերը նույնպես կլոնավորվում են:

Իհարկե, դուք կարող եք ստեղծել նոր տարրեր.

const myNewElement = document.createElement («div») const myNewTextNode = document.createTextNode («որոշ տեքստ»)

Եվ հետո տեղադրեք դրանք, ինչպես ցույց է տրված վերևում: Դուք չեք կարող ուղղակիորեն ջնջել տարրը, բայց կարող եք դա անել մայր տարրի միջոցով.

MyParentElement.removeChild(myElement)

Կարող եք նաև անուղղակիորեն անդրադառնալ.

MyElement.parentNode.removeChild(myElement)

Մեթոդներ տարրերի վրա

Յուրաքանչյուր տարր ունի այնպիսի հատկություններ, ինչպիսիք են .innerHTML և .textContent, դրանք պարունակում են HTML կոդը և, համապատասխանաբար, հենց տեքստը: Հետևյալ օրինակը փոխում է տարրի բովանդակությունը.

// Փոխել HTML-ը myElement.innerHTML = ` Նոր բովանդակություն ( el.addEventListener("փոփոխություն", ֆունկցիա (իրադարձություն) ( console.log(event.target.value) )) ))

Կանխադրված գործողությունների կանխարգելում

Դրա համար օգտագործվում է .preventDefault() մեթոդը, որն արգելափակում է ստանդարտ գործողությունները։ Օրինակ, այն կարգելափակի ձևի ներկայացումը, եթե թույլտվությունը միացված է հաճախորդի կողմըհաջողություն չի ունեցել.

MyForm.addEventListener("submit", ֆունկցիա (իրադարձություն) ( const name = this.querySelector("#name") if (name.value === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

.stopPropagation() մեթոդը կօգնի, եթե դուք ունեք հատուկ իրադարձությունների մշակիչ՝ կապված երեխայի հետ, իսկ նույն իրադարձության երկրորդ մշակիչը՝ ծնողին:

Ինչպես նշվեց ավելի վաղ, .addEventListener() մեթոդն ընդունում է կամընտիր երրորդ արգումենտը որպես կազմաձևման օբյեկտ: Այս օբյեկտը պետք է պարունակի հետևյալ բուլյան հատկություններից որևէ մեկը (կանխադրված բոլորը դրված են false-ի վրա).

• նկարահանում. իրադարձությունը կկցվի այս տարրին DOM-ում ներքևում գտնվող ցանկացած այլ տարրից առաջ.
• Մեկ անգամ. Իրադարձությունը կարող է ամրացվել միայն մեկ անգամ:
• պասիվ. event.preventDefault()-ն անտեսվելու է (բացառություն սխալի ժամանակ):

Ամենատարածված հատկությունը .capture-ն է, և այն այնքան տարածված է, որ դրա համար կա սղագրություն. այն կոնֆիգուրայի օբյեկտում փոխանցելու փոխարեն, պարզապես նշեք դրա արժեքը այստեղ.

MyElement.addEventListener (տեսակ, լսող, ճշմարիտ)

Գործող սարքերը հեռացվում են՝ օգտագործելով .removeEventListener() մեթոդը, որը վերցնում է երկու արգումենտ՝ իրադարձության տեսակը և հղում մշակողին, որը պետք է հեռացվի: Օրինակ, մեկ անգամ գույքը կարող է իրականացվել այսպես.

MyElement.addEventListener("փոփոխություն", ֆունկցիա լսող (իրադարձություն) (consol.log(event.type + "գործարկվել է " + this) this.removeEventListener("փոփոխություն", լսող) ))

Ժառանգություն

Ենթադրենք, դուք ունեք տարր և ցանկանում եք ավելացնել իրադարձությունների մշակիչ դրա բոլոր զավակ տարրերի համար: Այնուհետև դուք պետք է պտտեք դրանք՝ օգտագործելով myForm.querySelectorAll("input") մեթոդը, ինչպես ցույց է տրված վերևում: Այնուամենայնիվ, դուք կարող եք պարզապես տարրեր ավելացնել ձևին և ստուգել դրանց բովանդակությունը event.target-ով:

MyForm.addEventListener("փոփոխություն", ֆունկցիա (իրադարձություն) ( const target = event.target if (target.matches("input")) (consol.log(target.value) ))

Եվ այս մեթոդի ևս մեկ առավելությունն այն է, որ կարգավորիչը ավտոմատ կերպով կցվի նոր երեխա տարրերին:

Անիմացիա

Անիմացիա ավելացնելու ամենահեշտ ձևը CSS-ի օգտագործումն է անցումային հատկությամբ: Բայց ավելի ճկունության համար (օրինակ՝ խաղի համար), JavaScript-ն ավելի հարմար է:

«Windows.setTimeout() մեթոդը մինչև անիմացիայի ավարտը կանչելը լավ գաղափար չէ, քանի որ ձեր հավելվածը կարող է սառեցնել, հատկապես շարժական սարքեր. Ավելի լավ է օգտագործել window.requestAnimationFrame()-ը՝ բոլոր փոփոխությունները պահպանելու համար մինչև հաջորդ վերագծումը: Այն որպես փաստարկ ընդունում է ֆունկցիա, որն իր հերթին ստանում է ժամանակի դրոշմ.

const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (այժմ)) ( const progress = now - start myElement.style.opacity = առաջընթաց / տևողություն, եթե (առաջընթաց< duration) { window.requestAnimationFrame(fadeIn) } }

Այս կերպ ձեռք է բերվում շատ հարթ անիմացիա: Իր հոդվածում Մարկ Բրաունը քննարկում է այս թեման։

Գրելով մեր սեփական գրադարանը

Այն փաստը, որ DOM-ում դուք պետք է անընդհատ կրկնեք տարրերը՝ դրանցով ինչ-որ բան անելու համար, կարող է բավականին հոգնեցուցիչ թվալ՝ համեմատած jQuery-ի $(.foo").css((color: "red")) շարահյուսության հետ: Բայց ինչու՞ չգրել ձեր սեփական մեթոդներից այս առաջադրանքը հեշտացնելու համար:

Const $ = ֆունկցիա $(ընտրիչ, համատեքստ = փաստաթուղթ) ( const տարրեր = Array.from(context.querySelectorAll(selector)) վերադարձ ( տարրեր, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) վերադարձնել սա ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) վերադարձնել սա ), on (իրադարձություն, մշակիչ, ընտրանքներ) ( this.elements .forEach(element => ( element.addEventListener (իրադարձություն, մշակող, ընտրանքներ) )) վերադարձրեք սա ) )

Այս դասում մենք կանդրադառնանք, թե ինչ է DOM-ը, ինչու է այն անհրաժեշտ և ինչպես է այն կառուցված:

Ի՞նչ է DOM-ը:

Բրաուզերը, երբ խնդրում է էջ և ստանում դրա սկզբնական HTML կոդը՝ ի պատասխան սերվերից, նախ պետք է վերլուծի այն: HTML կոդը վերլուծելու և վերլուծելու գործընթացում զննարկիչը դրա հիման վրա կառուցում է DOM ծառ:

Այս և մի շարք այլ գործողությունների կատարումից հետո զննարկիչը անցնում է էջի արտապատկերմանը: Այս գործընթացում նա, իհարկե, արդեն օգտագործում է իր ստեղծած DOM ծառը, ոչ թե բնօրինակ HTML-ը։

DOM-ը փաստաթղթի օբյեկտի մոդելն է, որը զննարկիչը ստեղծում է համակարգչի հիշողության մեջ՝ հիմնվելով սերվերից ստացած HTML կոդի վրա:

Պարզ ասած, HTML կոդը էջի տեքստն է, իսկ DOM-ը հարակից օբյեկտների մի շարք է, որը ստեղծվել է բրաուզերի կողմից՝ տեքստը վերլուծելիս:

Chrome-ում զննարկիչը ստացած էջի սկզբնական կոդը կարելի է դիտել «Վեբ մշակողի գործիքներ» վահանակի «Աղբյուր» ներդիրում:

Chrome-ում չկա գործիք, որը կարող է օգտագործվել իր ստեղծած DOM ծառը դիտելու համար: Բայց կա այս DOM ծառի ներկայացումը HTML կոդի տեսքով, այն հասանելի է «Elements» ներդիրում։ DOM-ի այս ներկայացուցչությունը, իհարկե, շատ ավելի հարմար է վեբ ծրագրավորողի հետ աշխատելու համար: Հետևաբար, չկա գործիք, որը կներկայացնի DOM-ը ծառի կառուցվածքի տեսքով:

Այս մոդելի օբյեկտները ձևավորվում են գրեթե ամեն ինչից, ինչ կա HTML-ում (պիտակներ, տեքստային բովանդակություն, մեկնաբանություններ և այլն), ներառյալ հենց փաստաթուղթը: Մոդելի այս օբյեկտների միջև հարաբերությունները ձևավորվում են այն բանի հիման վրա, թե ինչպես են HTML տարրերը գտնվում կոդում միմյանց նկատմամբ:

Այս դեպքում փաստաթղթի DOM-ը ձևավորումից հետո կարող է փոխվել: Երբ DOM-ը փոխվում է, զննարկիչը վերագծում է էջի պատկերը գրեթե ակնթարթորեն: Արդյունքում, էջի մեր մատուցումը միշտ համապատասխանում է DOM-ին:

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

DOM-ի հետ աշխատելու համար շատ դեպքերում օգտագործվում է JavaScript, քանի որ. մինչ օրս դա միակ ծրագրավորման լեզուն է, որով սկրիպտները կարող են իրականացվել բրաուզերում:

Ինչու՞ մեզ պետք է DOM API: Մեզ դա անհրաժեշտ է, որպեսզի կարողանանք JavaScript-ով փոխել էջը անմիջապես, այսինքն. դարձնել այն դինամիկ և ինտերակտիվ:

DOM API-ն մեզ (մշակողներին) տրամադրում է հսկայական քանակությամբ մեթոդներ, որոնցով մենք կարող ենք փոխել ամեն ինչ էջում, ինչպես նաև շփվել օգտատիրոջ հետ: Նրանք. Այս ծրագրավորման ինտերֆեյսը մեզ թույլ է տալիս ստեղծել բարդ ինտերֆեյսներ, ձևեր, մշակել օգտվողի գործողությունները, ավելացնել և հեռացնել տարբեր տարրեր էջում, փոխել դրանց բովանդակությունը, հատկությունները (ատրիբուտները) և շատ ավելին:

Այժմ համացանցում գործնականում չկան այնպիսի կայքեր, որոնց սկրիպտներում DOM-ի հետ աշխատանք չի լինի:

Ի՞նչ է HTML կոդը էջի համար:

Նախքան փաստաթղթի օբյեկտի մոդելի ուսումնասիրությանը անցնելը, նախ պետք է հիշել, թե որն է վեբ էջի սկզբնական կոդը (HTML փաստաթուղթ):

Վեբ էջի սկզբնական կոդը բաղկացած է թեգերից, ատրիբուտներից, մեկնաբանություններից և տեքստից: Թեգերը HTML-ի հիմնական շարահյուսությունն են: Նրանցից շատերը զույգերով են։ Տվյալ դեպքում դրանցից մեկը բացողն է, իսկ մյուսը՝ փակող։ Նման զույգ թեգերից մեկը կազմում է HTML տարր: HTML տարրերը կարող են ունենալ լրացուցիչ պարամետրեր՝ ատրիբուտներ:

Որոշակի նշում ստեղծելու փաստաթղթում որոշ տարրեր գտնվում են մյուսների ներսում: Արդյունքում, HTML փաստաթուղթը կարելի է համարել որպես HTML տարրերի մի շարք:

Որպես օրինակ, հաշվի առեք հետևյալ HTML կոդը.

Էջի վերնագիր Հոդվածի վերնագիր հոդվածի բաժին

Հոդվածի բովանդակությունը

Այս կոդում արմատային տարրը html է: Գլխի և մարմնի տարրերը բույն են դրված դրա մեջ։ Գլխավոր տարրը պարունակում է վերնագիր, իսկ մարմնի տարրը պարունակում է h1 և div: Div տարրն իր հերթին պարունակում է h2 և p:

Հիմա եկեք տեսնենք, թե ինչպես է զննարկիչը կառուցում DOM ծառ՝ հիմնվելով HTML կոդի վրա:

Ինչպե՞ս է կառուցված փաստաթղթի DOM ծառը:

Ինչպես արդեն նկարագրված է վերևում, զննարկիչը ծառ է կառուցում՝ հիմնված HTML տարրերի և էջի սկզբնական կոդի այլ սուբյեկտների վրա: Այս գործընթացը կատարելիս հաշվի է առնվում տարրերի բնադրումը միմյանց մեջ։

Արդյունքում զննարկիչը օգտագործում է ստացված DOM ծառը ոչ միայն իր աշխատանքում, այլև մեզ տրամադրում է API՝ JavaScript-ի միջոցով դրա հետ հարմար աշխատանքի համար։

DOM-ը կառուցելիս զննարկիչը ստեղծում է օբյեկտներ (DOM ծառի հանգույցներ) HTML տարրերից, տեքստից, մեկնաբանություններից և այս լեզվի այլ միավորներից:

Շատ դեպքերում վեբ մշակողներին հետաքրքրում են միայն HTML տարրերից ձևավորված օբյեկտները (հանգույցները):

Միևնույն ժամանակ, զննարկիչը ոչ միայն օբյեկտներ է ստեղծում HTML տարրերից, այլև դրանք կապում է միմյանց հետ որոշակի կապերով՝ կախված նրանից, թե ինչպես է դրանցից յուրաքանչյուրը վերաբերվում մյուսին կոդի մեջ:

Այն տարրերը, որոնք ուղղակիորեն գտնվում են տարրի մեջ, նրա զավակներն են: Եվ նա նրանցից յուրաքանչյուրի համար ծնող է: Բացի այդ, այս բոլոր տարրերը միմյանց նկատմամբ եղբայրներ են (եղբայրներ):

Ավելին, HTML-ում ցանկացած տարր միշտ ունի մեկ ծնող (HTML տարրը, որում այն ​​ուղղակիորեն գտնվում է): HTML-ում տարրը չի կարող ունենալ մի քանի ծնող: Միակ բացառությունը html տարրն է: Նա ծնող չունի։

DOM ծառը ստանալու համար, ինչպես այն կառուցում է բրաուզերը, պարզապես անհրաժեշտ է «դասավորել» բոլոր տարրերը՝ կախված միմյանց հետ ունեցած հարաբերություններից:

DOM ծառի ստեղծումը կատարվում է վերևից ներքև։

DOM ծառի արմատը միշտ հենց փաստաթուղթն է (փաստաթղթի հանգույցը): Ավելին, ծառը կառուցվում է կախված HTML կոդի կառուցվածքից:

Օրինակ, HTML կոդը, որը մենք նայեցինք վերևում, կունենար հետևյալ DOM ծառը.

Այս ծառի ամենավերևում փաստաթղթի հանգույցն է: Այս հանգույցը կապված է html-ի հետ, դա նրա զավակն է: html հանգույցը ձևավորվում է html(...) տարրով։ Գլխի (...) և մարմնի (...) հանգույցները ծնողական հարաբերություններ ունեն html-ի հետ: Իրար նկատմամբ նրանք քույրեր ու եղբայրներ են, քանի որ ունենալ մեկ ծնող. Գլխի հանգույցը կապված է վերնագրի հետ (lt;title>...) և նրա զավակն է։ h1 և div հանգույցները կապված են մարմնի հետ, նրանց համար դա ծնողն է: Div հանգույցը կապված է h2(...) և p(-ի հետ), դրանք նրա զավակներն են։

Ծառը սկսվում է, ինչպես նշվեց վերևում, օբյեկտի (հանգույցի) փաստաթղթից: Այն իր հերթին ունի մեկ երեխա հանգույց՝ ձևավորված html (...) տարրով։ Գլուխ(...) և մարմին(...) տարրերը html-ում են և հետևաբար նրա զավակներն են: Հաջորդը, գլխավոր հանգույցը վերնագրի մայրն է (lt;title>...): h1 և div տարրերը գտնվում են մարմնի ներսում, ինչը նշանակում է, որ նրանք նրա զավակներն են: Div-ն ուղղակիորեն պարունակում է h2(...) և p() տարրեր: Սա նշանակում է, որ նրանցից յուրաքանչյուրի համար div հանգույցը ծնողն է:

Ահա թե ինչպես է DOM ծառը պարզապես կառուցվում բրաուզերում՝ հիմնվելով HTML կոդի վրա։

Ինչու՞ պետք է իմանաք, թե ինչպես է կառուցվում DOM ծառը: Նախ, դա այն միջավայրի ըմբռնումն է, որտեղ դուք ցանկանում եք ինչ-որ բան փոխել: Երկրորդ, DOM-ի հետ աշխատելիս գործողությունների մեծ մասը հանգում է անհրաժեշտ տարրերի որոնմանը (ընտրմանը): Առանց իմանալու, թե ինչպես է դասավորված DOM ծառը և կապերը հանգույցների միջև, բավականին դժվար կլինի դրանում կոնկրետ տարր գտնել։

Զորավարժություններ

Նկարում ցուցադրված DOM ծառի հիման վրա ստեղծեք HTML կոդը: