Ինչպես ստեղծել սեփական HTML էլեմենտ

ինչպես ստեղծել հտմլ էլեմենտ

HTML5-ը հնարավորություն է տալիս ստեղծել կրկնակի օգտագործման դինամիկ էլեմենտներ՝ օգտագործելով ընդամենը մի քանի տող կոդ: Ընդ որում, ոչ մի լրացուցիչ ֆրոնտենդ ֆրեյմվորքի կարիք չի լինի:

Այսպիսով, եկեք ստեղծենք հատուկ կոմպոնենտ՝ ողջույնի հաղորդագրությունը ցուցադրելու համար:

Սեփական էլեմենտի ստեղծումը՝ “Hello World!” ցուցադրելու համար:

custom tags

Օգտագործման տարբերակի սցենար. անհրաժեշտ է ստեղծել հատուկ էլեմենտ, որը կցուցադրի “Hello World!` ամեն տեղ, որտեղ նա աշխատում է:

Անհատական HTML էլեմենտ ստեղծելու համար անհրաժեշտ քայլերը:

  1. Մենք ստեղծում ենք նոր կլաս, որը ներկայացնում է նոր էլեմենտը:
  2. Ընդլայնում ենք HTMLElement կլասից:
  3. Կլասի մեջ ավելացնում ենք connectCallback ֆունկցիան՝ դոկումենտում էլեմենտ ավելացնելիս DOM էլեմենտ հասանելիություն ունենալու համար:
  4. Ստանում ենք հասանելիություն DOM էլեմենտին՝ this բանալի բառի օգնությամբ։
  5. Օգտագործում ենք DOM էլեմենտը՝ էլեմենտի հատկություններին մուտք գործելու և փոփոխություններ կատարելու համար։
  6. Ավելացնում ենք նոր, մեր սեփական HTML էլեմենտը:

HTMLElement-ի միջոցով կլասի ստեղծում եւ ընդլայնում

Եկեք դիտարկենք յուրաքանչյուր փուլ, յուրաքանչյուր քայլը եւ ստեղծենք մի նոր կոմպոնենտ, որը կցուցադրի “Hello World!” ողջույնի հաղորդագրությունը: Դա կլինի բազմակի օգտագործման կոմպոնենտ: Այնպես որ, ամեն տեղ, որտեղ մենք գործարկում ենք HTML էլեմենտը, այն ցույց կտա “Hello World!”-ը:


class CurrentTime extends HTMLElement {
    
}

Այս կոդում մենք ստեղծում ենք կլաս, որը կոչվում է CurrentTime, որը ընդլայնվում է HTMLElement կլասից: Այնուհետեւ մենք կավելացնենք connectedCallback ֆունկցիան կլասին եւ կկարգավորենք innerHTML կոմպոնենտի հատկությունը այդ ֆունկցիայի ներսում՝ օգտագործելով this բանալի բառը:

ConnectedCallback ֆունկցիայի ավելացումը և հասանելիությունն էլեմենտին


class Salutation extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `

Hello World...

`; this.style.color = "red"; } }

Այս կոդի մեջ մենք ավելացրել ենք connectedCallback ֆունկցիան: Այն կանչվում է, երբ էլեմենտը ցուցադրվում է բրաուզերում: Երբ կոմպոնենտը հայտնվում է բրաուզերում եւ ֆունկցիան կանչվում է, մենք կարող ենք էլեմենտին հասանելիություն ունենալ this բանալի բառով: Վերոնշյալ կոդում մենք փորձում ենք հասանելիություն ստանալ էլեմենտին՝ օգտագործելով this բանալի բառը եւ թարմացնել էլեմենտի երկու հատկություններ՝

  1. innerHTML.
  2. style.color.

Անհատական կոմպոնենտի գրանցում

Որպեսզի էլեմենտը հասանելի լինի HTML-ում օգտագործման համար, անհրաժեշտ է սահմանել այն թեգը, որը ներկայացնում է այդ կլասը: Իսկ անհատական էլեմենտը սահմանելու համար պետք է կիրառել customElement հատկությունը եւ դրա օգնությամբ սահմանել էլեմենտը.


class Salutation extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `

Hello World...

`; this.style.color = "red"; } } customElements.define('salutation-element', Salutation);

Այս կոդի մեջ մենք գրանցում ենք նոր salutation-element կոմպոնենտ, որը ներկայացնում է մեր ստեղծած կլասը: Այժմ այս նոր salutation-element կոմպոնենտը կարելի է օգտագործել ճիշտ այնպես, ինչպես ցանկացած այլ HTML թեգ:

Անհատական salutation-element էլեմենտի կիրառումը

Վերոնշյալ կոդում մենք գրանցում ենք salutation-element էլեմենտը: Այս էլեմենտը ներկայացված է Salutation նոր կլասով, որը մենք արդեն իսկ սահմանել ենք: Երբ էլեմենտը գրանցված է, այն կարող է օգտագործվել HTML-էջի ներսում.


‹!DOCTYPE html›
  ‹head›
        ‹title›Creating Custom Elements›‹/title›
        ‹script src="./indexOne.js"›‹/script›
    ‹/head›
    ‹body›
        ‹salutation-element›‹/salutation-element›
    ‹/body›
‹/html›

Այս HTML ֆայլում մենք օգտագործում ենք անհատական սահմանված էլեմենտը: Եվ այժմ այս կոմպոնենտը կարող է բազմիցս օգտագործվել HTML էջի ներսում:

Այստեղ կարելի է փոփոխություններ կատարել ֆունկցիոնալության մեջ եւ թարմացնել անհատական էլեմենտը ըստ այս կամ այն պահանջների: Փորձեք!

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

Սկզբնաղբյուր՝ Create Custom HTML Element without any Frontend Framework

Թարգմանությունը՝ Mariam Abrahamyan