ХТМЛ ДОМ методе

куериСелецтор ()

Метода документа querySelector()враћа firstелемент у документу који се подудара са наведеним селектором или групом селектора. Ако није пронађено ниједно подударање, враћа се нулл.

ХТМЛ садржај:

 element-example 

ЈаваСцрипт садржај:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element 

Напомена querySelector()враћа први подударајући елемент, да бисте вратили сва подударања, користите методу куериСелецторАлл ().

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

иннерХТМЛ

innerHTMLПроп врати ХТМЛ садржаја унутар изабраног елемента, као и пустити да дефинишете нову ХТМЛ садржај.

Набавите садржај елемента

Demo

var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 

Demo

Поставите садржај елемента

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

ХТМЛ ће сада бити као

 Demo 

Сигурносна разматрања

Вредност која је подешена треба innerHTMLда потиче из поузданих извора, јер ће Јавасцрипт ставити било шта унутар тог елемента и биће покренут као обичан ХТМЛ.

Пример:

Постављањем alert();вредности ”” активираће се функција Јавасцрипт “алерт ()”:

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Ова врста напада назива се Цросс Сите Сцриптинг или скраћено КССС.

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

гетЕлементБиИд ()

getElementById()Метод враћа елемент који има ид атрибут са наведеним вредности. Потребан је један аргумент, а то је низ ид-а за елемент који желите осетљив на мала и велика слова.

Ова метода је једна од најчешћих метода у ХТМЛ ДОМ-у и користи се готово сваки пут када желите да манипулишете елементом документа или добијете информације од њега. Ево једноставног примера синтаксе:

ХТМЛ садржај:

ЈаваСцрипт садржај:

document.getElementById("demo"); // Returns the element with id "demo"

Ако имате више елемената са истом вредношћу id(лоша пракса!), getElementByIdВратиће први пронађени елемент:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Више информација:

доцумент.гетЕлементБиИд ()

Алтернативна решења:

Често коришћена алтернатива document.getElementByIdје коришћење јКуери селектора о коме сте прочитали више овде.

Више информација о ХТМЛ ДОМ-у

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

Када се учита веб страница, бровсер ствара Год окументи о бјецт П Одел странице.

ХТМЛ ДОМ модел је направљен као стабло објеката:

Сваки елемент у ДОМ-у назива се и чвор.

   My title    My Link 

My header

ДОМ за горњи ХТМЛ је следећи:

ДОМ стабло

Са објектним моделом, ЈаваСцрипт добија сву снагу која му је потребна за стварање динамичког ХТМЛ-а:

  • ЈаваСцрипт може променити све ХТМЛ елементе на страници
  • ЈаваСцрипт може променити све ХТМЛ атрибуте на страници
  • ЈаваСцрипт може променити све ЦСС стилове на страници
  • ЈаваСцрипт може уклонити постојеће ХТМЛ елементе и атрибуте
  • ЈаваСцрипт може додати нове ХТМЛ елементе и атрибуте
  • ЈаваСцрипт може реаговати на све постојеће ХТМЛ догађаје на страници
  • ЈаваСцрипт може да креира нове ХТМЛ догађаје на страници