Модел објекта документа (ДОМ) је структурни приказ ХТМЛ документа. ДОМ је стабло чворова које претраживач креира за сваку веб страницу на интернету.

ДОМ је објектно оријентисан. Сваки елемент у ДОМ-у има свој скуп атрибута и метода којима можете приступити помоћу ЈаваСцрипт-а.

У овом чланку са водичем ћете научити како да користите функције ДОМ селектора за приступ елементима веб странице.

Како приступити ДОМ елементима

Можете приступити ДОМ елементу највишег нивоа веб странице преко глобалног објекта документа. На пример, ако имате веб страницу као што је следећа:

Добродошли


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.




О томе


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.




Чланци



Наслов првог чланка

instagram viewer



 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.


 Опширније 





Наслов два


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.


 Опширније 





Наслов трећег чланка


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.


 Опширније 





Наслов четири


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Тенетур аспериорес волуптатум ет репеллат?
 Куае иусто нон елигенди хицццамус итакуе ут ин делецтус синт перспициатис куос рем а, аткуе вениам.


 Опширније 

куцање документ у конзоли вашег претраживача и притиском на ентер ће произвести следећи излаз:

Излаз у вашој конзоли је интерактиван. Можете кликнути на глава и тело елементе за њихово проширење. То ће произвести следећи излаз:

Сваки елемент секције у ознака је такође проширива. У зависности од структуре веб странице, елементи ће наставити да се шире како би открили више елемената. Ово би требало да вам пружи јасније разумевање структуре ДОМ-а.

Повезан: Скривени херој веб локација: разумевање ДОМ-а

Објекат документа има посебну особину, тело, који представља елемент тела. Дакле, да бисте приступили елементу тела, можете да унесете следеће у конзолу:

документ.тело

Ово ће произвести следећи излаз:

Али ово је најдаље што можете ићи користећи својства објекта. Свака страница има главу и тело, али је иначе јединствена. Па куцам документ.тело.секција или било шта слично једноставно неће радити онако како бисте могли. Уместо тога, постоје методе које можете позвати на објекту документа да бисте приступили одређеним елементима.

Шта су селектори ДОМ елемената?

Селектори ДОМ елемената су група ЈаваСцрипт метода које можете користити на објекту документа за приступ елементима на веб страници. Селектори ДОМ елемената имају две категорије — један и вишеструки селектор.

Ове функције делују на сличан начин као ЦСС селектори. Они вам омогућавају да преузмете елементе на основу имена њихове ознаке или њиховог ИД-а и атрибута класе. Можете чак и преузети елементе користећи било који ЦСС селектор.

Повезан: Како циљати део веб странице помоћу ЦСС селектора

Селектори једног елемента су:

• гетЕлементБиИд()
• куериСелецтор()

Селектори више елемената су:

• гетЕлементсБиТагНаме()
• гетЕлементсБиЦлассНаме()
• куериСелецторАлл()

Бирач ДОМ елемента који користите зависиће од елемента (елемената) којима покушавате да приступите.

Коришћење селектора појединачних ДОМ елемената

Углавном ћете видети селекторе у ЈаваСцрипт апликацијама. Дакле, хајде да се удаљимо од конзоле. Направите ЈаваСцрипт датотеку и повежите је са својом ХТМЛ датотеком помоћу следеће ознаке скрипте:

Где је вредност срц назив ваше ЈаваСцрипт датотеке. Поставите ову ознаку скрипте непосредно испред завршне ознаке тела, .

Тхе гетЕлементБиИд() метода омогућава приступ једном елементу на веб страници користећи вредност њеног ИД-а. У ХТМЛ документу изнад постоји неколико елемената са ИД-овима. Да циљате див елемент са ИД-ом „артицле-3” можете додати следећи код у своју ЈаваСцрипт датотеку:

валуе = доцумент.гетЕлементБиИд('артицле-3')

