HTML DOM -menetelmät

querySelector ()

Document-menetelmä querySelector()palauttaa asiakirjassa olevan firstelementin, joka vastaa määritettyä valitsinta tai valitsinryhmää. Jos vastaavuuksia ei löydy, nolla palautetaan.

HTML-sisältö:

 element-example 

JavaScript-sisältö:

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 

Note querySelector()palauttaa ensimmäisen vastaavan elementin. Jos haluat palauttaa kaikki osumat, käytä sen sijaan kyselySelectorAll () -menetelmää.

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

sisäinenHTML

innerHTMLPotkuri palauttaa HTML-sisällön sisällä valittu elementti ja voit myös määrittää uuden HTML-sisältöä.

Hae elementtien sisältöä

Demo

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

Demo

Aseta elementin sisältö

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

HTML on nyt kuin

 Demo 

Turvallisuusnäkökohdat

Asetetun arvon innerHTMLtulisi tulla luotettavista lähteistä, koska Javascript laittaa kaikki elementin sisälle ja se suoritetaan tavallisena HTML-muodossa.

Esimerkki:

alert();Arvon asettaminen aiheuttaa Javascriptin hälytys () -toiminnon käynnistymisen:

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

Tämän tyyppistä hyökkäystä kutsutaan nimellä Cross Site Scripting tai XSS.

Tämä on yksi yleisimmistä tavoista tehdä XSS-hyökkäys. Jos haluat oppia hieman enemmän ja oppia puolustamaan sitä, tutustu tähän resurssiin.

getElementById ()

getElementById()Menetelmä palauttaa elementti, joka on tunnusattribuutin kanssa määritetyn arvon. Se vie yhden argumentin, joka on haluamasi elementin id-kirjainkoko merkkijono.

Tämä menetelmä on yksi yleisimmistä menetelmistä HTML DOM: ssa, ja sitä käytetään melkein joka kerta, kun haluat käsitellä tai saada tietoja dokumentin elementistä. Tässä on yksinkertainen esimerkki syntaksista:

HTML-sisältö:

JavaScript-sisältö:

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

Jos sinulla on enemmän kuin yksi elementti, jolla on sama arvo id(huono käytäntö!), getElementByIdPalauttaa ensimmäisen löydetyn elementin:

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

Lisää tietoa:

document.getElementById ()

Vaihtoehtoiset ratkaisut:

Yleisesti käytetty vaihtoehto document.getElementByIdjQuery-valitsimen käyttämiseen, josta lue lisää täältä.

Lisätietoja HTML DOM: sta

HTML DOM: n avulla JavaScript voi käyttää ja muuttaa kaikkia HTML-asiakirjan elementtejä.

Kun web-sivu on ladattu, selain luo D SIAKIRJAN O bject M Odel sivun.

HTML DOM -malli on rakennettu Objektien puuksi:

Kutakin DOM: n elementtiä kutsutaan myös solmuksi.

   My title    My Link 

My header

Yllä olevan HTML: n DOM on seuraava:

DOM-puu

Objektimallin avulla JavaScript saa kaiken tarvittavan voiman dynaamisen HTML: n luomiseen:

  • JavaScript voi muuttaa kaikkia sivun HTML-elementtejä
  • JavaScript voi muuttaa kaikkia sivun HTML-määritteitä
  • JavaScript voi muuttaa kaikkia sivun CSS-tyylejä
  • JavaScript voi poistaa olemassa olevat HTML-elementit ja määritteet
  • JavaScript voi lisätä uusia HTML-elementtejä ja määritteitä
  • JavaScript voi reagoida kaikkiin sivulla oleviin HTML-tapahtumiin
  • JavaScript voi luoda uusia HTML-tapahtumia sivulle