HTML DOM metodai

querySelector ()

Metodas „Dokumentas“ querySelector()grąžina dokumento firstelementą, kuris atitinka nurodytą selektorių arba parinkėjų grupę. Jei nerandama atitikmenų, grąžinama null.

HTML turinys:

 element-example 

„JavaScript“ turinys:

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()grąžina pirmąjį atitinkantį elementą. Jei norite grąžinti visas atitiktis, naudokite metodą „querySelectorAll ()“.

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

vidinisHTML

Pasiūlymas innerHTMLgrąžina HTML turinį pasirinktame elemente ir leidžia jums apibrėžti naują HTML turinį.

Gaukite elemento turinį

Demo

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

Demo

Nustatyti elemento turinį

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

HTML dabar bus kaip

 Demo 

Saugumo sumetimai

Nustatyta vertė innerHTMLturėtų būti gaunama iš patikimų šaltinių, nes „Javascript“ viską įdės į šį elementą ir jis bus paleistas kaip paprastas HTML.

Pavyzdys:

Nustačius alert();vertę „“, bus suaktyvinta „Javascript“ „alert ()“ funkcija:

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

Šio tipo ataka vadinama „Cross Site Scripting“ arba trumpiau - XSS.

Tai yra vienas iš labiausiai paplitusių XSS atakos būdų. Jei norite sužinoti šiek tiek daugiau ir išmokti nuo to apsiginti, patikrinkite šį šaltinį.

„getElementById“ ()

getElementById()Metodas grąžina elementą, kuriam id "atributo su konkrečia verte. Tam reikia vieno argumento, kuris yra norimo elemento didžiųjų ir mažųjų raidžių eilutė.

Šis metodas yra vienas iš labiausiai paplitusių HTML DOM metodų ir naudojamas beveik kiekvieną kartą, kai norite manipuliuoti dokumento elementu ar gauti iš jo informacijos. Štai paprastas sintaksės pavyzdys:

HTML turinys:

„JavaScript“ turinys:

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

Jei turite daugiau nei vieną elementą su ta pačia verte id(bloga praktika!), getElementByIdGrąžins pirmąjį rastą elementą:

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

Daugiau informacijos:

document.getElementById ()

Alternatyvūs sprendimai:

Dažniausiai naudojama alternatyva document.getElementByIdnaudoti „jQuery“ selektorių, apie kurį daugiau skaitote čia.

Daugiau informacijos apie HTML DOM

Naudodamas HTML DOM, „JavaScript“ gali pasiekti ir pakeisti visus HTML dokumento elementus.

Kai interneto puslapis yra įkeliamas, naršyklė sukuria D ocument O bject M odel puslapio.

HTML DOM modelis sukonstruotas kaip objektų medis:

Kiekvienas DOM elementas taip pat vadinamas mazgu.

   My title    My Link 

My header

Minėto HTML DOM yra toks:

DOM medis

Naudodamas objekto modelį, „JavaScript“ gauna visą energiją, kurios reikia norint sukurti dinamišką HTML:

  • „JavaScript“ gali pakeisti visus puslapio HTML elementus
  • „JavaScript“ gali pakeisti visus puslapio HTML atributus
  • „JavaScript“ gali pakeisti visus CSS stilius puslapyje
  • „JavaScript“ gali pašalinti esamus HTML elementus ir atributus
  • „JavaScript“ gali pridėti naujų HTML elementų ir atributų
  • „JavaScript“ gali reaguoti į visus esamus HTML įvykius puslapyje
  • „JavaScript“ gali sukurti naujus HTML įvykius puslapyje