JavaScript DOM Tutorial med eksempel

Af: James Hartman James Hartman
Hours Opdateret

Hvad er DOM i JavaManuskript?

JavaScript kan få adgang til alle elementerne på en webside ved at bruge Document Object Model (DOM). Faktisk opretter webbrowseren en DOM for websiden, når siden indlæses. DOM-modellen er oprettet som et træ af objekter som dette:

DOM ind JavaScript

Sådan bruger du DOM og begivenheder

Ved hjælp af DOM, JavaScript kan udføre flere opgaver. Det kan oprette nye elementer og attributter, ændre de eksisterende elementer og attributter og endda fjerne eksisterende elementer og attributter. JavaScript kan også reagere på eksisterende begivenheder og oprette nye begivenheder på siden.

getElementById, innerHTML Eksempel

  1. getElementById: For at få adgang til elementer og attributter, hvis id er indstillet.
  2. innerHTML: For at få adgang til indholdet af et element.

Prøv selv dette eksempel:

<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 Eksempel

getElementsByTagName: For at få adgang til elementer og attributter ved hjælp af tagnavn. Denne metode vil returnere en matrix af alle varer med samme tagnavn.

Prøv selv dette eksempel:

<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>

Eksempel på hændelseshåndtering

  1. createElement: For at oprette nyt element
  2. removeChild: Fjern et element
  3. Du kan tilføje en hændelseshandler til et bestemt element som dette:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

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

Prøv selv dette eksempel:

<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>