JavaScript DOM-veiledning med eksempel

by: James Hartman James Hartman
Hours oppdatert

Hva er DOM i JavaManus?

JavaScript kan få tilgang til alle elementene på en nettside ved å bruke Document Object Model (DOM). Faktisk oppretter nettleseren en DOM for nettsiden når siden lastes. DOM-modellen er opprettet som et tre med objekter som dette:

DOM inn JavaScript

Hvordan bruke DOM og hendelser

Ved å bruke DOM, JavaSkriptet kan utføre flere oppgaver. Den kan lage nye elementer og attributter, endre eksisterende elementer og attributter og til og med fjerne eksisterende elementer og attributter. JavaScript kan også reagere på eksisterende hendelser og opprette nye hendelser på siden.

getElementById, innerHTML Eksempel

  1. getElementById: For å få tilgang til elementer og attributter hvis id er satt.
  2. innerHTML: For å få tilgang til innholdet i et element.

Prøv dette eksemplet selv:

<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 å få tilgang til elementer og attributter ved hjelp av kodenavn. Denne metoden vil returnere en matrise av alle elementene med samme merkenavn.

Prøv dette eksemplet selv:

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

  1. createElement: For å lage et nytt element
  2. removeChild: Fjern et element
  3. Du kan legge til en hendelsesbehandler 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 dette eksemplet selv:

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