Ιδιότητες Ετικετών ως Ιδιότητες σε JavaScript

Ας μάθουμε τώρα πώς να παίρνουμε τα χαρακτηριστικά των ετικετών. Ισχύει ο ακόλουθος κανόνας: κάθε χαρακτηριστικό ετικέτας αντιστοιχεί σε μια ομώνυμη ιδιότητα του DOM στοιχείου.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια τέτοια ετικέτα:

<input id="elem" type="text">

Ας πάρουμε έναν σύνδεσμο προς το στοιχείο μας σε μια μεταβλητή:

let elem = document.querySelector('#elem');

Ας εμφανίσουμε τις τιμές των χαρακτηριστικών που χρειαζόμαστε:

console.log(elem.id);   // θα εμφανίσει 'elem'
console.log(elem.type); // θα εμφανίσει 'text'

Και τώρα για παράδειγμα ας αλλάξουμε την τιμή του χαρακτηριστικού:

elem.type = 'submit';

Δίνεται το ακόλουθο πεδίο εισόδου:

<input id="elem" type="email">

Δίνεται επίσης ένα κουμπί. Πατώντας το κουμπί εμφανίστε στην οθόνη το περιεχόμενο του χαρακτηριστικού type του παραπάνω πεδίου εισόδου.

Δίνεται το ακόλουθο πεδίο εισόδου:

<input id="elem" type="email">

Δίνεται επίσης ένα κουμπί. Πατώντας το κουμπί γράψτε στο χαρακτηριστικό type την τιμή submit.

Ας υποθέσουμε ότι έχετε έναν σύνδεσμο σε μορφή ετικέτας a, ένα κουμπί και μια παράγραφο. Πατώντας το κουμπί εμφανίστε στην παράγραφο το περιεχόμενο του χαρακτηριστικού href του συνδέσμου.

Ας υποθέσουμε ότι έχετε έναν σύνδεσμο και ένα κουμπί. Πατώντας το κουμπί προσθέστε στο τέλος του κειμένου του συνδέσμου το περιεχόμενο του χαρακτηριστικού του href σε παρενθέσεις.

Ας υποθέσουμε ότι έχετε μια εικόνα. Τοποθετήστε την στη σελίδα χρησιμοποιώντας την ετικέτα img. Ας υποθέσουμε ότι δίνονται επίσης ένα κουμπί και μια παράγραφο. Κάντε έτσι ώστε με κλικ στο κουμπί στην παράγραφο να γραφτεί η διαδρομή προς την εικόνα από το χαρακτηριστικό της src.

Δίνεται μια εικόνα στην ετικέτα img και ένα κουμπί. Πατώντας το κουμπί στο χαρακτηριστικό width γράψτε την τιμή 300.

Δίνεται μια εικόνα στην ετικέτα img και ένα κουμπί. Ας υποθέσουμε ότι στο χαρακτηριστικό width έχει οριστεί κάποιο πλάτος. Φτιάξτε ένα κουμπί, πατώντας το οποίο το πλάτος της εικόνας θα αυξάνεται κατά 2 φορές.

Ας υποθέσουμε ότι έχετε δύο εικόνες. Φτιάξτε στη σελίδα μια ετικέτα img και δύο κουμπιά. Πατώντας το πρώτο κουμπί γράψτε στο χαρακτηριστικό src τη διαδρομή προς την πρώτη εικόνα, και πατώντας το δεύτερο - τη διαδρομή προς τη δεύτερη εικόνα.