Իմացեք, թե ինչպես օգտագործել DOM ընտրիչները

Վեբ էջը դինամիկ կերպով ստուգելու կամ թարմացնելու համար դուք պետք է մուտք գործեք դրա տարրերը: Պարզեք, թե ինչպես օգտագործել DOM ընտրիչները ձեր էջի տարբեր մասերը թիրախավորելու համար:

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

DOM-ը օբյեկտի վրա է: DOM-ի յուրաքանչյուր տարր ունի իր ատրիբուտների և մեթոդների հավաքածուն, որոնց կարող եք մուտք գործել JavaScript-ի միջոցով:

Այս ձեռնարկի հոդվածում դուք կսովորեք, թե ինչպես օգտագործել DOM ընտրիչի գործառույթները՝ վեբ էջի տարրեր մուտք գործելու համար:

Ինչպես մուտք գործել DOM տարրեր

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section id="home">
    <h1>Welcome</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
      Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
    </p>
  </section>
  <section id="about">
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
      Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
    </p>
  </section>
  <section id="blog">
    <h2>Articles</h2>
    <div class="articles" id="article-1">
      <h3>Article Title One</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      </p>
      <a href="#"> Read More </a>
    </div>
    <div class="articles" id="article-2">
      <h3>Article Title Two</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      </p>
      <a href="#"> Read More </a>
    </div>
    <div class="articles" id="article-3">
      <h3>Article Title Three</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      </p>
      <a href="#"> Read More </a>
    </div>
    <div class="articles" id="article-4">
      <h3>Article Title Four</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
        Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
      </p>
      <a href="#"> Read More </a>
    </div>
  </section>
</body>
</html>

Ձեր բրաուզերի վահանակում մուտքագրելով փաստաթուղթ և սեղմելով Enter կստացվի հետևյալ արդյունքը.

Ձեր վահանակի ելքը ինտերակտիվ է: Դուք կարող եք սեղմել գլուխը և մարմնի տարրերը՝ դրանք ընդլայնելու համար: Դրանով կստեղծվի հետևյալ արդյունքը.

<body> թեգի յուրաքանչյուր հատվածի տարր նույնպես ընդլայնելի է: Կախված վեբ էջի կառուցվածքից՝ տարրերը կշարունակեն ընդլայնվել՝ ավելի շատ տարրեր բացահայտելու համար: Սա պետք է ձեզ ավելի հստակ պատկերացում տա DOM-ի կառուցվածքի մասին:

Փաստաթղթի օբյեկտն ունի հատուկ հատկություն՝ body, որը ներկայացնում է մարմնի տարրը: Այսպիսով, մարմնի տարր մուտք գործելու համար վահանակում կարող եք մուտքագրել հետևյալը.

document.body

Սա կստեղծի հետևյալ արդյունքը.

Բայց սա այնքան հեռու է, որքան կարող եք գնալ՝ օգտագործելով օբյեկտի հատկությունները: Յուրաքանչյուր էջ ունի գլուխ և մարմին, բայց այլ կերպ եզակի է: Այսպիսով, մուտքագրելով document.body.section կամ նմանատիպ որևէ այլ բան պարզապես չի աշխատի այնպես, ինչպես ցանկանում եք: Փոխարենը, կան մեթոդներ, որոնք կարող եք կանչել փաստաթղթի օբյեկտ՝ կոնկրետ տարրեր մուտք գործելու համար:

Որոնք են DOM տարրերի ընտրիչները:

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

Այս գործառույթները գործում են այնպես, ինչպես CSS ընտրիչները: Նրանք թույլ են տալիս առբերել տարրեր՝ հիմնվելով իրենց պիտակի անվան վրա, կամ դրանց id և դասի ատրիբուտները: Դուք նույնիսկ կարող եք բեռնել տարրեր՝ օգտագործելով ցանկացած CSS ընտրիչ:

Մեկ տարրի ընտրիչներն են.

getElementById()
querySelector()

Բազմաթիվ տարրերի ընտրիչներն են.

getElementsByTagName()
getElementsByClassName()
querySelectorAll()

DOM տարրի ընտրիչը, որը դուք օգտագործում եք, կախված կլինի այն տարրից(ներ)ից, որոնց դուք փորձում եք մուտք գործել:

Օգտագործելով մեկ DOM տարրի ընտրիչներ

Դուք հիմնականում կտեսնեք ընտրիչներ JavaScript հավելվածներում: Այսպիսով, եկեք հեռանանք վահանակից: Ստեղծեք JavaScript ֆայլ և կապեք այն ձեր HTML ֆայլին՝ օգտագործելով հետևյալ script tag-ը.

<script src="main.js"></script>

Որտեղ src արժեքը ձեր JavaScript ֆայլի անունն է: Տեղադրեք այս սկրիպտի պիտակը հենց ձեր փակվող հիմնական թեգից առաջ՝ :

getElementById() մեթոդը ապահովում է մուտք դեպի վեբ էջի մեկ տարր՝ օգտագործելով դրա ID-ի արժեքը: Վերևի HTML փաստաթղթում կան ID-ներով մի քանի տարրեր: div տարրը «հոդված-3» ID-ով թիրախավորելու համար կարող եք ավելացնել հետևյալ կոդը ձեր JavaScript ֆայլում.

value = document.getElementById('article-3')

Այժմ article-3 ID-ով div տարրը և դրա բոլոր համապատասխան հատկությունները հասանելի են value փոփոխականից: Դուք կարող եք տպել արժեք փոփոխականը վահանակում՝ օգտագործելով կոդերի հետևյալ տողը.

console.log(value)

Դուք կտեսնեք դասի անունը, որը նշանակված է div տարրին, ինչպես նաև այլ կարևոր հատկանիշներ, ինչպիսիք են ներքին HTML-ը:

Մեկ տարրի մյուս ընտրիչը querySelector()ն է: Այս ֆունկցիան ավելի բազմակողմանի է, քանի որ այն կարող եք փոխանցել CSS ընտրիչի ցանկացած տող: Այնուամենայնիվ, դուք դեռ կարող եք այն օգտագործել միայն մեկ տարր ընտրելու համար:

Օրինակ, վերը նշված HTML դասավորության մեջ կա մեկ դաս՝ հոդվածներ: Չորս div տարրեր օգտագործում են այս դասը, սակայն querySelector() ֆունկցիան կվերադարձնի միայն առաջին տարրը, որն ունի «հոդվածներ» դասը:

Օգտագործելով querySelector() դասի հետ

Ձեր սցենարի վերջում ավելացրեք հետևյալ կոդը.

value = document.querySelector('.articles')
console.log(value)

Սա կվերադարձնի միայն առաջին div տարրը «հոդվածներ» դասով: Ուշադրություն դարձրեք, որ դուք նշում եք ընտրիչը նույն ձևաչափով, ինչ CSS ընտրիչը: CSS-ում առաջատար ժամանակաշրջանը նշում է դասի անունը:

Օգտագործելով querySelector() ID-ով

value = document.querySelector('#article-3')
console.log(value)

Այս կոդը կվերադարձնի միակ տարրը «հոդված-3» ID-ով, երրորդ div տարրը՝ «հոդվածներ» դասով: Կրկին ընտրողի տողը օգտագործում է ստանդարտ CSS շարահյուսություն՝ # նշանով, որը նշում է ID-ն:

Օգտագործելով բազմաթիվ DOM տարրերի ընտրիչներ

Մնացած ընտրիչ գործառույթները առբերում են տարրերի խմբեր: Դրանք են՝ getElementsByTagName(), getElementsByClassName() և querySelectorAll():

Օգտագործելով getElementsByTagName()

getElementsByTagName() ընտրիչը վերցնում է նույն պիտակի անունով տարրերի խումբ: Օրինակ, եթե ցանկանում եք ընտրել բոլոր h2 տարրերը վեբ էջի վրա, կարող եք օգտագործել հետևյալ կոդը.

value = document.getElementsByTagName('h2')
console.log(value)

Սա պահում է բոլոր h2 տարրերը արժեք կոչվող HTML հավաքածուի մեջ:

Օգտագործելով getElementsByClassName()

getElementsByClassName() ընտրիչը վերադարձնում է նույն դասի անունով տարրերի հավաքածու:

value = document.getElementsByClassName('articles')
console.log(value)

Վերևի կոդը ձեր JavaScript ֆայլում զետեղելը կվերադարձնի չորս div տարրերը «հոդվածներ» դասի անվանումով բրաուզերի վահանակում:

Օգտագործելով querySelectorAll()

querySelectorAll() մեթոդը վերադարձնում է բոլոր տարրերի հանգույցների ցանկը, որոնք համապատասխանում են տվյալ ընտրիչին: Բլոգի բաժնի բոլոր պարբերության տարրերը մուտք գործելու համար կարող եք օգտագործել հետևյալ կոդը.

value = document.querySelectorAll('#blog p')
console.log(value)

Դուք նույնիսկ կարող եք մի քանի ընտրիչ ներառել տողի մեջ՝ յուրաքանչյուրը բաժանելով ստորակետով, ինչպես CSS-ում.

value = document.querySelectorAll('h2, .articles')
console.log(value)

Դինամիկ վեբ էջեր ստեղծելու համար օգտագործեք DOM ընտրիչներ

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

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