HTML DOM metodes

querySelector ()

Metode Dokuments querySelector()atgriež dokumentā esošo firstelementu, kas atbilst norādītajam atlasītājam vai atlasītāju grupai. Ja atbilstības netiek atrastas, tiek atgriezta vērtība null

HTML saturs:

 element-example 

JavaScript saturs:

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 

Piezīme querySelector()atgriež pirmo atbilstošo elementu. Lai atgrieztu visas atbilstības, tā vietā izmantojiet metodi querySelectorAll ().

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

iekšējaisHTML

Piedāvājums innerHTMLatgriež HTML saturu atlasītajā elementā un ļauj arī definēt jaunu HTML saturu.

Iegūt elementa saturu

Demo

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

Demo

Iestatīt elementa saturu

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

HTML tagad būs līdzīgs

 Demo 

Drošības apsvērumi

Vērtībai, kurai ir iestatīta vērtība, innerHTMLjābūt no uzticamiem avotiem, jo ​​Javascript šajā elementā ievietos jebko un tas darbosies kā vienkāršs HTML.

Piemērs:

Iestatot alert();vērtību “”, tiks aktivizēta Javascript funkcija “alert ()”:

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

Šāda veida uzbrukumus sauc par Cross Site Scripting jeb saīsināti par XSS.

Šis ir viens no visbiežāk sastopamajiem XSS uzbrukuma veidiem. Ja vēlaties uzzināt mazliet vairāk un iemācīties no tā aizstāvēties, pārbaudiet šo resursu.

getElementById ()

getElementById()Metode atgriež elementu, kas ir id atribūts ar norādīto vērtību. Tas prasa vienu argumentu, kas ir vajadzīgā elementa id virkne ar lielo un mazo burtu.

Šī metode ir viena no visizplatītākajām metodēm HTML DOM, un to izmanto gandrīz katru reizi, kad vēlaties manipulēt vai iegūt informāciju no dokumenta elementa. Šeit ir vienkāršs sintakses piemērs:

HTML saturs:

JavaScript saturs:

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

Ja jums ir vairāk nekā viens elements ar tādu pašu vērtību id(slikta prakse!), getElementByIdTiks parādīts pirmais atrastais elements:

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

Vairāk informācijas:

document.getElementById ()

Alternatīvi risinājumi:

Parasti izmantotā alternatīva document.getElementByIdir izmantot jQuery selektoru, par kuru šeit lasāt vairāk.

Plašāka informācija par HTML DOM

Izmantojot HTML DOM, JavaScript var piekļūt visiem HTML dokumenta elementiem un tos mainīt.

Ja tīmekļa lapa ir ielādēta, pārlūks rada D ocument O bject M odel lapas.

HTML DOM modelis tiek veidots kā objektu koks:

Katru DOM elementu sauc arī par mezglu.

   My title    My Link 

My header

Iepriekš minētā HTML DOM ir šāds:

DOM koks

Izmantojot objekta modeli, JavaScript iegūst visu nepieciešamo enerģiju, lai izveidotu dinamisku HTML:

  • JavaScript var mainīt visus lapas HTML elementus
  • JavaScript var mainīt visus HTML atribūtus lapā
  • JavaScript var mainīt visus CSS stilus lapā
  • JavaScript var noņemt esošos HTML elementus un atribūtus
  • JavaScript var pievienot jaunus HTML elementus un atribūtus
  • JavaScript var reaģēt uz visiem esošajiem HTML notikumiem lapā
  • JavaScript lapā var izveidot jaunus HTML notikumus