JavaScript DOM Tutorial med exempel

By: James Hartman James Hartman
Hours Uppdaterad

Vad är DOM i JavaManus?

JavaScript kan komma åt alla element på en webbsida med hjälp av Document Object Model (DOM). Faktum är att webbläsaren skapar en DOM för webbsidan när sidan laddas. DOM-modellen skapas som ett träd av objekt så här:

DOM in JavaScript

Hur man använder DOM och Events

Använder DOM, JavaSkriptet kan utföra flera uppgifter. Det kan skapa nya element och attribut, ändra befintliga element och attribut och till och med ta bort befintliga element och attribut. JavaScript kan även reagera på befintliga händelser och skapa nya händelser på sidan.

getElementById, innerHTML Exempel

  1. getElementById: För att komma åt element och attribut vars id är inställt.
  2. innerHTML: För att komma åt innehållet i ett element.

Prova själv detta exempel:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName Exempel

getElementsByTagName: För att komma åt element och attribut med taggnamn. Denna metod kommer att returnera en array av alla föremål med samma taggnamn.

Prova själv detta exempel:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

Händelsehanterare Exempel

  1. createElement: För att skapa ett nytt element
  2. removeChild: Ta bort ett element
  3. Du kan lägga till en händelsehanterare till ett speciellt element som detta:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

Prova själv detta exempel:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>

Du kanske gillar: