JavaScript DOM-zelfstudie met voorbeeld

Waar zit DOM in JavaScript?

JavaScript kan alle elementen in een webpagina benaderen door gebruik te maken van Document Object Model (DOM). De webbrowser maakt in feite een DOM van de webpagina wanneer de pagina wordt geladen. Het DOM-model wordt gemaakt als een boom van objecten, zoals deze:

DOM en evenementen gebruiken

DOM gebruiken, JavaScript kan meerdere taken uitvoeren. Het kan nieuwe elementen en attributen maken, bestaande elementen en attributen wijzigen en zelfs bestaande elementen en attributen verwijderen. JavaScript kan ook reageren op bestaande evenementen en nieuwe evenementen op de pagina aanmaken.

getElementById, innerHTML-voorbeeld

getElementById: Om toegang te krijgen tot elementen en attributen waarvan de id is ingesteld.
innerHTML: Om toegang te krijgen tot de inhoud van een element.

Probeer dit voorbeeld zelf:

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

getElementsByTagName: Voor toegang tot elementen en attributen met behulp van de tagnaam. Deze methode retourneert een reeks van alle items met dezelfde tagnaam.

Probeer dit voorbeeld zelf:

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

Gebeurtenishandler Voorbeeld

createElement: Om een nieuw element te maken
removeChild: verwijder een element
U kunt een gebeurtenis handler naar een bepaald element zoals dit:

document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

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

Probeer dit voorbeeld zelf:

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

Je houdt misschien van: