Το μάθημα θα καλύψει την αρχή του θέματος: το μοντέλο αντικειμένου εγγράφου (javaScript DOM) είναι η βάση του δυναμικού HTML, θα μελετηθούν μέθοδοι πρόσβασης αντικειμένων και θα εξεταστούν μέθοδοι επεξεργασίας συμβάντων javascript.

• Γενικά, ένα αντικείμενο είναι ένας σύνθετος τύπος δεδομένων που συνδυάζει πολλές τιμές σε μια κοινή μονάδα και επιτρέπει την αποθήκευση και την ανάκτηση τιμών με τα ονόματά τους κατά παραγγελία.

Νωρίτερα αρχίσαμε ήδη να εξοικειωνόμαστε με την έννοια στο javascript.

• Στο javascript υπάρχει κάτι σαν DOM - Μοντέλο αντικειμένου εγγράφου— μοντέλο αντικειμένου μιας ιστοσελίδας (σελίδα html).
• Οι ετικέτες εγγράφων ή, όπως λένε επίσης, οι κόμβοι εγγράφων είναι τα αντικείμενά του.

Ας δούμε το διάγραμμα ιεραρχία αντικειμένων σε JavaScript, και πού στην ιεραρχία βρίσκεται το αντικείμενο εγγράφου που συζητείται σε αυτό το θέμα.

Το στοιχείο σεναρίου έχει τα ακόλουθα χαρακτηριστικά:

αναβολή (αναμονή για πλήρη φόρτωση της σελίδας).

Παράδειγμα:

/* Επιτρέπει την παράλληλη φόρτωση και εκτέλεση των αρχείων js αμέσως μετά τη φόρτωση, χωρίς να περιμένει την επεξεργασία της υπόλοιπης σελίδας */ /* Επιτρέπει στο πρόγραμμα περιήγησης να ξεκινήσει τη φόρτωση αρχείων js παράλληλα χωρίς να σταματήσει την περαιτέρω επεξεργασία της σελίδας. Η εκτέλεσή τους πραγματοποιείται μετά την πλήρη ανάλυση του μοντέλου αντικειμένου εγγράφου */

Ιδιότητες και χαρακτηριστικά του αντικειμένου εγγράφου σε JavaScript

Το αντικείμενο εγγράφου αντιπροσωπεύει μια ιστοσελίδα.

Σημαντικό: Για πρόσβαση στις ιδιότητες και τις μεθόδους ενός αντικειμένου στο javaScript, όπως όταν εργάζεστε με άλλα αντικείμενα, χρησιμοποιείται σημειογραφία κουκκίδων:

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

object.property object.attribute object.method()

Ας δούμε ένα παράδειγμα:

Παράδειγμα: ας υπάρχει μια ετικέτα σε ένα έγγραφο html

Το στοιχείο μου

και συγκεκριμένα για αυτόν στυλ css(ακόμα και δύο στυλ, το δεύτερο θα είναι χρήσιμο για την εργασία):

.small( χρώμα : κόκκινο ; μέγεθος γραμματοσειράς : μικρό ; ) .big( χρώμα : μπλε ; μέγεθος γραμματοσειράς : μεγάλο; )

.small( χρώμα: κόκκινο; μέγεθος γραμματοσειράς: μικρό; ) .big( χρώμα:μπλε; μέγεθος γραμματοσειράς:μεγάλο; )

Απαραίτητη:

ορίστε μια νέα ιδιότητα ενός αντικειμένου, εκχωρήστε μια τιμή σε αυτό και εμφανίστε αυτήν την τιμή.

εμφάνιση της τιμής ενός χαρακτηριστικού αντικειμένου.

αλλάξτε την τιμή ενός χαρακτηριστικού αντικειμένου.

Ας ολοκληρώσουμε την εργασία με τη σειρά:
✍ Λύση:

Από αυτό γλώσσα javascript, τότε το αντικείμενο μπορεί να εφευρεθεί και να εκχωρηθεί οποιαδήποτε ιδιότητα με οποιαδήποτε τιμή. Αλλά πρώτα, ας αποκτήσουμε πρόσβαση στο αντικείμενο (η πρόσβαση στο αντικείμενο θα συζητηθεί λεπτομερώς αργότερα σε αυτό το μάθημα):

// πρόσβαση στο αντικείμενο από το id var στοιχείο = document.getElementById("MyElem"); element.myProperty = 5; // εκχώρηση της ειδοποίησης ιδιότητας(element.myProperty); // εμφάνιση σε ένα παράθυρο διαλόγου

Η επόμενη εργασία σχετίζεται με ένα χαρακτηριστικό αντικειμένου. Ένα χαρακτηριστικό αντικειμένου είναι τα χαρακτηριστικά της ετικέτας. Εκείνοι. στην περίπτωσή μας υπάρχουν δύο από αυτά: το χαρακτηριστικό class με την τιμή small και το χαρακτηριστικό id. Θα δουλέψουμε με το χαρακτηριστικό class.

Τώρα ας προσθέσουμε κώδικα javascript για να εμφανίσουμε την τιμή του χαρακτηριστικού του αντικειμένου μας. Ο κωδικός πρέπει να είναι μετάκύριες ετικέτες:

// πρόσβαση στο αντικείμενο από το id var στοιχείο = document.getElementById("MyElem"); alert(element.getAttribute("class")); // εμφάνιση σε ένα παράθυρο διαλόγου

Και η τελευταία εργασία: αλλαγή της τιμής του χαρακτηριστικού. Έχουμε ένα στυλ για αυτό. "μεγάλο". Ας αντικαταστήσουμε την τιμή του χαρακτηριστικού class με αυτό το στυλ:

// πρόσβαση στο αντικείμενο από το id var στοιχείο = document.getElementById("MyElem"); element.setAttribute("class","big");

Ως αποτέλεσμα, το στοιχείο μας θα γίνει μεγαλύτερο και θα χρωματιστεί μπλε (κατηγορία μεγάλο).

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στις μεθόδους που χρησιμοποιούνται στο παράδειγμα για την εργασία με χαρακτηριστικά.

Μέθοδοι εργασίας με χαρακτηριστικά σε JavaScript

Τα χαρακτηριστικά μπορούν να προστεθούν, να διαγραφούν και να τροποποιηθούν. Υπάρχουν ειδικές μέθοδοι για αυτό:

• Προσθήκη ενός χαρακτηριστικού (ορισμός μιας νέας τιμής για αυτό):

getAttribute(attr)

• Έλεγχος για την παρουσία αυτού του χαρακτηριστικού:

removeAttribute(attr)

Διαφορετικοί τρόποι εργασίας με χαρακτηριστικά

Παράδειγμα: Εκτυπώστε την τιμή του χαρακτηριστικού value ενός μπλοκ κειμένου.

✍ Λύση:

• Ας υπάρχει ένα μπλοκ κειμένου:

var elem = document.getElementById("MyElem"); var x = "τιμή";

• Ας δούμε διάφορους τρόπους για να λάβουμε την τιμή του χαρακτηριστικού (χρησιμοποιήστε τη μέθοδο alert() για έξοδο):

elem.getAttribute("τιμή")

elem.getAttribute("τιμή")

2. σημειογραφία με τελείες:

στοιχείο.χαρακτηριστικά.τιμή

στοιχείο.χαρακτηριστικά.τιμή

3. σημειογραφία παρένθεσης:

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


Μπορείτε επίσης να ορίσετε τιμές χαρακτηριστικών με διάφορους τρόπους:

var x = "κλειδί"; // κλειδί - όνομα χαρακτηριστικού, val - τιμή για το χαρακτηριστικό // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Ιδιότητες στοιχείων σώματος

Μέσω του αντικειμένου εγγράφου, μπορείτε να αποκτήσετε πρόσβαση στο σώμα του εγγράφου - την ετικέτα σώματος - με ορισμένες χρήσιμες ιδιότητες.

Για παράδειγμα, η ετικέτα body έχει δύο ιδιότητες: το πλάτος και το ύψος του παραθύρου του πελάτη:

document.body.clientHeight — ύψος του παραθύρου του πελάτη
document.body.clientWidth — πλάτος του παραθύρου του προγράμματος-πελάτη


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

Σημαντικό: Κατά την πρόσβαση σε ετικέτες σελίδας με αυτόν τον τρόπο, το σενάριο πρέπει να βρίσκεται στο τέλος του δέντρου στοιχείων, πριν κλείσετε το σώμα ! Δεδομένου ότι μέχρι να εκτελεστεί το σενάριο, όλα τα στοιχεία θα πρέπει ήδη να "σχεδιαστούν" από το πρόγραμμα περιήγησης στην οθόνη

Εργασία js8_1. Εμφάνιση μηνύματος σχετικά με το μέγεθος του παραθύρου του προγράμματος περιήγησης: για παράδειγμα, "Διαστάσεις παραθύρου προγράμματος περιήγησης 600 x 400"

Πρόσβαση σε στοιχεία εγγράφου σε JavaScript

Υπάρχουν πολλές επιλογές για πρόσβαση ή αναζήτηση αντικειμένων:

Αναζήτηση κατά id (ή μέθοδος getElementById), επιστρέφει ένα συγκεκριμένο στοιχείο

Αναζήτηση κατά όνομα ετικέτας (ή μέθοδος getElementsByTagName), επιστρέφει έναν πίνακα στοιχείων

Search by name (ή μέθοδος getElementsByName), επιστρέφει έναν πίνακα στοιχείων

Μέσω γονικών στοιχείων (λήψη όλων των παιδιών)

Ας εξετάσουμε κάθε μία από τις επιλογές με περισσότερες λεπτομέρειες.

Πρόσβαση σε ένα στοιχείο μέσω του χαρακτηριστικού id του

Σύνταξη: document.getElementById(id)

Η μέθοδος getElementById() επιστρέφει το ίδιο το στοιχείο, το οποίο στη συνέχεια μπορεί να χρησιμοποιηθεί για πρόσβαση σε δεδομένα

Παράδειγμα: Η σελίδα έχει ένα πεδίο κειμένου με το χαρακτηριστικό id="cake":

...

Απαραίτητη

✍ Λύση:

alert(document.getElementById("κέικ").value); // επιστρέφει "αριθμός κέικ"

Μπορείτε να κάνετε το ίδιο πράγμα με την πρόσβαση στο αντικείμενο μέσω μιας μεταβλητής:

var a=document.getElementById("κέικ"); alert(a.value); // εμφανίζει την τιμή του χαρακτηριστικού value, π.χ. κείμενο "αριθμός κέικ"

Σημαντικό: Το σενάριο πρέπει να βρίσκεται μετά την ετικέτα!

Πρόσβαση σε έναν πίνακα στοιχείων μέσω της ετικέτας ονόματος και μέσω του ευρετηρίου πίνακα

Σύνταξη:
document.getElementsByTagName(όνομα);

Παράδειγμα: Η σελίδα έχει ένα πεδίο κειμένου (ετικέτα εισαγωγής) με ένα χαρακτηριστικό τιμής:

...

Απαιτείται: εμφάνιση της τιμής του χαρακτηριστικού τιμής του

Η μέθοδος getElementsByTagName παρέχει πρόσβαση μέσω μιας μεταβλητής σε όλα τα στοιχεία εισόδου (δηλαδή, έναν πίνακα στοιχείων εισόδου), ακόμα κι αν αυτό το στοιχείο είναι το μόνο στη σελίδα. Για να αποκτήσετε πρόσβαση σε ένα συγκεκριμένο στοιχείο, για παράδειγμα το πρώτο, υποδεικνύουμε το ευρετήριό του (ο πίνακας ξεκινά από το δείκτη μηδέν).

✍ Λύση:

Έχουμε πρόσβαση σε ένα συγκεκριμένο στοιχείο κατά ευρετήριο:

var a =document.getElementsByTagName("input"); alert(a.value); // επιστρέφει "αριθμός κέικ"

Πρόσβαση σε έναν πίνακα στοιχείων από την τιμή του χαρακτηριστικού name

Σύνταξη:
document.getElementsByName(όνομα);

Η μέθοδος getElementsByName("...") επιστρέφει έναν πίνακα αντικειμένων των οποίων το χαρακτηριστικό name είναι ίσο με την τιμή που καθορίζεται ως παράμετρος μεθόδου. Εάν υπάρχει μόνο ένα τέτοιο στοιχείο στη σελίδα, τότε η μέθοδος εξακολουθεί να επιστρέφει έναν πίνακα (με ένα μόνο στοιχείο).

Παράδειγμα: ας υποθέσουμε ότι υπάρχει ένα στοιχείο στο έγγραφο:

var element = document.getElementsByName("MyElem"); alert(element.value);

ΣΕ σε αυτό το παράδειγμαυπάρχει μόνο ένα στοιχείο, αλλά γίνεται πρόσβαση στο μηδενικό στοιχείο του πίνακα.

Σπουδαίος:Η μέθοδος λειτουργεί μόνο με εκείνα τα στοιχεία για τα οποία το χαρακτηριστικό name παρέχεται ρητά στην προδιαγραφή: αυτά είναι η μορφή , η είσοδος , η , η επιλογή , η περιοχή κειμένου και μια σειρά από άλλες, πιο σπάνιες, ετικέτες.

Η μέθοδος document.getElementsByName δεν θα λειτουργήσει με άλλα στοιχεία όπως div , p κ.λπ.

Πρόσβαση σε απογόνους ενός γονικού στοιχείου

Η πρόσβαση στα παιδιά γίνεται σε javascript μέσω της ιδιότητας childNodes. Η ιδιότητα ανήκει στο μητρικό αντικείμενο.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Ας δούμε ένα παράδειγμα όπου οι ετικέτες εικόνας τοποθετούνται σε ένα κοντέινερ που ονομάζεται ετικέτα div. Έτσι, η ετικέτα div είναι ο γονέας των δεδομένων εικόνας και οι ίδιες οι ετικέτες img είναι, κατά συνέπεια, παιδιά της ετικέτας div:

Τώρα ας βγούμε σε τροπικό παράθυροτιμές στοιχείων πίνακα με απογόνους, π.χ. ετικέτες img:

var myDiv=document.getElementById("div_for_img"); // πρόσβαση στο γονικό κοντέινερ var childMas=myDiv.childNodes; // πίνακας απογόνων για (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Σημειώστε ότι είναι βολικό να χρησιμοποιήσετε έναν βρόχο για να επαναλάβετε τα στοιχεία ενός πίνακα καταγωγής. Εκείνοι. στο παράδειγμά μας παίρνουμε έναν κύκλο:

... για (var a σε childMas) ( alert(childMas[ a].src ) ;)

Για (var a σε childMas)( alert(childMas[a].src); )

Άλλοι τρόποι πρόσβασης σε στοιχεία

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

1 3 4

1 3 4

Πρόσβαση:

... // ανεπιθύμητα και καταργημένα στοιχεία πρόσβασης: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // button alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // προτιμώμενες μέθοδοι για την πρόσβαση στοιχείων alert(document.getElementById ("t" ) .type ) ; // text alert(document.getElementById ("s") .name ) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4...

... // μέθοδοι πρόσβασης ανεπιθύμητων και καταργημένων στοιχείων: alert(document.forms.name); // f alert(document.forms.elements.type); // ειδοποίηση κειμένου(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // προτιμώμενες μέθοδοι για την πρόσβαση στοιχείων alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Παράδειγμα: Σε ένα έγγραφο HTML, δημιουργήστε ένα κουμπί και ένα πεδίο κειμένου. Χρησιμοποιώντας ένα σενάριο, χρωματίστε το φόντο του κουμπιού (ιδιότητα style.backgroundColor του κουμπιού) και εμφανίστε την επιγραφή "Γειά σου!"στο πεδίο κειμένου (χαρακτηριστικό τιμής).

Κώδικας HTML:

document.getElementById("t1").value = "Γεια σας!"; document.getElementById("b1").style.backgroundColor = "red";!}

Επιλογή 2:

document.getElementById ("t1" ) .setAttribute ( "value", "Hello!") ; document.getElementById("b1" ) .style .backgroundColor = "κόκκινο" ;

document.getElementById("t1").setAttribute("value","Hello!"); document.getElementById("b1").style.backgroundColor = "κόκκινο";

Εργασία Js8_2. Δημιουργήστε ετικέτες πεδίων κειμένου όπως φαίνεται στην εικόνα. Δώστε τους τις αντίστοιχες (που φαίνονται στο σχήμα) τιμές χαρακτηριστικών id. Χρησιμοποιώντας ένα σενάριο, προσθέστε την τιμή "0" σε όλα τα αριθμητικά πεδία (υποθέτοντας αριθμητικές τιμές)

Έλεγχος ότι τα δεδομένα της φόρμας έχουν εισαχθεί σωστά

Έχει μείνει το πεδίο κενό;

Δεν είναι αξιόπιστη η εισαγωγή χρήστη. Δεν είναι λογικό να υποθέσουμε ότι οι χρήστες θα ελέγχουν τα δεδομένα κατά την εισαγωγή δεδομένων. Αυτό σημαίνει ότι πρέπει να χρησιμοποιήσετε javascript για αυτό.

Για να ελέγξετε αν το πεδίο κειμένου παραμένει κενό (για παράδειγμα, αφού ο χρήστης συμπληρώσει τα δεδομένα ενός ερωτηματολογίου), θα πρέπει να ανατρέξετε στην ιδιότητα τιμή. Εάν η αξία του ακινήτου είναι κενή γραμμή(""), που σημαίνει ότι είναι απαραίτητο να ειδοποιηθεί με κάποιο τρόπο ο χρήστης σχετικά.

if(document.getElementById("name").value=="") (ορισμένες ενέργειες, για παράδειγμα, εμφάνιση ενός μηνύματος που σας ζητά να συμπληρώσετε ένα πεδίο);

Επιπλέον, μπορείτε να κάνετε χωρίς σενάριο. Στην ετικέτα εισαγωγής πεδίο κειμένουυπάρχει μια ιδιότητα προτύπου. αναγράφεται η τιμή του κοινή έκφρασηγια να επικυρώσετε τα δεδομένα σε ένα πεδίο κειμένου δεδομένης φόρμας. Εάν υπάρχει το χαρακτηριστικό πρότυπο, τότε η φόρμα δεν θα υποβληθεί μέχρι να συμπληρωθεί σωστά αυτό το πεδίο κειμένου.
Για παράδειγμα, για να ελέγξετε εάν ένα πεδίο έχει μείνει κενό:

Κείμενο αντί αριθμητική αξία: η συνάρτηση είναι NaN

Εάν ένα πεδίο απαιτεί την εισαγωγή μιας αριθμητικής τιμής, αλλά αντί αυτού ο χρήστης εισάγει κείμενο, τότε πρέπει να χρησιμοποιηθεί η συνάρτηση isNaN. "Δεν είναι αριθμός;"), το οποίο ελέγχει τον τύπο των δεδομένων εισαγωγής και επιστρέφει αληθές εάν εισάγονται δεδομένα κειμένου αντί για αριθμητικά δεδομένα.

Οτι. εάν επιστραφεί το true, τότε ο χρήστης πρέπει να ειδοποιηθεί για να εισάγει τη σωστή μορφή, π.χ. αριθμός.

if(isNaN(document.getElementById("minutes").value))(ειδοποίηση που απαιτεί να εισαγάγετε αριθμητικά δεδομένα);

Δίνεται μια σελίδα με στοιχεία προς συμπλήρωση:


Θραύσμα κώδικας html:

1 2 3 4 5 6 7 8 9 10 11 12

Ονομα: Αριθμός ντόνατς: Λεπτά: Περίληψη: Φόρος: Αποτέλεσμα: ...

Ονομα:
Αριθμός ντόνατς:
Λεπτά:
Περίληψη:
Φόρος:
Αποτέλεσμα:
...

Απαραίτητη:
Συμπληρώστε τα κενά στο απόσπασμα κώδικα παρακάτω που ελέγχει ότι δύο πεδία κειμένου έχουν συμπληρωθεί σωστά: Ονομα(id="name") και λεπτά(id="λεπτά"). Χρησιμοποιήστε ελέγχους για να βεβαιωθείτε ότι το πεδίο παραμένει κενό ("") και ότι το αριθμητικό πεδίο έχει συμπληρωθεί σωστά (isNaN).

* Εκτελέστε την εργασία επίσης με το χαρακτηριστικό πρότυπο των πεδίων κειμένου χρησιμοποιώντας .

Απόσπασμα σεναρίου:

Ο κώδικας χρησιμοποιεί συνθήκες που έχουν μάθει προηγουμένως για να δημιουργήσει περίπλοκες συνθήκες.

Μια νέα ιδέα για εσάς είναι η κλήση μιας συνάρτησης ως χειριστή συμβάντων κουμπιών:
onclick="placeOrder();"
Όταν κάνετε κλικ στο κουμπί, θα κληθεί η συνάρτηση placeOrder().

Μπορείτε να δημιουργήσετε ένα έθιμο δεσμευτικό δέσιμο, το οποίο θα ελέγξει την τιμή ενός συγκεκριμένου παρατηρήσιμου boolean πριν προσθέσει ή όχι χαρακτηριστικά. Δείτε αυτό το παράδειγμα:

Ko.bindingHandlers.attrIf = ( ενημέρωση: συνάρτηση (στοιχείο, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (εμφάνιση) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) other ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(στοιχείο).removeAttr(k); ) ) ) )); Σύνδεσμος

Μακάρι να μπορούσα να απαντήσω στο @gbs, αλλά δεν μπορώ. Η λύση μου θα ήταν να έχω δύο πανομοιότυπα στοιχείο HTML: ένα με το χαρακτηριστικό, χωρίς αυτό και μια συνθήκη νοκ άουτ για να προσθέσετε ένα από αυτά σύμφωνα με το στοιχείο. Γνωρίζω επίσης αυτή την κοινή προσδοκία, αλλά ποια λύση είναι πιο αποτελεσματική;

Αυτό το σεμινάριο αφορά την ανάγνωση και την αλλαγή των χαρακτηριστικών στοιχείων στο jQuery.

Τα χαρακτηριστικά είναι ένα ζεύγος ονόματος/τιμής που εκχωρείται σε στοιχεία μιας ετικέτας. Παραδείγματα χαρακτηριστικών ( href, τίτλος, src, τάξη):

Εδώ είναι το συνοπτικό κείμενο

• attr() για ανάγνωση, προσθήκη και αλλαγή χαρακτηριστικών
• removeAttr() για να αφαιρέσετε χαρακτηριστικά

Αυτό το μάθημα καλύπτει την εργασία με τις μεθόδους attr() και removeAttr().

Υπάρχουν ειδικές μέθοδοι jQuery για εργασία με κλάσεις CSS, οι οποίες περιγράφονται σε άλλο μάθημα. Όταν εργάζεστε σε ένα έργο στο jQuery, πρέπει να χειρίζεστε πολύ τις κλάσεις CSS και το χαρακτηριστικό class μπορεί να περιέχει πολλά ονόματα κλάσεων, γεγονός που καθιστά την εργασία με αυτό πολύ πιο περίπλοκη από άλλα χαρακτηριστικά.

Εάν πρόκειται να εργαστείτε με τις τιμές των πεδίων εισαγωγής, τότε είναι καλύτερο να χρησιμοποιήσετε τη μέθοδο val(), η οποία όχι μόνο παρέχει έναν απλοποιημένο τρόπο εργασίας με το χαρακτηριστικό value, αλλά μπορεί επίσης να διαβάσει και να ορίσει τιμές στα επιλεγμένα στοιχεία της λίστας επιλογής.

Ανάγνωση της τιμής του χαρακτηριστικού

Η ανάγνωση της τιμής του χαρακτηριστικού ενός στοιχείου είναι απλή. Χρειάζεται μόνο να καλέσετε τη μέθοδο attr() στο αντικείμενο jQuery που περιέχει το στοιχείο, δίνοντάς του το όνομα του χαρακτηριστικού προς ανάγνωση. Η μέθοδος επιστρέφει την τιμή του χαρακτηριστικού:

// Εκτυπώστε την τιμή του χαρακτηριστικού "href" της ειδοποίησης στοιχείου #myLink ($("a#myLink").attr("href"));

Εάν το αντικείμενο jQuery περιέχει πολλά στοιχεία, η μέθοδος attr() διαβάζει τις τιμές των χαρακτηριστικών μόνο για το πρώτο στοιχείο του συνόλου.

Ορισμός τιμών χαρακτηριστικών

Η μέθοδος attr() μπορεί επίσης να χρησιμοποιηθεί για την προσθήκη ή αλλαγή τιμών χαρακτηριστικών:

• Αν χαρακτηριστικό δεν υπάρχειστο στοιχείο, θα είναι προστέθηκεκαι θα του εκχωρηθεί η καθορισμένη τιμή.
• Αν χαρακτηριστικό υπάρχει ήδη, η αξία του θα είναι ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟδεδομένη αξία.

Υπάρχουν τρεις τρόποι για να χρησιμοποιήσετε τη μέθοδο attr() για να προσθέσετε ή να αλλάξετε χαρακτηριστικά:

Μπορείτε να προσθέσετε/αλλάξετε χαρακτηριστικά για οποιοδήποτε στοιχείο (ή σύνολο στοιχείων).

Μπορείτε να προσθέσετε/αλλάξετε πολλά χαρακτηριστικά ταυτόχρονα για ένα στοιχείο (ή στοιχεία) καθορίζοντας έναν χάρτη με ονόματα και τιμές χαρακτηριστικών.

μπορείτε να προσθέσετε/αλλάξετε δυναμικά ένα χαρακτηριστικό για πολλά στοιχεία χρησιμοποιώντας μια λειτουργία επανάκλησης.

Ορίστε ένα χαρακτηριστικό

Για να ορίσετε ή να αλλάξετε το χαρακτηριστικό ενός στοιχείου, πρέπει να καλέσετε τη μέθοδο attr() καθορίζοντας το όνομα και την τιμή του χαρακτηριστικού. Για παράδειγμα:

// Αλλάξτε την τιμή του χαρακτηριστικού "href" του στοιχείου #myLink στην τιμή "http://www.example.com/" // (εάν το χαρακτηριστικό "href" δεν υπάρχει, θα δημιουργηθεί αυτόματα) $("a#myLink"). attr("href", "http://www.example.com/");

Είναι επίσης δυνατό να ορίσετε το ίδιο χαρακτηριστικό για πολλά στοιχεία:

Ορισμός πολλών χαρακτηριστικών με χρήση χάρτη

Μπορείτε να ορίσετε πολλά χαρακτηριστικά ταυτόχρονα σε ένα ή περισσότερα στοιχεία χρησιμοποιώντας έναν χάρτη. Αυτή είναι μια λίστα με ζεύγη ονόματος/τιμών που μοιάζει με αυτό:

( name1: value1, name2: value2, ... )

Το ακόλουθο παράδειγμα ορίζει δύο χαρακτηριστικά στο στοιχείο img ταυτόχρονα:

// Ορίστε τα χαρακτηριστικά "src" και "alt" για το στοιχείο img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Η φωτογραφία μου" )) ;

Μπορείτε επίσης να ορίσετε χαρακτηριστικά για πολλά στοιχεία:

// Ορίστε τα χαρακτηριστικά "src" και "alt" για όλα τα στοιχεία img $("img").attr(( "src": "mypic.jpg", "alt": "Η φωτογραφία μου" ));

Ρύθμιση χαρακτηριστικών χρησιμοποιώντας μια λειτουργία επανάκλησης

Αντί να μεταβιβάσετε τιμές χαρακτηριστικών στη μέθοδο attr(), μπορείτε να μεταβιβάσετε το όνομα της συνάρτησης επανάκλησης. Με αυτόν τον τρόπο μπορείτε να ορίσετε δυναμικά τιμές χαρακτηριστικών για πολλά στοιχεία με βάση τη θέση του στοιχείου, μια υπάρχουσα τιμή χαρακτηριστικού ή άλλες ιδιότητες.

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

• Ευρετήριο της θέσης του τρέχοντος επιλεγμένου στοιχείου στο σύνολο (ξεκινά από το μηδέν)
• παλιά τιμή χαρακτηριστικού για το τρέχον επιλεγμένο στοιχείο

Η τιμή που επιστρέφεται από τη συνάρτηση χρησιμοποιείται για να αντικαταστήσει την τιμή του χαρακτηριστικού.

Εκτός από την τρέχουσα θέση του στοιχείου και την παλιά τιμή του χαρακτηριστικού, η συνάρτησή σας μπορεί να έχει πρόσβαση στο ίδιο το στοιχείο χρησιμοποιώντας το κλειδί λόγια αυτό. Με αυτόν τον τρόπο, μπορείτε να αποκτήσετε πρόσβαση σε οποιαδήποτε ιδιότητα στοιχείου ή μέθοδο από τη συνάρτηση επανάκλησης.

Το παράδειγμα χρησιμοποιεί μια συνάρτηση επανάκλησης για να προσθέσει ένα χαρακτηριστικό alt σε κάθε εικόνα στη σελίδα με βάση τη θέση της εικόνας και το χαρακτηριστικό src:

