DOM. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "DOM. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών"

Ανυβις Ἰούλιος Μπότσαρης
8 χρόνια πριν
Προβολές:

1 DOM Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

2 Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναφέρεται ρητώς.

3 Στόχος της ώρας Εξοικείωση με το DOM Δέντρο DOM: Διάσχιση Τροποποίηση Παραδείγματα

4 Τι είναι το DOM Document Object Model Στάνταρ του W3C Ορίζει έναν τρόπο να έχουμε πρόσβαση στο HTML Είναι ανεξάρτητο γλώσσας προγραμματισμού libxml2 για C, C++, Python κ.α. Δεν είναι απαραίτητο για την εμφάνιση της σελίδας

5 Τι είναι το DOM Μία αναπαράσταση της σελίδας Μας προσφέρει μεθόδους για Διάβασμα δεδομένων του εγγράφου Αλλαγή δεδομένων του εγγράφου Αλλαγή δομής του εγγράφου

6 DOM δέντρο Κατασκευάζεται όταν φορτώνει η σελίδα Δε μπορούμε να το χρησιμοποιήσουμε πριν τελειώσει το φόρτωμα της σελίδας Αποτελείται από DOM Nodes

7 DOM δέντρο Το DOM δέντρο έχει περισσότερα στοιχεία από το HTML δέντρο Ένα στοιχείο μπορεί να περιέχει Άλλα στοιχεία Κομμάτια κειμένου

8 HTML δέντρο <html> <body> </body> </html> Hello, world!

9 DOM δέντρο document Document Node html Element Node body p Hello, strong world! Text Node

10 Αναπαράσταση DOM Κάθε στοιχείο HTML αναπαριστάται με ένα μοναδικό αντικείμενο Υπάρχουν αντικείμενα DOM που δεν αντιστοιχούν σε στοιχείο HTML

11 Nodes Κάθε στοιχείο HTML είναι ένα Element Node Κάθε κομμάτι κειμένου στο HTML είναι ένα TextNode Τα HTML σχόλια είναι Comment Nodes

12 Text Nodes Ένα κομμάτι κειμένου του εγγράφου Element Node this is a text node Element Node Text Node Element Node hello, world! Text Node Text Node

13 Τι nodes βλέπτε; Element Node Element Node nodes, how to they work? Text Node Text Node Text Node* *Περιέχει μόνο ένα space!

14 Ιδιότητες των Node x.nodename Περιέχει το όνομα του Node Για Text Nodes είναι #text Για Element Nodes είναι το όνομα τις ετικέτας Η ετικέτα είναι ή σε μικρά ή σε κεφαλαία ανάλογα με τον browser

15 Ιδιότητες των Node x.nodevalue Περιέχει την τιμή του Node Για Text Nodes είναι το String με το κείμενο του Node Για Element Nodes είναι null

16 Διάσχιση του DOM Σε κάθε Node έχουμε μεθόδους και ιδότητες για να διασχίσουμε το DOM δέντρο Με αυτό τον τρόπο βρίσκουμε το στοιχείο που θέλουμε Ως βάση έχουμε το document.body

17 Παιδιά x.childnodes Είναι ένας πίνακας Περιέχει όλα τα παιδιά του στοιχείου x Το πρώτο παιδί είναι το στοιχείο 0 Το μήκος του είναι x.childnodes.length

18 Παιδιά <body> Hello, world </body> document.body.childnodes[ 0 ] Hello, document.body.childnodes[ 1 ]

19 Ειδικά παιδιά x.firstchild Περιέχει το πρώτο παιδί του x ή null αν δεν έχει παιδιά x.lastchild Περιέχει το τελευταίο παιδί του x ή null αν δεν έχει παιδιά

20 Ειδικά Παιδιά <body> Hello, world </body> document.body.firstchild Hello, document.body.lastchild document.body.lastchild.firstchild world

21 Πατέρας x.parentnode Περιέχει τον πατέρα του x Είναι σίγουρα Element Node

22 Αδέλφια x.nextsibling Περιέχει το επόμενο Node από τα παιδιά του πατέρα του x

23 Αδέλφια x.previoussibling Περιέχει το προηγούμενο Node από τα παιδιά του πατέρα του x

24 Απευθείας μετάβαση Μέθοδοι σε κάθε Element Node Αντί για μεγάλες δύσχρηστες αλυσίδες από childnodes[ ].childnodes Πηγαίνουμε κατευθείαν στο στοιχείο ανεξάρτητα από τη δομή του δέντρου

25 Απευθείας μετάβαση x.getelementbyid( id ) Επιστρέφει το στοιχείο που έχει id id και είναι απόγονος του x Μειονέκτημα Σε κάθε στοιχείο που μας ενδιαφέρει χρειάζεται ξεχωριστό id

26 Απευθείας μετάβαση x.getelementsbytagname( ετικέτα ) Επιστρέφει ένα πίνακα με τους απογόνους του x που έχουν ετικέτα ετικέτα

27 Ιδιότητες HTML x.getattribute( ιδιότητα ) Μέθοδος σε κάθε DOM ElementNode Επιστρέφει την τιμή της ιδιότητας σε string

28 Ιδιότητες HTML x.setattribute( ιδιότητα, τιμή ) Μέθοδος σε κάθε DOM ElementNode Θέτει την ιδιότητα και την τιμή της στο Node που αναφέρεται

29 Τιμές πεδίου x.value Περιέχει την τιμή της ιδιότητας value Είναι ορισμένο μόνο σε ετικέτες input textarea select

30 CSS μέσω του DOM x.style Αντιπροσωπεύει τους CSS κανόνες που είναι inline στο στοιχείο Είναι ένα αντικείμενο Περιέχει κάθε CSS ιδιότητα

31 CSS μέσω του DOM Οι ιδιότητες του.style έχουν ίδιο όνομα με τις αντίστοιχες CSS με μία διαφορά Οι παύλες παλείπονται και το επόμενο γράμμα είναι κεφαλαίο background-color x.style.backgroundcolor border x.style.border list-style-type x.style.liststyletype

32 Προσοχή! Η ιδιότητα style δε περιέχει CSS κανόνες που προκύτπουν από εξωτερικά CSS Οι CSS κανόνες του style έχουν την μέγιστη και ίδια ειδικότητα με τους inline κανόνες Η ιδιότητα style δε μπορεί να τεθεί ένα string x.style = color: black

33 Δημιουργία Node Δημιουργούμε Node με την συνάρτηση document.createelement( ετικέτα ) Φτιάχνει μία ετικέτα και μας δίνει την DOM αναπαράστασή της Δεν ανήκει στο DOM έγγραφο ακόμα Το parentnode του είναι ορισμένο σε null

34 Δημιουργία Node var p = document.createelement( p ); Το p περιέχει την DOM αναπαράσταση μία παραγράφου

35 Δημιουργία TextNode document.createtextnode( δεδομένα ); Δημιουργεί ένα textnode που περιέχει τα δεδομένα

36 Δημιουργία textnode var data = document.createtextnode( Test data ); Το data περιέχει τη DOM αναπαράσταση του κειμένου Test data

37 Πρόσθεση παιδιών x.appendchild( y ) Προσθέτει το y ως τελευταίο παιδί του x

38 Πρόσθεση παιδιών test data var p = document.createelement( p ); var data = document.createtextnode( Test data ); p.appendchild( data ); document.body.appendchild( p );

39 Πρόσθεση παιδιών x.insertbefore( y, z ); Βάζει το y ως παιδί του x στη θέση πριν το παιδί z x.insertbefore( y, x.firstchild ); Βάζει το y ως πρώτο παιδί του x

40 Αντικατάσταση παιδιών x.replacechild( νέο, παλιό ); Ορίζει το Node νέο να είναι παιδί του x στη θέση του παλιού

41 Διαγραφή παιδιών x.removechild( y ); Διαγράφει το στοιχείο y από παιδί του x

42 Μάθαμε Χρήση DOM για: Πρόσβαση (ανάγνωση) HTML σελίδας Προσθήκη κόμβων Διαγραφή κόμβων Επεξεργασία ιδιοτήτων και περιεχομένου

43 Τελική εργασία Ομάδες 3+ ατόμων Δήλωση ομάδων στο Μέχρι 8 Ιανουαρίου Στείλτε μας μία έκδοση που να δουλεύει Μέχρι αρχές Φεβρουαρίου Θα έχετε την ευκαιρία να την βελτιώσετε Πλήρης web υπηρεσία Μας στέλνετε Κώδικα + URL όπου μπορούμε να την δούμε Μοιραστείτε στο forum επιλογές hosting Αρχές Φεβρουαρίου οι καλύτερες θα παρουσιαστούν

44 Καλά χριστούγεννα

45 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα» του ΕΜΠ έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους.

Σχετικά έγγραφα

DOM. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

DOM. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ DOM Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ Σηόρνο ηεο ώξαο Δμνηθείωζε κε ην DOM Γέληξν DOM: Γηάζρηζε Τξνπνπνίεζε