HTML DOM metode

Programiranje

querySelector ()

Metoda dokumenta querySelector()vraća firstelement unutar dokumenta koji se podudara s navedenim selektorom ili grupom selektora. Ako nije pronađeno nijedno podudaranje, vraća se null.

HTML sadržaj:

 element-example

JavaScript sadržaj:

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

Napomena querySelector()vraća prvi podudarajući element, da biste vratili sva podudaranja, umjesto toga koristite metodu querySelectorAll ().

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

unutarnjiHTML

innerHTMLRekvizit vratiti HTML sadržaja unutar odabranog elementa, a također omogućuju definiranje novog HTML sadržaja.

Dohvatite sadržaj elementa

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

Postavite sadržaj elementa

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

HTML će sada biti poput

 Demo

Sigurnosna razmatranja

Vrijednost koja je postavljena innerHTMLtrebala bi potjecati iz pouzdanih izvora, jer će Javascript staviti sve unutar tog elementa i on će se izvoditi kao običan HTML.

Primjer:

Postavljanjem alert();vrijednosti ” ” aktivirat će se funkcija Javascript “alert ()”:

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

Ova vrsta napada naziva se Cross Site Scripting ili skraćeno XSS.

Ovo je jedan od najčešćih načina izvršavanja XSS napada. Ako želite naučiti malo više i naučiti se braniti od toga, pogledajte ovaj resurs.

getElementById ()

getElementById()Metoda vraća element koji ima atribut ID s navedene vrijednosti. Potreban je jedan argument, a to je niz ID-a osjetljiv na velika i mala slova za element koji želite.

Ova je metoda jedna od najčešćih metoda u HTML DOM-u i koristi se gotovo svaki put kada želite manipulirati elementom dokumenta ili dobiti informacije od njega. Evo jednostavnog primjera sintakse:

HTML sadržaj:

JavaScript sadržaj:

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

Ako imate više od jednog elementa s istom vrijednošću id(loša praksa!), getElementByIdVratit će prvi pronađeni element:

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

Više informacija:

document.getElementById ()

Alternativna rješenja:

Često korištena alternativa document.getElementByIdje uporaba jQuery selektora o kojem ste ovdje pročitali više.

Više informacija o HTML DOM-u

Pomoću HTML DOM-a JavaScript može pristupiti i promijeniti sve elemente HTML dokumenta.

Kada se web stranica učita, preglednik stvara D ocument O bject M odel stranice.

HTML DOM model konstruiran je kao stablo objekata:

Svaki se element u DOM-u naziva i čvorom.

   My title    My Link 
 My header

DOM za gornji HTML je sljedeći:

DOM tree

S objektnim modelom JavaScript dobiva svu snagu koja mu je potrebna za stvaranje dinamičnog HTML-a:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page