15 μέθοδοι JavaScript για χειρισμό DOM για προγραμματιστές Web

var ele = document.querySelector (επιλογέας);

επιλέγεται με το querySelector () και το χρώμα του αλλάζει σε κόκκινο χρώμα.

 
πρώτο εδάφιο
 
παράγραφος 2
 
div
 
παράγραφος 3
 
δύο
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'κόκκινο'; 

Διαδραστική επίδειξη

Δοκιμάστε το querySelector () στην ακόλουθη διαδραστική επίδειξη. Απλά πληκτρολογήστε έναν επιλογέα που ταιριάζει με αυτούς που μπορείτε να βρείτε μέσα στα μπλε κουτιά (π.χ.. #τρία) και κάντε κλικ στο κουμπί Επιλογή. Σημειώστε ότι εάν πληκτρολογείτε .ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, μόνο την πρώτη του εμφάνιση θα επιλεγεί.

2. querySelectorAll ()

Διαφορετικός querySelector () που επιστρέφει μόνο την πρώτη εμφάνιση όλων των στοιχείων αντιστοίχισης, querySelectorAll () επιστρέφει όλα τα στοιχεία που ταιριάζουν με τον καθορισμένο επιλογέα CSS.

Τα στοιχεία αντιστοίχισης επιστρέφονται ως a NodeList αντικείμενο που θα είναι ένα κενό αντικείμενο αν δεν βρεθούν στοιχεία ταυτοποίησης.

Σύνταξη

var eles = document.querySelectorAll (επιλογέας);

• ες - ΕΝΑ NodeList αντικείμενο με όλα τα στοιχεία αντιστοίχισης ως τιμές ιδιοτήτων. Το αντικείμενο είναι κενό αν δεν βρεθούν καμιά αντιστοιχία.
• εκλέκτορας - έναν ή περισσότερους επιλογείς CSS, όπως π.χ. "# fooId", ".fooClassName", ".class1.class2", ή ".class1, .class2"

Παράδειγμα κώδικα

Το παρακάτω παράδειγμα χρησιμοποιεί το ίδιο HTML με το προηγούμενο. Ωστόσο, σε αυτό το παράδειγμα, όλες οι παράγραφοι επιλέγονται με querySelectorAll (), και είναι μπλε χρώματος.

 
πρώτο εδάφιο
 
παράγραφος 2
 
div
 
παράγραφος 3
 
δύο
 

 var παράγραφο = document.querySelectorAll ('p'); για (var p των παραγράφων) p.style.color = 'μπλε'; 

3. addEventListener ()

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

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

Αν foo () είναι μια προσαρμοσμένη λειτουργία, μπορείτε να την καταχωρήσετε ως ακροατής συμβάντος κλικ (ονομάστε το όταν πατάτε το κουμπί) με τρεις τρόπους:

1.  Συναγερμός

2.  var btn = document.querySelector ('κουμπί'); btn.onclick = foo;

3.  var btn = document.querySelector ('κουμπί'); btn.addEventListener ('κλικ', foo);

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

Σύνταξη

ele.addEventListener (evt, ακροατής, [επιλογές])?

• εαυτών - Το στοιχείο HTML που θα ακούει ο ακροατής του συμβάντος.
• evt - Το στοχευόμενο συμβάν.
• ακροατής - Συνήθως, μια συνάρτηση JavaScript.
• επιλογές - (προαιρετικό) Ένα αντικείμενο με σύνολο ιδιοτήτων boolean (που αναφέρονται παρακάτω).

Επιλογές	Τι συμβαίνει, όταν έχει ρυθμιστεί αληθής?
πιάνω	Σταματά τη διοχέτευση συμβάντων, δηλ. Αποτρέπει την κλήση οποιουδήποτε ακροατηρίου συμβάντος για τον ίδιο τύπο συμβάντος στους προγόνους του στοιχείου. Για να χρησιμοποιήσετε αυτή τη λειτουργία, μπορείτε να χρησιμοποιήσετε 2 σύνταξη: ele.addEventListener (evt, ακροατής, αληθές) ele.addEventListener (evt, ακροατής, σύλληψη: true),
μια φορά	Ο ακροατής καλείται μόνο την πρώτη φορά που συμβαίνει το συμβάν, τότε αποσπάται αυτόματα από το συμβάν και δεν θα ενεργοποιηθεί πλέον.
παθητικός	Η προεπιλεγμένη ενέργεια του συμβάντος δεν μπορεί να διακοπεί με τη μέθοδο prevenDefault ().

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, προσθέτουμε έναν ακροατή συμβάντος κλικ που ονομάζεται foo, στο Ετικέτα HTML.

Κάντε κλικ στο με

 var btn = document.querySelector ('κουμπί'); btn.addEventListener ('κλικ', foo); συνάρτηση foo () alert ('hello'); 

Διαδραστική επίδειξη

Εκχωρήστε το foo () προσαρμοσμένη λειτουργία ως ακροατής εκδήλωσης σε οποιοδήποτε από τα ακόλουθα τρία συμβάντα: εισαγωγή, Κάντε κλικ ή ποντίκι & ενεργοποιήστε το επιλεγμένο συμβάν στο κάτω πεδίο εισαγωγής, τοποθετώντας το δείκτη του ποντικιού, κάνοντας κλικ ή πληκτρολογώντας το.

4. removeEventListener ()

ο removeEventListener () μέθοδος αποσυνδέει έναν ακροατή της εκδήλωσης προστέθηκε προηγουμένως με το addEventListener () μέθοδος από το γεγονός που ακούει.

Σύνταξη

ele.removeEventListener (evt, ακροατής, [επιλογές])?

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

Παράδειγμα κώδικα

Μετά το παράδειγμα κώδικα χρησιμοποιήσαμε το addEventListener (), εδώ αφαιρούμε τον ακροατή συμβάντος κλικ που ονομάζεται foo από το στοιχείο.

 btn.removeEventListener ('κλικ', foo);

5. createElement ()

ο createElement () μέθοδος δημιουργεί ένα νέο στοιχείο HTML χρησιμοποιώντας το όνομα της ετικέτας HTML να δημιουργηθεί, όπως 'Π' ή 'div'.

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

Σύνταξη

document.createElement (tagName);

• tagName - Το όνομα της ετικέτας HTML που θέλετε να δημιουργήσετε.

Παράδειγμα κώδικα

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

var pEle = document.createElement ('p')

6. appendChild ()

ο appendChild () μέθοδος προσθέτει ένα στοιχείο ως το τελευταίο παιδί στο στοιχείο HTML που επικαλείται αυτή τη μέθοδο.

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

Σύνταξη

ele.appendChild (childEle)

• εαυτών - Το στοιχείο HTML στο οποίο childEle προστίθεται ως το τελευταίο της παιδί.
• childEle - Το στοιχείο HTML που προστέθηκε ως το τελευταίο παιδί του εαυτών.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, εισάγουμε a στοιχείο είναι το παιδί ενός

χρησιμοποιώντας το στοιχείο appendChild () και τα προαναφερθέντα createElement () μεθόδων.

 var div = document.querySelector ('div'); var strong = document.createElement ('ισχυρό'); strong.textContent = 'Γεια σας'; div.appendChild (ισχυρό);

Διαδραστική επίδειξη

Στο ακόλουθο διαδραστικό demo, γράμματα από το #ένα προς το # r είναι τα παιδικά στοιχεία του # parent-one, # parent-two, και # parent-three id.

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

7. removeChild ()

ο removeChild () μέθοδος καταργεί ένα συγκεκριμένο παιδικό στοιχείο από το στοιχείο HTML που καλεί αυτή τη μέθοδο.

Σύνταξη

ele.removeChild (childEle)

• εαυτών - Το γονικό στοιχείο του childEle.
• childEle - Το παιδικό στοιχείο του εαυτών.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, αφαιρούμε το στοιχείο που προσθέσαμε ως παιδί στο

ετικέτα στο παράδειγμα κώδικα για το προηγούμενο appendChild () μέθοδος.

div.removeChild (ισχυρό);

8. replaceChild ()

ο replaceChild () μέθοδος αντικαθιστά ένα παιδικό στοιχείο με ένα άλλο που ανήκει στο γονικό στοιχείο που καλεί αυτή τη μέθοδο.

Σύνταξη

ele.replaceChild (newChildEle, oldChileEle)

• εαυτών - Το γονικό στοιχείο από το οποίο πρέπει να αντικατασταθούν τα παιδιά.
• newChildEle - Παιδικό στοιχείο του εαυτών που θα αντικαταστήσει oldChildEle.
• oldChildEle - Παιδικό στοιχείο του εαυτών, που θα αντικατασταθεί από newChildEle.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα το στοιχείο του παιδιού που ανήκουν στο

γονικού στοιχείου αντικαθίσταται από ένα νεοσυσταθέν ετικέτα.

 
 γεια σας 

 var em = document.createElement ('em'); var strong = document.querySelector ('ισχυρό'); var div = document.querySelector ('div'); em.textContent = 'γεια'; div.replaceChild (em, ισχυρό);

9. cloneNode ()

Όταν πρέπει να δημιουργήσετε ένα νέο στοιχείο που πρέπει να είναι το ίδιο με ένα ήδη υπάρχον στοιχείο στην ιστοσελίδα, μπορείτε απλά δημιουργήστε ένα αντίγραφο του ήδη υπάρχοντος στοιχείου χρησιμοποιώντας το cloneNode () μέθοδος.

Σύνταξη

var dupeEle = ele.cloneNode ([βαθιά])

• dupeEle - Αντίγραφο του εαυτών στοιχείο.
• εαυτών - Το στοιχείο HTML που πρόκειται να αντιγραφεί.
• βαθύς - (προαιρετικό) Μια τιμή boolean. Αν έχει ρυθμιστεί αληθής, dupeEle θα έχει όλα τα παιδικά στοιχεία εαυτών έχει, αν έχει ρυθμιστεί ψευδής θα κλωνοποιηθεί χωρίς τα παιδιά του.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, δημιουργούμε ένα αντίγραφο για το στοιχείο με cloneNode (), τότε το προσθέτουμε στο

ετικέτα ως παιδικό στοιχείο με τα προαναφερθέντα appendChild () μέθοδος.

Σαν άποτέλεσμα,

θα περιέχει δύο στοιχεία, και τα δύο με το γεια σας ως περιεχόμενο.

 
 γεια σας 

 var strong = document.querySelector ('ισχυρό'); var αντίγραφο = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (αντίγραφο); 

10. insertBefore ()

ο insertBefore () μέθοδος προσθέτει ένα συγκεκριμένο παιδικό στοιχείο πριν από ένα άλλο παιδικό στοιχείο. Η μέθοδος ονομάζεται από το γονικό στοιχείο.

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

Σύνταξη

ΕΛΛΗΝΙΚΑ

• εαυτών - Στοιχείο γονέα.
• newEle - Δημιουργία νέου στοιχείου HTML.
• ΑΝΑΚΑΛΥΨΤΕ - Ένα παιδικό στοιχείο του εαυτών πριν από αυτό newEle θα εισαχθεί.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, δημιουργούμε ένα νέο στοιχείο με κάποιο κείμενο μέσα και προσθέστε το πριν ο στοιχείο μέσα στο

γονικό στοιχείο.

 
 γεια σας 

 var em = document.createElement ('em'); var strong = document.querySelector ('ισχυρό'); var div = document.querySelector ('div'); em.textContent = 'γεια'; div.insertBefore (em, ισχυρό); 

Διαδραστική επίδειξη

Αυτό το διαδραστικό demo λειτουργεί παρόμοια με το προηγούμενο demo που ανήκει στο appendChild () μέθοδος. Εδώ χρειάζεται μόνο να πληκτρολογήσετε τους επιλογείς ταυτότητας δύο παιδικών στοιχείων (από το #ένα προς το # r) στα πλαίσια εισαγωγής και μπορείτε να δείτε πώς insertBefore () η μέθοδος μετακινεί το πρώτο καθορισμένο παιδί πριν το δεύτερο.

11. createDocumentFragment ()

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

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

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

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

Σύνταξη

document.createDocumentFragment ()

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, δημιουργούμε πολλές γραμμές και κελιά πίνακα με το createElement () μέθοδο, στη συνέχεια, προσθέστε τους σε ένα DocumentFragment αντικείμενο, προσθέστε τελικά το κομμάτι του εγγράφου σε HTML

χρησιμοποιώντας το appendChild () μέθοδος.

Ως αποτέλεσμα, μέσα στο τραπέζι θα εισαχθούν πέντε σειρές - καθένα από τα οποία περιέχει ένα κελί με αριθμό από 1 έως 5 ως περιεχόμενο -.

 var πίνακα = document.querySelector ("πίνακας"); var df = document.createDocumentFragment (); για (var i = 0 · i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Μερικές φορές θέλετε ελέγξτε τις τιμές ιδιότητας CSS ενός στοιχείου προτού προβείτε σε οποιεσδήποτε αλλαγές. Μπορείτε να χρησιμοποιήσετε το ele.style ιδιοκτησία να κάνει το ίδιο, ωστόσο το getComputedStyle () Μέθοδος έχει γίνει μόνο για το σκοπό αυτό, αυτό επιστρέφει τις υπολογιζόμενες τιμές μόνο για ανάγνωση όλων των ιδιοτήτων CSS ενός συγκεκριμένου στοιχείου HTML.

Σύνταξη

var στυλ = getComputedStyle (ele, [pseudoEle])

• στυλ - ΕΝΑ CSSStyleDeclaration αντικείμενο που επιστρέφεται με τη μέθοδο. Υποστηρίζει όλες τις ιδιότητες του CSS και τις τιμές του εαυτών στοιχείο.
• εαυτών - Το στοιχείο HTML του οποίου λαμβάνονται οι τιμές ιδιότητας CSS.
• pseudoEle - (προαιρετικό) Μια συμβολοσειρά που αντιπροσωπεύει ένα ψευδο-στοιχείο (για παράδειγμα, ':μετά'). Αν αυτό αναφέρεται, τότε οι ιδιότητες CSS του συγκεκριμένου ψευδο-στοιχείου που σχετίζονται με εαυτών θα επιστραφούν.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, παίρνουμε και ειδοποιούμε τα υπολογισμένα πλάτος αξία του α

χρησιμοποιώντας το στοιχείο getComputedStyle () μέθοδος.

 var στυλ = getComputedStyle (document.querySelector ('div')); ειδοποίηση (style.width); 

13. setAttribute ()

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

Σύνταξη

ele.setAttribute (όνομα, τιμή);

• εαυτών - Το στοιχείο HTML στο οποίο προστίθεται ένα χαρακτηριστικό ή το χαρακτηριστικό του οποίου είναι ενημερωμένο.
• όνομα - Το όνομα του χαρακτηριστικού.
• αξία - Η τιμή του χαρακτηριστικού.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, προσθέτουμε το ικανοποιημένοι αποδίδουν σε ένα

χρησιμοποιώντας το setAttribute () μέθοδο, η οποία θα μετατρέψει το περιεχόμενό του επεξεργάσιμο.

γεια σας

 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', ") 

14. getAttribute ()

ο getAttribute () μέθοδος επιστρέφει την τιμή ενός συγκεκριμένου χαρακτηριστικού που ανήκουν σε ένα συγκεκριμένο στοιχείο HTML.

Σύνταξη

ele.getAttribute (όνομα);

• εαυτών - Το στοιχείο HTML του οποίου ζητείται το χαρακτηριστικό.
• όνομα - Το όνομα του χαρακτηριστικού.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, ειδοποιούμε την αξία του ικανοποιημένοι χαρακτηριστικό που ανήκει στο

με τη βοήθεια του getAttribute () μέθοδος.

γεια σας

 var div = document.querySelector ('div'); alert (div.getAttribute ('contenteditable')) 

15. removeAttribute ()

ο removeAttribute () μέθοδος καταργεί ένα δεδομένο χαρακτηριστικό ενός συγκεκριμένου στοιχείου HTML.

Σύνταξη

ele.removeAttribute (όνομα);

• εαυτών - Το στοιχείο HTML του οποίου το χαρακτηριστικό πρόκειται να αφαιρεθεί.
• όνομα - Το όνομα του χαρακτηριστικού.

Παράδειγμα κώδικα

Σε αυτό το παράδειγμα, αφαιρούμε το ικανοποιημένοι χαρακτηριστικό από το

στοιχείο. Ως αποτέλεσμα, το

δεν θα είναι πλέον επεξεργάσιμη.

γεια σας

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

15 Μαθήματα Η τέχνη του πολέμου σας διδάσκει για τις μάχες που κερδίζουν τη ζωή

15 Βιβλιοθήκες Lightbox για κινητή ευαισθησία

15 ιδέες για να αγοράσετε ή να φτιάξετε το τέλειο γραφείο σας

Επόμενο άρθρο

15 jQuery προσθήκες για να κάνετε έξυπνα στοιχεία

Προηγούμενο άρθρο

15 Ενθάρρυνση βίντεο παρουσίασης εκκίνησης για επιχειρηματίες