JavaScript HTML DOM elementer

Dette kapitel forklarer, hvordan du kan finde og tilgå HTML-elementer på en HTML-side.

Find HTML-elementer

Normalt skal du bruge JavaScript til at manipulere HTML-elementer.

For at opnå dette skal du først finde disse elementer. Der er flere måder at gøre dette på:

  • Find HTML-elementer gennem id
  • Find HTML-elementer gennem tagnavn
  • Find elementer gennem klasse
  • Find HTML-elementer gennem CSS-vælger
  • Find HTML-elementer gennem HTML-objektssæt

Find HTML-elementer gennem id

Den enkleste måde at finde HTML-elementer i DOM er ved at bruge elementets id.

Dette eksempel søger efter elementet med id="intro":

Eksempel

var myElement = document.getElementById("intro");

Prøv det selv

Hvis elementet findes, returnerer denne metode elementet som et objekt (i myElement).

Hvis elementet ikke findes, indeholder myElement null.

Find HTML-elementer gennem tagnavn

Dette eksempel søger efter alle <p> Element:

Eksempel

var x = document.getElementsByTagName("p");

Prøv det selv

Dette eksempel søger efter elementet med id="main" og derefter søger efter alle <p> Element:

Eksempel

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Prøv det selv

Find elementer gennem klasse

Hvis du skal finde alle HTML-elementer med samme klasse, brug getElementsByClassName().

Dette eksempel returnerer listen over alle elementer, der indeholder class="intro":

Eksempel

var x = document.getElementsByClassName("intro");

Prøv det selv

Find elementer gennem klasse er ikke kompatibelt med Internet Explorer 8 og tidligere versioner.

Find HTML-elementer gennem CSS-vælger

Hvis du skal finde alle HTML-elementer, der matcher en specificeret CSS-vælger (id, klasse, type, egenskab, egenskabsværdi osv.), brug querySelectorAll() metoder.

Dette eksempel returnerer alle elementer med class="intro" <p> Elementliste:

Eksempel

var x = document.querySelectorAll("p.intro");

Prøv det selv

querySelectorAll() Ikke kompatibelt med Internet Explorer 8 og tidligere versioner.

Find HTML objekter ved hjælp af HTML object selector

Dette eksempel søger efter form element med id="frm1" i forms samlingen og viser alle elementværdierne:

Eksempel

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Prøv det selv

Følgende HTML objekter (og objektkollektioner) er også tilgængelige: