JavaΕκμάθηση σεναρίου DOM με Παράδειγμα

Σε τι είναι το DOM JavaΓραφή;

JavaΤο σενάριο μπορεί να έχει πρόσβαση σε όλα τα στοιχεία μιας ιστοσελίδας χρησιμοποιώντας το μοντέλο αντικειμένου εγγράφου (DOM). Στην πραγματικότητα, το πρόγραμμα περιήγησης ιστού δημιουργεί ένα DOM της ιστοσελίδας όταν φορτώνεται η σελίδα. Το μοντέλο DOM δημιουργείται ως δέντρο αντικειμένων όπως αυτό:

Πώς να χρησιμοποιήσετε το DOM και τα συμβάντα

Χρησιμοποιώντας το DOM, JavaΤο σενάριο μπορεί να εκτελέσει πολλές εργασίες. Μπορεί να δημιουργήσει νέα στοιχεία και χαρακτηριστικά, να αλλάξει τα υπάρχοντα στοιχεία και χαρακτηριστικά και ακόμη και να αφαιρέσει υπάρχοντα στοιχεία και χαρακτηριστικά. JavaΓραφή μπορεί επίσης να αντιδρά σε υπάρχοντα συμβάντα και να δημιουργεί νέα συμβάντα στη σελίδα.

getElementById, Παράδειγμα innerHTML

getElementById: Για πρόσβαση σε στοιχεία και χαρακτηριστικά των οποίων το αναγνωριστικό έχει οριστεί.
innerHTML: Για πρόσβαση στο περιεχόμενο ενός στοιχείου.

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

<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

getElementsByTagName: Για πρόσβαση σε στοιχεία και χαρακτηριστικά χρησιμοποιώντας όνομα ετικέτας. Αυτή η μέθοδος θα επιστρέψει ένα παράταξη όλων των στοιχείων με το ίδιο όνομα ετικέτας.

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

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

Παράδειγμα χειριστή συμβάντων

createElement: Για τη δημιουργία νέου στοιχείου
removeChild: Αφαιρέστε ένα στοιχείο
Μπορείτε να προσθέσετε ένα χειριστής συμβάντων σε ένα συγκεκριμένο στοιχείο όπως αυτό:

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

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

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

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

Μπορεί να σας αρέσει: