Све што требате знати о ДОМ-у у ЈаваСцрипт-у



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

Да ли сте знали да можемо да користимо ЈаваСцрипт за манипулацију садржајем на веб страници? Изгледа занимљиво зар не? Хајде да разумемо шта је Доцумент Објецт Модел тј. ДОМ у ЈаваСцрипт-у на следећи начин:

Шта је ДОМ у ЈаваСцрипт-у?

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





Сав ДОМ наше веб странице налази се унутар објекта документа. Програмски, овај модел нам омогућава да читамо или чак мењамо садржај наше странице путем . Зар није у реду?

Акције ДОМ-а у ЈаваСцрипт-у

Неке од радњи које можемо извршити са овим моделом су:



  • Промените / уклоните ХТМЛ елементе у ДОМ-у / на страници.

  • Промените и додајте ЦСС стилове елементима

    претворити објекат у низ пхп
  • Читајте и мењајте атрибуте (хреф, срц, алт) итд.



    како направити упозорење у хтмл-у
  • Креирајте нове елементе и убаците их у ДОМ / страницу.

  • Прикачите слушаоце догађаја елементима (кликните, притисните тастер, пошаљите)

Испитивање ДОМ-а у ЈаваСцрипт-у

Хватање ХТМЛ елемента или његово држање за додавање / промену или садржај назива се упитом.

ХТМЛ код:

Јавасцрипт и ДОМ х1 {фонт-сизе: 60пк}

ЈаваСцрипт код:

вар титле = доцумент.гетЕлементБиИд ('титле') // цгангин цолор то ред титле.стиле.цолор = 'ред' вар боди = доцумент.гетЕлементБиИд ('боди') // промена боје позадине у светло плаву боди.стиле. бацкгроундЦолор = 'светлоплава'

Помоћу ЈаваСцрипт-а променили смо боју текста из црне у црвену. То смо постигли користећи .стиле својство је тада променило вредност боја да се изједначи са нето .

Сада променимо боју позадине елемента тела у светло плава .

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

Сада када знате за ДОМ у ЈаваСцрипт-у, погледајте од Едуреке. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).

јава аддацтионлистенер (ово)

Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре „ДОМ у ЈаваСцрипт-у“ и јавићемо вам се.