JavaScript DOM-zelfstudie met voorbeeld

Wat is DOM in JavaScript?

JavaScript heeft toegang tot alle elementen van een webpagina door gebruik te maken van Document Object Model (DOM). In feite maakt de webbrowser een DOM van de webpagina wanneer de pagina wordt geladen. Het DOM-model wordt als volgt gemaakt als een boomstructuur van objecten:

DOM in JavaScript

DOM en evenementen gebruiken

Met behulp van DOM kan JavaScript meerdere taken uitvoeren. Het kan nieuwe elementen en attributen creëren, de 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

  1. getElementById: Om toegang te krijgen tot elementen en attributen waarvan de id is ingesteld.
  2. 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

  1. createElement: Om een ​​nieuw element te maken
  2. removeChild: verwijder een element
  3. U kunt een gebeurtenis handler naar een bepaald element zoals dit:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

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>