Сада елемент див са члан-3 ИД и сва његова одговарајућа својства су доступна из вредност променљива. Можете одштампати вредност променљиву у конзолу користећи следећи ред кода:

цонсоле.лог (вредност)

Видећете име класе које је додељено елементу див, као и друге важне атрибуте, као што је унутрашњи ХТМЛ.

Други селектор појединачног елемента је куериСелецтор(). Ова функција је разноврснија, јер јој можете проследити било који низ ЦСС селектора. Међутим, и даље га можете користити само за одабир једног по једног елемента.

На пример, постоји једна класа у ХТМЛ изгледу изнад — чланци. Четири елемента див користе ову класу, али куериСелецтор() функција ће вратити само први елемент који има класу "артицлес".

Коришћење куериСелецтор() са класом

Додајте следећи код на крај ваше скрипте:

вредност = доцумент.куериСелецтор('.артицлес')
цонсоле.лог (вредност)

Ово ће вратити само прву див елемент са класом „чланци“. Приметите да селектор наводите у истом формату као и ЦСС селектор. У ЦСС-у, почетна тачка специфицира име класе.

Коришћење куериСелецтор() са ИД-ом

валуе = доцумент.куериСелецтор('#артицле-3')
цонсоле.лог (вредност)

Овај код ће вратити једини елемент са ИД-ом „чланак-3“, трећи див елемент са класом „чланци“. Опет, низ селектора користи стандардну ЦСС синтаксу, са а # симбол који специфицира ИД.

Коришћење вишеструких селектора ДОМ елемената

Преостале функције селектора преузимају групе елемената. Су гетЕлементсБиТагНаме(), гетЕлементсБиЦлассНаме(), и куериСелецторАлл().

Коришћење гетЕлементсБиТагНаме()

Тхе гетЕлементсБиТагНаме() селектор преузима групу елемената са истим именом ознаке. На пример, ако желите да изаберете све х2 елемената на веб страници, можете користити следећи код:

вредност = доцумент.гетЕлементсБиТагНаме('х2')
цонсоле.лог (вредност)

Ово чува све х2 елементе у ХТМЛ колекцији која се зове вредност.

Коришћење гетЕлементсБиЦлассНаме()

Тхе гетЕлементсБиЦлассНаме() селектор враћа колекцију елемената са истим именом класе.

валуе = доцумент.гетЕлементсБиЦлассНаме('артицлес')
цонсоле.лог (вредност)

Уметање кода изнад у вашу ЈаваСцрипт датотеку вратиће четири елемента див са именом класе „чланак“ у конзоли претраживача.

Коришћење куериСелецторАлл()

Тхе куериСелецторАлл() метода враћа листу чворова свих елемената који одговарају датом селектору. Да бисте приступили свим елементима пасуса у одељку блога, можете користити следећи код:

валуе = доцумент.куериСелецторАлл('#блог п')
цонсоле.лог (вредност)

Можете чак укључити неколико селектора у низ, одвајајући сваки зарезом, баш као у ЦСС-у:

вредност = доцумент.куериСелецторАлл('х2, .артицлес')
цонсоле.лог (вредност)

Користите ДОМ селекторе да направите динамичке веб странице

У овом тренутку, требало би да имате јасно разумевање ДОМ-а и како он функционише. Такође би требало да знате различите појединачне и вишеструке селекторе, као и како да их користите.

Ипак, добијање приступа ХТМЛ елементима је само први корак у ономе што можете да урадите са ДОМ селекторима. ДОМ селектори ће вам помоћи да развијете функционалне аспекте ваше веб странице, као што је руковање догађајима онцлицк и онсцролл.

Како да своју веб локацију учините прилагодљивом и интерактивном помоћу ЦСС-а и ЈаваСцрипт-а

Поставили сте своју веб локацију са ХТМЛ-ом и ЦСС-ом, али сада морате да додате логику. Ево шта треба да урадите.

Реад Нект

О аутору