05. DOM HTML

JavaScript HTML DOM – Αλλάζοντας την HTML


Το HTML DOM επιτρέπει στη JavaScript να αλλάξει το περιεχόμενο των στοιχείων HTML.


Αλλαγή της ροής εξόδου HTML

Το JavaScript μπορεί να δημιουργήσει δυναμικό περιεχόμενο HTML:

Στο JavaScript, document.write()μπορεί να χρησιμοποιηθεί για να γράψει απευθείας στη ροή εξόδου HTML:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Δοκιμάστε το »

Ποτέ μην χρησιμοποιείτε document.write()μετά τη φόρτωση του εγγράφου. Θα αντικαταστήσει το έγγραφο.


Αλλαγή περιεχομένου HTML

Ο ευκολότερος τρόπος τροποποίησης του περιεχομένου ενός στοιχείου HTML είναι η χρήση της innerHTMLιδιότητας.

Για να αλλάξετε το περιεχόμενο ενός στοιχείου HTML, χρησιμοποιήστε αυτήν τη σύνταξη:

1
document.getElementById(id).innerHTML = new HTML

Αυτό το παράδειγμα αλλάζει το περιεχόμενο ενός <p>στοιχείου:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Δοκιμάστε το »

Εξήγηση παραδείγματος:

  • Το παραπάνω έγγραφο HTML περιέχει ένα <p>στοιχείο μεid="p1"
  • Χρησιμοποιούμε το HTML DOM για να πάρουμε το στοιχείο με id="p1"
  • Η JavaScript αλλάζει το περιεχόμενο ( innerHTML) αυτού του στοιχείου στο “New text!”

Αυτό το παράδειγμα αλλάζει το περιεχόμενο ενός <h1>στοιχείου:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

Δοκιμάστε το »

Εξήγηση παραδείγματος:

  • Το παραπάνω έγγραφο HTML περιέχει ένα <h1>στοιχείο με id="id01"
  • Χρησιμοποιούμε το HTML DOM για να πάρουμε το στοιχείο με id="id01"
  • Η JavaScript αλλάζει το περιεχόμενο ( innerHTML) αυτού του στοιχείου σε “New Heading”

Αλλαγή της τιμής ενός χαρακτηριστικού

Για να αλλάξετε την τιμή ενός χαρακτηριστικού HTML, χρησιμοποιήστε αυτήν τη σύνταξη:

1
document.getElementById(id).attribute = new value

Αυτό το παράδειγμα αλλάζει την τιμή του χαρακτηριστικού src ενός <img>στοιχείου:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

Δοκιμάστε το »

Εξήγηση παραδείγματος:

  • Το παραπάνω έγγραφο HTML περιέχει ένα <img>στοιχείο μεid="myImage"
  • Χρησιμοποιούμε το HTML DOM για να πάρουμε το στοιχείο με id="myImage"
  • Η JavaScript αλλάζει το srcχαρακτηριστικό αυτού του στοιχείου από το “smiley.gif” στο “landscape.jpg”

Δοκιμάστε τον εαυτό σας με τις ασκήσεις

Ασκηση:

Χρησιμοποιήστε το HTML DOM για να αλλάξετε την τιμή του χαρακτηριστικού src της εικόνας.

<img id="image" src="smiley.gif">

<script>
document.getElementById("image") = "pic_mountain.jpg";
</script>

Υποβολή απάντησης

Ξεκινήστε την Άσκηση

Days
Hours
Minutes

05. DOM HTML

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: