HTML DOM-metoder

querySelector ()

Dokumentmetoden querySelector()returnerer firstelementet i dokumentet, der matcher den angivne vælger eller gruppe af vælgere. Hvis der ikke findes nogen matches, returneres null.

HTML-indhold:

 element-example 

JavaScript-indhold:

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()returnerer det første matchende element. For at returnere alle matches skal du bruge metoden querySelectorAll () i stedet.

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

innerHTML

Støtten innerHTMLreturnerer HTML-indholdet i et valgt element og giver dig også mulighed for at definere et nyt HTML-indhold.

Få elementindhold

Demo

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

Demo

Indstil elementindhold

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

HTML nu vil være som

 Demo 

Sikkerhedshensyn

Den værdi, der er indstillet til, innerHTMLskal komme fra pålidelige kilder, da Javascript placerer noget inden i dette element, og det køres som almindelig HTML.

Eksempel:

Indstilling af en ” alert();” -værdi vil medføre, at Javascript “alarm ()” -funktionen udløses:

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

Denne type angreb kaldes Cross Site Scripting eller forkortet XSS.

Dette er en af ​​de mest almindelige måder at begå et XSS-angreb på. Hvis du vil lære lidt mere og lære at forsvare dig imod det, skal du tjekke denne ressource.

getElementById ()

Den getElementById()metode returnerer det element, der har den id-attribut med den angivne værdi. Det tager et argument, som er en sagsfølsom streng for id'et for det element, du ønsker.

Denne metode er en af ​​de mest almindelige metoder i HTML DOM og bruges næsten hver gang du vil manipulere eller få info fra et element i dit dokument. Her er et simpelt eksempel på syntaksen:

HTML-indhold:

JavaScript-indhold:

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

Hvis du har mere end et element med samme værdi som id(dårlig praksis!), getElementByIdReturnerer det første fundne element:

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

Mere information:

document.getElementById ()

Alternative løsninger:

Et almindeligt anvendt alternativ til document.getElementByIder at bruge en jQuery-vælger, som du læser om mere her.

Mere info om HTML DOM

Med HTML DOM kan JavaScript få adgang til og ændre alle elementerne i et HTML-dokument.

Når en webside indlæses, browseren skaber en D OKUMENTETS O bject M odel på siden.

HTML DOM-modellen er konstrueret som et genstandstræ:

Hvert element i DOM kaldes også en node.

   My title    My Link 

My header

DOM for ovenstående HTML er som følger:

DOM-træ

Med objektmodellen får JavaScript al den nødvendige magt til at oprette dynamisk HTML:

  • JavaScript kan ændre alle HTML-elementerne på siden
  • JavaScript kan ændre alle HTML-attributter på siden
  • JavaScript kan ændre alle CSS-stilarter på siden
  • JavaScript kan fjerne eksisterende HTML-elementer og attributter
  • JavaScript kan tilføje nye HTML-elementer og attributter
  • JavaScript kan reagere på alle eksisterende HTML-begivenheder på siden
  • JavaScript kan oprette nye HTML-begivenheder på siden