HTML DOM-i meetodid

querySelector ()

Dokumendi meetod querySelector()tagastab firstdokumendis oleva elemendi, mis sobib määratud valija või selektorite rühmaga. Kui vasteid ei leitud, tagastatakse null.

HTML-i sisu:

 element-example 

JavaScripti sisu:

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 

Märkus querySelector()tagastab esimese sobiva elemendi. Kõigi vastete tagastamiseks kasutage selle asemel meetodit querySelectorAll ().

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

sisemineHTML

innerHTMLProp tagasi HTML-sisu valitud element ja ka teile määrata uus HTML-sisu.

Hankige elemendi sisu

Demo

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

Demo

Määra elemendi sisu

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

HTML on nüüd selline

 Demo 

Turvalisuse kaalutlused

Määratud väärtus innerHTMLpeaks tulema usaldusväärsetest allikatest, kuna Javascript paneb selle elemendi sisse kõik ja seda käitatakse lihtsa HTML-na.

Näide:

alert();Väärtuse „ ” määramine käivitab Javascripti funktsiooni „alert ()”:

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

Seda tüüpi rünnakut nimetatakse Cross Site Scriptinguks ehk lühidalt XSS-ks.

See on üks levinumaid viise XSS-rünnaku sooritamiseks. Kui soovite natuke rohkem õppida ja õppida selle vastu kaitsma, vaadake seda ressurssi.

getElementById ()

getElementById()Meetod tagastab element, mis on id atribuut määratud väärtus. Selleks on vaja ühte argumenti, mis on soovitud elemendi id-täht ja algustäht

See meetod on HTML DOM-is üks levinumaid meetodeid ja seda kasutatakse peaaegu iga kord, kui soovite oma dokumendi elemendiga manipuleerida või sellest teavet hankida. Siin on lihtne näide süntaksist:

HTML-i sisu:

JavaScripti sisu:

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

Kui teil on rohkem kui üks sama väärtusega element id(halb tava!), getElementByIdTagastab esimese leitud elemendi:

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

Rohkem informatsiooni:

document.getElementById ()

Alternatiivsed lahendused:

Tavaliselt kasutatav alternatiiv document.getElementByIdjQuery valija kasutamisele, mille kohta saate lugeda siit.

Lisateave HTML DOM-i kohta

HTML DOM-i abil saab JavaScripti juurde pääseda ja muuta kõiki HTML-dokumendi elemente.

Kui veebileht on laaditud, brauseri loob D ocument O bject M odel lehel.

HTML DOM-i mudel on loodud objektide puuna:

Iga elementi DOM-is nimetatakse ka sõlmeks.

   My title    My Link 

My header

Ülaltoodud HTML-i DOM on järgmine:

DOM-puu

Objektimudeliga saab JavaScripti dünaamilise HTML-i loomiseks vajaliku jõu:

  • JavaScripti abil saab muuta kõiki lehe HTML-elemente
  • JavaScript saab muuta kõiki lehe HTML-atribuute
  • JavaScript võib muuta kõiki lehe CSS-stiile
  • JavaScripti abil saab olemasolevad HTML-elemendid ja atribuudid eemaldada
  • JavaScript võib lisada uusi HTML-elemente ja atribuute
  • JavaScript suudab reageerida kõikidele lehe olemasolevatele HTML-i sündmustele
  • JavaScripti abil saab lehel luua uusi HTML-i sündmusi