$(init); συνάρτηση init() ( // Ορίστε το χαρακτηριστικό "alt" για όλα τα στοιχεία "img" $("img").attr("alt", setAltText); συνάρτηση setAltText(δείκτης, χαρακτηριστικόValue) (επιστροφή ("Εικόνα" + (ευρετήριο +1) + ": " + this.src); ) )

Μετά την εκτέλεση του κώδικα, η πρώτη εικόνα θα έχει ένα χαρακτηριστικό alt με την τιμή "Εικόνα 1: myphoto.jpg" και η δεύτερη εικόνα θα έχει ένα χαρακτηριστικό alt με την τιμή "Εικόνα 2: yourphoto.jpg" .

Αφαίρεση χαρακτηριστικού

Για να αφαιρέσετε ένα χαρακτηριστικό από ένα στοιχείο, πρέπει να καλέσετε τη μέθοδο removeAttr(), δίνοντάς της το όνομα του χαρακτηριστικού που θέλετε να αφαιρέσετε. Για παράδειγμα:

// Αφαιρέστε το χαρακτηριστικό "title" από το στοιχείο #myLink $("a#myLink").removeAttr("title");

Μπορείτε επίσης να καλέσετε τη μέθοδο removeAttr() σε ένα αντικείμενο jQuery που περιέχει πολλά στοιχεία. Η μέθοδος removeAttr() θα αφαιρέσει το καθορισμένο χαρακτηριστικό από όλα τα στοιχεία:

// Αφαιρέστε το χαρακτηριστικό "title" από όλους τους συνδέσμους $("a").removeAttr("title");

Περίληψη

Αυτό το μάθημα κάλυψε ζητήματα εργασίας με χαρακτηριστικά στοιχείων στο jQuery:

• Ανάγνωση τιμών χαρακτηριστικών
• Ορισμός ενός χαρακτηριστικού
• Ρύθμιση πολλών διαφορετικών χαρακτηριστικών ταυτόχρονα
• Χρησιμοποιώντας μια συνάρτηση επανάκλησης για να ορίσετε δυναμικά τις τιμές των χαρακτηριστικών σε ένα σύνολο στοιχείων
• Αφαίρεση χαρακτηριστικών από ένα στοιχείο

Ορίζει την τιμή ενός χαρακτηριστικού στο καθορισμένο στοιχείο. Εάν το χαρακτηριστικό υπάρχει ήδη, η τιμή ενημερώνεται. Διαφορετικά, προστίθεται ένα νέο χαρακτηριστικό με το καθορισμένο όνομα και τιμή.

Σύνταξη Στοιχείο.setAttribute( όνομα, αξία) Όνομα παραμέτρων Ένα DOMString που καθορίζει το όνομα του χαρακτηριστικού του οποίου η τιμή πρέπει να οριστεί. Το όνομα του χαρακτηριστικού μετατρέπεται αυτόματα σε όλα τα πεζά όταν η setAttribute() καλείται σε ένα στοιχείο HTML σε ένα έγγραφο HTML. τιμή Ένα DOMString που περιέχει την τιμή που πρέπει να εκχωρηθεί στο χαρακτηριστικό. Οποιαδήποτε τιμή μη συμβολοσειράς που έχει καθοριστεί μετατρέπεται αυτόματα σε συμβολοσειρά.

Τα δυαδικά χαρακτηριστικά θεωρούνται αληθή εάν "υπάρχουν καθόλου στο στοιχείο, ανεξάρτητα από την πραγματική τους τιμή. Κατά κανόνα, θα πρέπει να καθορίσετε την κενή συμβολοσειρά ("") στην τιμή (μερικοί άνθρωποι χρησιμοποιούν το όνομα του χαρακτηριστικού. αυτό λειτουργεί αλλά δεν είναι τυπικό). Δείτε παρακάτω για μια πρακτική επίδειξη.

Δεδομένου ότι η καθορισμένη τιμή μετατρέπεται σε συμβολοσειρά, ο καθορισμός null δεν κάνει απαραίτητα αυτό που περιμένετε. Αντί να αφαιρέσετε το χαρακτηριστικό ή να ορίσετε την τιμή του ως null, ορίζει την τιμή του χαρακτηριστικού στη συμβολοσειρά "null" . Εάν θέλετε να αφαιρέσετε ένα χαρακτηριστικό, καλέστε removeAttribute() .

Επιστρεφόμενη τιμή Εξαιρέσεις InvalidCharacterError Το όνομα του καθορισμένου χαρακτηριστικού περιέχει έναν ή περισσότερους χαρακτήρες που δεν είναι έγκυροι στα ονόματα χαρακτηριστικών. Παράδειγμα

Στο παρακάτω παράδειγμα, η setAttribute() χρησιμοποιείται για να ορίσει χαρακτηριστικά σε ένα .

HTML Hello World JavaScript var b = document.querySelector("button"); b.setAttribute("name", "helloButton"); b.setAttribute("disabled", "");

Αυτό δείχνει δύο πράγματα:

• Η πρώτη κλήση στο setAttribute() παραπάνω δείχνει την αλλαγή της τιμής του χαρακτηριστικού ονόματος σε "helloButton". Μπορείτε να το δείτε χρησιμοποιώντας το εργαλείο επιθεώρησης σελίδας του προγράμματος περιήγησής σας (Chrome, Edge, Firefox, Safari).
• Για να ορίσετε την τιμή ενός Boolean χαρακτηριστικού, όπως απενεργοποιημένο , μπορείτε να καθορίσετε οποιαδήποτε τιμή. Μια κενή συμβολοσειρά ή το όνομα του χαρακτηριστικού είναι συνιστώμενες τιμές. Το μόνο που έχει σημασία είναι ότι εάν το χαρακτηριστικό υπάρχει καθόλου, ανεξάρτητα από την πραγματική του αξία, η αξία του θεωρείται αληθής. Η απουσία του χαρακτηριστικού σημαίνει ότι η τιμή του είναι ψευδής. Ορίζοντας την τιμή του χαρακτηριστικού disabled στην κενή συμβολοσειρά (""), ορίζουμε disabled σε true , που έχει ως αποτέλεσμα την απενεργοποίηση του κουμπιού.

Μέθοδοι DOM που ασχολούνται με τα χαρακτηριστικά των στοιχείων:

Μέθοδοι που δεν γνωρίζουν τον χώρο ονομάτων, οι πιο συχνά χρησιμοποιούμενες μέθοδοι Παραλλαγές με επίγνωση χώρου ονομάτων (DOM Επίπεδο 2) Μέθοδοι DOM επιπέδου 1 για άμεση αντιμετώπιση κόμβων Attr (σπάνια χρησιμοποιούνται) Μέθοδοι με επίγνωση χώρου ονομάτων επιπέδου 2 για άμεση αντιμετώπιση κόμβων Attr (που χρησιμοποιούνται σπάνια)

setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute(DOM2)	έχει AttributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Προσδιορισμός

• DOM Level 2 Core: setAttribute (παρουσιάστηκε στο DOM Level 1 Core)

Συμβατότητα προγράμματος περιήγησης

Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

Επιτραπέζιο κινητό Chrome Edge Firefox Internet Explorer Opera Safari Android Προβολή ιστού Chrome για Android Firefox για Android Opera για Android Safari σε iOS Samsung InternetsetAttribute

Πλήρης υποστήριξη Chrome Ναι	Πλήρης υποστήριξη Edge 12	Πλήρης υποστήριξη Firefox Ναι	IE Πλήρης υποστήριξη 5 Σημειώσεις Πλήρης υποστήριξη 5 Σημειώσεις Σημειώσεις Στον Internet Explorer 7 και παλαιότερες εκδόσεις, το setAttribute δεν ορίζει στυλ και καταργεί συμβάντα όταν προσπαθείτε να τα ορίσετε.	Opera Πλήρης υποστήριξη Ναι	Πλήρης υποστήριξη Safari 6	WebView Android Πλήρης υποστήριξη Ναι	Chrome Android Πλήρης υποστήριξη Ναι	Firefox Android Πλήρης υποστήριξη Ναι	Opera Android Πλήρης υποστήριξη Ναι	Safari iOS Πλήρης υποστήριξη Ναι	Samsung Internet Android Πλήρης υποστήριξη Ναι

Υπόμνημα Πλήρης υποστήριξη Πλήρης υποστήριξη Δείτε τις σημειώσεις υλοποίησης. Δείτε τις σημειώσεις υλοποίησης. Σημειώσεις Gecko

Η χρήση της setAttribute() για την τροποποίηση ορισμένων χαρακτηριστικών, κυρίως της τιμής στο XUL, λειτουργεί ασυνεπή, καθώς το χαρακτηριστικό καθορίζει την προεπιλεγμένη τιμή. Για να αποκτήσετε πρόσβαση ή να τροποποιήσετε τις τρέχουσες τιμές, θα πρέπει να χρησιμοποιήσετε τις ιδιότητες. Για παράδειγμα, χρησιμοποιήστε το Element.value αντί για το Element.setAttribute() .

Σε αυτό το άρθρο θα εξοικειωθούμε με τις ιδιότητες και τα χαρακτηριστικά του DOM, θα εξετάσουμε πώς διαφέρουν και πώς να εργαστούμε σωστά μαζί τους. Ας δούμε ποιες μεθόδους έχει η JavaScript για την εκτέλεση λειτουργιών σε χαρακτηριστικά.

Ποια είναι η διαφορά μεταξύ ενός χαρακτηριστικού και μιας ιδιότητας DOM;

Τα χαρακτηριστικά είναι οντότητες HTML με τις οποίες μπορούμε να προσθέσουμε ορισμένα δεδομένα σε στοιχεία στον κώδικα HTML.

Όταν ένα πρόγραμμα περιήγησης ζητά μια σελίδα, λαμβάνει τον πηγαίο κώδικα HTML. Μετά από αυτό, αναλύει αυτόν τον κώδικα και δημιουργεί ένα DOM με βάση αυτόν. Κατά τη διάρκεια αυτής της διαδικασίας, τα χαρακτηριστικά HTML των στοιχείων μεταφράζονται σε αντίστοιχες ιδιότητες DOM.

Για παράδειγμα, το πρόγραμμα περιήγησης, όταν διαβάζει την ακόλουθη γραμμή κώδικα HTML, θα δημιουργήσει τις ακόλουθες ιδιότητες DOM για αυτό το στοιχείο: id , className , src και alt .

Αυτές οι ιδιότητες έχουν πρόσβαση στον κώδικα JavaScript ως ιδιότητες ενός αντικειμένου. Το αντικείμενο εδώ είναι ένας κόμβος (στοιχείο) DOM.

Ένα παράδειγμα στο οποίο παίρνουμε τις τιμές των ιδιοτήτων DOM για το στοιχείο που δίνεται παραπάνω και εξάγουμε τις τιμές τους στην κονσόλα:

// λάβετε το στοιχείο var brandImg = document.querySelector("#brand"); // εμφάνιση των τιμών των ιδιοτήτων DOM του στοιχείου στην κονσόλα console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "λογότυπο ιστότοπου"

Ορισμένα ονόματα ιδιοτήτων DOM δεν ταιριάζουν με ονόματα χαρακτηριστικών. Ένα από αυτά είναι το χαρακτηριστικό class. Αυτό το χαρακτηριστικό αντιστοιχεί στην ιδιότητα DOM className. Αυτή η διαφορά οφείλεται στο γεγονός ότι η τάξη είναι λέξη-κλειδίσε JavaScript, είναι δεσμευμένο και δεν μπορεί να χρησιμοποιηθεί. Εξαιτίας αυτού, οι προγραμματιστές του προτύπου αποφάσισαν να χρησιμοποιήσουν κάποιο άλλο όνομα για συμμόρφωση, το οποίο επιλέχθηκε ως className .

Μια άλλη απόχρωση σχετίζεται με το γεγονός ότι η μετάφραση των χαρακτηριστικών HTML καθορίζεται στο πηγαίος κώδικαςέγγραφο, οι ιδιότητες DOM δεν υλοποιούνται πάντα ένα προς ένα.

Εάν ένα στοιχείο έχει ένα μη τυπικό χαρακτηριστικό HTML, τότε δεν δημιουργείται μια ιδιότητα που αντιστοιχεί σε αυτό στο DOM.

// λάβετε το στοιχείο mydiv = document.querySelector("#mydiv"); // λάβετε την τιμή της ιδιότητας alt του στοιχείου και την εξάγετε στην κονσόλα console.log(mydiv.alt); // undefined // λάβετε την τιμή του χαρακτηριστικού alt του στοιχείου και την εξάγετε στην κονσόλα console.log(mydiv.getAttribute("alt")); // "..."

Μια άλλη διαφορά είναι ότι οι τιμές ορισμένων χαρακτηριστικών HTML και οι αντίστοιχες ιδιότητες DOM τους μπορεί να είναι διαφορετικές. Εκείνοι. ένα χαρακτηριστικό μπορεί να έχει μια τιμή και μια ιδιότητα DOM που δημιουργείται με βάση αυτό μπορεί να έχει μια άλλη.

Ένα από αυτά τα χαρακτηριστικά ελέγχεται.

Η τιμή του επιλεγμένου χαρακτηριστικού HTML σε αυτήν την περίπτωση είναι μια κενή συμβολοσειρά. Όμως, η ιδιότητα που αντιστοιχεί σε ένα δεδομένο χαρακτηριστικό στο DOM θα έχει αληθής. Επειδή σύμφωνα με τους κανόνες του προτύπου, για να οριστεί true, αρκεί απλώς να αναφέρουμε αυτό το χαρακτηριστικό στον κώδικα HTML και δεν έχει σημασία τι αξία θα έχει.

Επιπλέον, ακόμα κι αν δεν καθορίσουμε το checked χαρακτηριστικό στον κώδικα HTML για ένα στοιχείο εισόδου με πλαίσιο ελέγχου τύπου, τότε θα εξακολουθεί να δημιουργείται μια επιλεγμένη ιδιότητα για αυτό στο DOM, αλλά θα είναι ίση με false.

Επιπλέον, η JavaScript σάς επιτρέπει επίσης να εργάζεστε με χαρακτηριστικά. Υπάρχουν ειδικές μέθοδοι για αυτό στο DOM API. Αλλά συνιστάται να τα χρησιμοποιείτε μόνο όταν χρειάζεται πραγματικά να εργαστείτε με δεδομένα με αυτόν τον τρόπο.

Ταυτόχρονα, πρέπει να γνωρίζετε ότι όταν αλλάζουμε την ιδιότητα DOM ενός στοιχείου, αλλάζει και το αντίστοιχο χαρακτηριστικό και το αντίστροφο. Αλλά αυτή η διαδικασία στα προγράμματα περιήγησης δεν εκτελείται πάντα ένα προς ένα.

Οι κύριες διαφορές μεταξύ των ιδιοτήτων DOM και των χαρακτηριστικών είναι:

• η τιμή του χαρακτηριστικού είναι πάντα μια συμβολοσειρά και η τιμή της ιδιότητας DOM είναι ένας συγκεκριμένος τύπος δεδομένων (όχι απαραίτητα συμβολοσειρά).
• Το όνομα του χαρακτηριστικού δεν έχει διάκριση πεζών-κεφαλαίων και οι ιδιότητες DOM είναι διάκριση πεζών-κεφαλαίων. Εκείνοι. στον κώδικα HTML μπορούμε, για παράδειγμα, να γράψουμε το χαρακτηριστικό HTML id ως Id , ID , κ.λπ. Το ίδιο ισχύει και για το όνομα του χαρακτηριστικού, το οποίο καθορίζουμε σε ειδικές μεθόδους JavaScript για εργασία με αυτό. Μπορούμε όμως να έχουμε πρόσβαση στην αντίστοιχη ιδιότητα DOM μόνο με id και τίποτα άλλο.

Εργασία με ιδιότητες DOM ενός στοιχείου

Η εργασία με τις ιδιότητες των στοιχείων στο JavaScript, όπως σημειώθηκε παραπάνω, πραγματοποιείται όπως και με τις ιδιότητες των αντικειμένων.

Αλλά για να αποκτήσετε πρόσβαση στην ιδιότητα ενός στοιχείου, πρέπει πρώτα να αποκτηθεί. Μπορείτε να λάβετε ένα στοιχείο DOM σε JavaScript, για παράδειγμα, χρησιμοποιώντας την καθολική μέθοδο querySelector και μια συλλογή Στοιχεία DOM, για παράδειγμα, μέσω του querySelectorAll .

Ως πρώτο παράδειγμα, εξετάστε το ακόλουθο στοιχείο HTML:

Κείμενο πληροφοριακού μηνύματος... var alert = document.querySelector("#alert"); // λάβετε το στοιχείο

Με βάση αυτό, θα αναλύσουμε πώς να αποκτήσουμε ιδιότητες DOM, να τις αλλάξουμε και να προσθέσουμε νέες.

Ανάγνωση τιμών ιδιοτήτων DOM:

// λάβετε την τιμή της ιδιότητας DOM id var alertId = alert.id; // "alert" // λάβετε την τιμή της ιδιότητας DOM className var alertClass = alert.className; // "alert alert-info" // λάβετε την τιμή του τίτλου ιδιότητας DOM var alertId = alert.title; // "Βοήθεια ΚΕΙΜΕΝΟΥ..."

Αλλαγή τιμών ιδιοτήτων DOM:

// για να αλλάξετε την τιμή μιας ιδιότητας DOM, πρέπει απλώς να της αντιστοιχίσετε μια νέα τιμή alert.title = "New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Προσθήκη ιδιοτήτων DOM:

Alert.lang = "ru"; // ορίστε την ιδιότητα lang σε "ru" alert.dir = "ltr"; // ορίστε την ιδιότητα dir σε "ltr"

Ένα παράδειγμα στο οποίο θα εξάγουμε στην κονσόλα όλες τις τιμές κλάσης που έχουν τα στοιχεία p στη σελίδα:

Var paragraphs = document.querySelectorAll("p"); για (var i = 0, μήκος = παράγραφοι.μήκος ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Ένα παράδειγμα στο οποίο ορίζουμε την ιδιότητα lang σε όλα τα στοιχεία με την κλάση περιεχομένου με την τιμή "ru":

Var contents = document.querySelectorAll(".content"); για (var i = 0, μήκος = contents.length; i< length; i++) { contents[i].lang = "ru"; }

Χαρακτηριστικά στοιχείων και μέθοδοι εργασίας με αυτά

Τα χαρακτηριστικά ορίζονται αρχικά σε κώδικα HTML. Αν και συνδέονται, κατά κάποιο τρόπο, με ιδιότητες, δεν είναι το ίδιο πράγμα. Στις περισσότερες περιπτώσεις, θα πρέπει να εργάζεστε με ιδιότητες και να έχετε πρόσβαση σε χαρακτηριστικά μόνο όταν το χρειάζεστε πραγματικά.

Οι τιμές των χαρακτηριστικών, σε αντίθεση με τις ιδιότητες DOM, όπως σημειώθηκε παραπάνω, είναι πάντα μια συμβολοσειρά.

Η JavaScript έχει τέσσερις μεθόδους για την εκτέλεση λειτουργιών που σχετίζονται με χαρακτηριστικά:

• .hasAttribute("όνομα_ιδιότητας") – ελέγχει εάν το στοιχείο έχει το καθορισμένο χαρακτηριστικό. Εάν το στοιχείο έχει το χαρακτηριστικό που ελέγχεται, τότε αυτή τη μέθοδοεπιστρέφει true, διαφορετικά false.
• .getAttribute("όνομα_ιδιότητας") – παίρνει την τιμή του χαρακτηριστικού. Εάν το στοιχείο δεν έχει το καθορισμένο χαρακτηριστικό, τότε αυτή η μέθοδος επιστρέφει μια κενή συμβολοσειρά ("") ή null .
• .setAttribute("όνομα_ιδιότητας", "τιμή_ιδιότητας") – ορίζει το καθορισμένο χαρακτηριστικό με την καθορισμένη τιμή στο στοιχείο. Εάν το στοιχείο έχει το καθορισμένο χαρακτηριστικό, τότε αυτή η μέθοδος απλώς θα αλλάξει την τιμή του.
• .removeAttribute("όνομα_ιδιότητας") - αφαιρεί το καθορισμένο χαρακτηριστικό από το στοιχείο.

Ας δούμε παραδείγματα.

Ένα πολύ ενδιαφέρον παράδειγμα με το χαρακτηριστικό value.

Παράδειγμα με το χαρακτηριστικό value var name = document.querySelector("input"); // λάβετε το στοιχείο

Ας πάρουμε την τιμή του χαρακτηριστικού value και την τιμή της ιδιότητας DOM:

// λάβετε την τιμή του χαρακτηριστικού value του στοιχείου name.getAttribute("value"); // "Bob" // λάβετε την τιμή της τιμής της ιδιότητας DOM name.value; // "Bob" // ενημερώστε την τιμή του χαρακτηριστικού value, ορίστε το σε μια νέα τιμή name.setAttribute("value", "Tom"); // "Tom" // λάβετε την τιμή της τιμής της ιδιότητας DOM name.value; // "Τομ"

Αυτό το παράδειγμα δείχνει ότι όταν αλλάζει το χαρακτηριστικό value, το πρόγραμμα περιήγησης αλλάζει αυτόματα την ιδιότητα DOM τιμής ανάλογα.

Τώρα ας κάνουμε το αντίθετο, δηλαδή, να αλλάξουμε την τιμή της ιδιότητας DOM και να ελέγξουμε αν αλλάζει η τιμή του χαρακτηριστικού:

// ορίστε μια νέα τιμή για την τιμή της ιδιότητας DOM name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Αυτό το παράδειγμα δείχνει ότι η αλλαγή μιας ιδιότητας DOM δεν οδηγεί πάντα σε αντίστοιχη αλλαγή στο χαρακτηριστικό. Εκείνοι. Σε αυτήν την περίπτωση, η αλλαγή της ιδιότητας DOM της τιμής δεν αλλάζει το αντίστοιχο χαρακτηριστικό της.

Το ίδιο θα συμβεί όταν ο χρήστης εισάγει κείμενο σε αυτό το πεδίο. Η τιμή της ιδιότητας DOM θα περιέχει την πραγματική τιμή και το αντίστοιχο χαρακτηριστικό θα περιέχει την αρχική τιμή ή αυτή που ορίσαμε, για παράδειγμα, χρησιμοποιώντας τη μέθοδο setAttribute.

Αυτό το παράδειγμα δείχνει ότι είναι πιο σωστό να εργάζεστε πάντα με ιδιότητες DOM και πρέπει να έχετε πρόσβαση στο χαρακτηριστικό μόνο όταν είναι πραγματικά απαραίτητο.

Ακόμη και στην περίπτωση που πρέπει να λάβετε την αρχική τιμή που ορίσαμε σε HTML, μπορείτε να χρησιμοποιήσετε την ιδιότητα. Η ιδιότητα που περιέχει την αρχική τιμή του χαρακτηριστικού value ονομάζεται defaultValue .

Name.defaultValue; //Κάποιος

Ένα άλλο πολύ ενδιαφέρον παράδειγμα, αλλά τώρα με την ιδιότητα href.

Παράδειγμα με το χαρακτηριστικό href

Ένα παράδειγμα όπου πρέπει να λάβουμε την τιμή του συνδέσμου όπως ορίστηκε στο HTML.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // πλήρης διεύθυνση URL, για παράδειγμα: http://localhost/page2.html

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

Επομένως, εάν πρέπει να λάβουμε αυτό που υπάρχει στο χαρακτηριστικό, τότε σε αυτήν την περίπτωση δεν μπορούμε να κάνουμε χωρίς τη μέθοδο getAttribute.

Τέλος, ας δούμε το επιλεγμένο χαρακτηριστικό.

Παράδειγμα με το επιλεγμένο χαρακτηριστικό

Ένα παράδειγμα που δείχνει πώς μπορείτε να λάβετε την τιμή της επιλεγμένης επιλογής:

χωρίς βαθμολογία 1 2 3 4 5 // λάβετε το στοιχείο επιλογής var mark = document.querySelector("#mark"); // 1 way mark.querySelector("option:checked").value; // Μέθοδος 2 mark.value;

Ένα παράδειγμα που δείχνει πώς μπορείτε να λάβετε τις επιλεγμένες τιμές επιλογής σε ένα επιλεγμένο στοιχείο:

χωρίς βαθμολογία 1 2 3 4 5 // λάβετε το στοιχείο επιλογής var mark = document.querySelector("#mark"); // Μέθοδος 1 (δημιουργώντας έναν πίνακα και γεμίζοντας τον με τις τιμές των επιλεγμένων επιλογών) var arr = ; για (var i = 0, μήκος = σημάδι.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)

Ένας άλλος τρόπος εργασίας με χαρακτηριστικά (η ιδιότητα των χαρακτηριστικών)

Στο JavaScript, κάθε στοιχείο έχει μια ιδιότητα χαρακτηριστικών, η οποία μπορεί να χρησιμοποιηθεί για την ανάκτηση όλων των ιδιοτήτων του ως αντικείμενο NamedNodeMap.

Αυτή η μέθοδοςμπορεί να χρησιμοποιηθεί όταν χρειάζεται, για παράδειγμα, να επαναλάβετε όλα τα χαρακτηριστικά ενός στοιχείου.

Ένα χαρακτηριστικό αυτής της συλλογής είναι προσβάσιμο από το ευρετήριό του ή χρησιμοποιώντας τη μέθοδο στοιχείου. Τα χαρακτηριστικά σε αυτήν τη συλλογή υπολογίζονται από το 0.

Για παράδειγμα, ας εμφανίσουμε όλα τα χαρακτηριστικά ενός συγκεκριμένου στοιχείου στην κονσόλα:

ΛΑΤΡΕΥΩ ΤΟ JAVASCRIPT

// λάβετε το στοιχείο από το αναγνωριστικό του μήνυμα var message = document.querySelector("#message"); // να πάρει τα χαρακτηριστικά του var attrs = message.attributes; // περάστε από όλα τα χαρακτηριστικά χρησιμοποιώντας έναν βρόχο (attrs.length – αριθμός χαρακτηριστικών) για (var i = 0, μήκος = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "πληροφορίες"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

Επιπλέον, μπορείτε επίσης να εργαστείτε με αυτήν τη συλλογή χρησιμοποιώντας τις ακόλουθες μεθόδους:

• .getNamedItem("όνομα_ιδιότητας") – παίρνει την τιμή του καθορισμένου χαρακτηριστικού (αν το καθορισμένο χαρακτηριστικό δεν υπάρχει στο στοιχείο, τότε το αποτέλεσμα θα είναι μηδενικό).
• .setNamedItem("attribute_node") – προσθέτει ένα νέο χαρακτηριστικό σε ένα στοιχείο ή ενημερώνει την τιμή ενός υπάρχοντος. Για να δημιουργήσετε ένα χαρακτηριστικό, πρέπει να χρησιμοποιήσετε τη μέθοδο document.createAttribute(), στην οποία πρέπει να μεταβιβαστεί το όνομα του χαρακτηριστικού ως παράμετρος. Στη συνέχεια, στο χαρακτηριστικό που δημιουργήθηκε πρέπει να εκχωρηθεί μια τιμή χρησιμοποιώντας την ιδιότητα τιμή.
• .removeNamedItem("όνομα_ιδιότητας") – αφαιρεί το καθορισμένο χαρακτηριστικό από ένα στοιχείο (επιστρέφει το χαρακτηριστικό που έχει αφαιρεθεί ως αποτέλεσμα).

Ένα παράδειγμα εργασίας με χαρακτηριστικά μέσω των μεθόδων getNamedItem, setNamedItem και removeNamedItem:

ΛΑΤΡΕΥΩ ΤΟ JAVASCRIPT

// λάβετε το στοιχείο από το αναγνωριστικό του μήνυμα var message = document.querySelector("#message"); // να πάρει τα χαρακτηριστικά του var attrs = message.attributes; // Εργασία Νο. 1. Λάβετε την τιμή του χαρακτηριστικού id console.log(attrs.getNamedItem("id")); // Εργασία Νο. 2. Ορίστε το χαρακτηριστικό (αν υπάρχει, αλλάξτε την τιμή του, διαφορετικά προσθέστε ένα νέο) // δημιουργήστε το χαρακτηριστικό στυλ και αποθηκεύστε το στη μεταβλητή attrStyle var attrStyle = document.createAttribute("style"); // εκχωρήστε μια τιμή στο χαρακτηριστικό χρησιμοποιώντας την ιδιότητα τιμής attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

Καθήκοντα

• Εκτυπώστε στην κονσόλα όλα τα στοιχεία εγγράφου που έχουν το χαρακτηριστικό id.
• Προσθέστε ένα χαρακτηριστικό τίτλου σε όλες τις εικόνες στη σελίδα εάν δεν έχουν αυτό το χαρακτηριστικό. Ορίστε την τιμή του χαρακτηριστικού ίση με την τιμή του χαρακτηριστικού alt.