Водич за ЈаваСцрипт ДОМ са примером

Anonim

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

ЈаваСцрипт може приступити свим елементима на веб страници користећи објектни модел документа (ДОМ). У ствари, веб прегледач ствара ДОМ веб странице када се страница учита. ДОМ модел је креиран као стабло објеката попут овог:

Како се користи ДОМ и догађаји

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

гетЕлементБиИд, иннерХТМЛ Пример

  1. гетЕлементБиИд: За приступ елементима и атрибутима чији је ид постављен.
  2. иннерХТМЛ: За приступ садржају елемента.

Испробајте овај пример сами:

<хтмл><хеад><титле> ДОМ !!! <боди><х1 ид = "оне"> Добродошли <п> Ово је порука добродошлице. <х2> Технологија <п> Ово је одељак о технологији. <сцрипт типе = "тект / јавасцрипт">вар тект = доцумент.гетЕлементБиИд ("један"). иннерХТМЛ;упозорење („Прво заглавље је„ + текст);

гетЕлементсБиТагНаме Пример

гетЕлементсБиТагНаме: За приступ елементима и атрибутима помоћу имена ознаке. Ова метода ће вратити низ свих ставки са истим именом ознаке.

Испробајте овај пример сами:

<хтмл><хеад><титле> ДОМ !!! <боди><х1> Добродошли <п> Ово је порука добродошлице. <х2> Технологија <п ид = "сецонд"> Ово је одељак о технологији. <сцрипт типе = "тект / јавасцрипт">вар параграфи = доцумент.гетЕлементсБиТагНаме ("п");упозорење („Садржај у другом пасусу је“ + пасуси [1] .иннерХТМЛ);доцумент.гетЕлементБиИд ("други"). иннерХТМЛ = "Оригинална порука је промењена.";

Пример руковаоца догађајима

  1. цреатеЕлемент: Да бисте креирали нови елемент
  2. ремовеЦхилд: Уклоните елемент
  3. Обрађивачу догађаја можете додати одређени елемент попут овог:
 document.getElementById(id).onclick=function(){lines of code to be executed}

ИЛИ

document.getElementById(id).addEventListener("click", functionname)

Испробајте овај пример сами:

<хтмл><хеад><титле> ДОМ !!! <боди><инпут типе = "буттон" ид = "бтнЦлицк" валуе = "Цлицк Ме !!" /><сцрипт типе = "тект / јавасцрипт">доцумент.гетЕлементБиИд ("бтнЦлицк"). аддЕвентЛистенер ("клик", кликнуто);кликнута функција (){упозорење („Кликнуо си ме !!!“);}