JavaScript HTML DOM element

Detta kapitel förklarar hur du söker och åtkommer HTML-element i HTML-sidor.

Sök HTML-element

Vanligtvis behöver du manipulera HTML-element med JavaScript.

För att uppnå detta behöver du först hitta dessa element. Det finns flera sätt att utföra detta uppgift:

  • Sök HTML-element genom id
  • Sök HTML-element genom taggnamn
  • Sök element genom klassnamn
  • Sök HTML-element genom CSS-selector
  • Sök HTML-element genom HTML-objektssamling

Sök HTML-element genom id

Det enklaste sättet att hitta HTML-element i DOM är att använda elementets id.

Detta exempel söker efter element med id="intro":

Exempel

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

Prova själv

Om elementet hittas, returnerar denna metod elementet som ett objekt (i myElement).

Om inget element hittas, kommer myElement att innehålla null.

Sök HTML-element genom taggnamn

Detta exempel söker efter alla <p> Element:

Exempel

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

Prova själv

Detta exempel söker efter element med id="main" och sedan efter alla <p> Element:

Exempel

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

Prova själv

Sök element genom klassnamn

Om du behöver hitta alla HTML-element med samma klassnamn, använd getElementsByClassName().

Detta exempel returnerar en lista över alla element som innehåller class="intro":

Exempel

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

Prova själv

Sök element genom klassnamn inte kompatibelt med Internet Explorer 8 och tidigare versioner.

Sök HTML-element genom CSS-selector

Om du behöver hitta alla HTML-element som matchar en specificerad CSS-selector (id, klassnamn, typ, egenskaper, egenskapsvärden och så vidare), använd querySelectorAll() metoder.

Detta exempel returnerar alla element med class="intro" <p> Elementlista:

Exempel

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

Prova själv

querySelectorAll() Inte kompatibelt med Internet Explorer 8 och tidigare versioner.

Hitta HTML-objekt genom HTML-objektväljare

Detta exempel letar efter form-element med id="frm1" i forms-uppsättningen och visar alla elementvärden:

Exempel

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;

Prova själv

Följande HTML-objekt (och objektuppsättningar) är också åtkomliga: