Όντα Element HTML DOM

Ο κόμβος Element

Στο HTML DOM, το αντικείμενο Element αντιπροσωπεύει το στοιχείο HTML, όπως P, DIV, A, TABLE ή οποιοδήποτε άλλο στοιχείο HTML.

Ιδιότητες και Μεθόδοι

Οι παρακάτω ιδιότητες και μεθόδοι μπορούν να χρησιμοποιηθούν σε όλα τα στοιχεία HTML:

Ιδιότητες / Μέθοδοι Περιγραφή
accessKey Ρυθμίζει ή επιστρέφει την τιμή της ιδιότητας accesskey του στοιχείου.
addEventListener() Προσθέτει διαχειριστή γεγονότων στο στοιχείο.
appendChild() Προσθέτει νέο υποστοιχείο στο στοιχείο.
attributes Επιστρέφει τη λίστα των ιδιοτήτων του στοιχείου.
blur() Αφαιρεί την εστίαση από το στοιχείο.
childElementCount Επιστρέφει τον αριθμό των υποστοιχείων του στοιχείου.
childNodes Επιστρέφει τη λίστα των υποστοιχείων του στοιχείου.
children Επιστρέφει την συλλογή HTML των υποστοιχείων του στοιχείου.
classList Επιστρέφει το όνομα της κλάσης του στοιχείου.
className Ρυθμίζει ή επιστρέφει την τιμή της ιδιότητας class του στοιχείου.
click() Μιμείται κλικ του ποντικιού στο στοιχείο.
clientHeight Επιστρέφει το ύψος του στοιχείου, συμπεριλαμβανομένων των εσωτερικών περιθωρίων.
clientLeft Επιστρέφει το πλάτος της αριστεράς πλακέτας του στοιχείου.
clientTop Επιστρέφει το πλάτος της επάνω πλακέτας του στοιχείου.
clientWidth Επιστρέφει το πλάτος του στοιχείου, συμπεριλαμβανομένων των εσωτερικών περιθωρίων.
cloneNode() Αντιγράφει το στοιχείο.
closest() Αναζητεί τον πλησιέστερο στο δέντρο DOM στοιχείο που ταιριάζει με τον CSS επιλεκτήρα.
compareDocumentPosition() Συγκρίνει τη θέση των δύο στοιχείων στο έγγραφο.
contains() Επιστρέφει true αν ο κόμβος είναι απογονός του κόμβου.
contentEditable Ορίζει ή επιστρέφει αν το περιεχόμενο του στοιχείου είναι επεξεργαστέο.
dir Ορίζει ή επιστρέφει την τιμή της ιδιότητας dir του στοιχείου.
firstChild Επιστρέφει τον πρώτο υποστοιχείο του στοιχείου.
firstElementChild Επιστρέφει το πρώτο υποστοιχείο του στοιχείου.
focus() Δίνει εστίαση στο στοιχείο.
getAttribute() Επιστρέφει την τιμή της ιδιότητας του στοιχείου.
getAttributeNode() Επιστρέφει το στοιχείο ιδιότητας.
getBoundingClientRect() Επιστρέφει το μέγεθος του στοιχείου και τη θέση του σχετικά με το παράθυρο.
getElementsByClassName() Επιστρέφει τη συλλογή των υποστοιχείων με την καθορισμένη κλάση.
getElementsByTagName() Επιστρέφει τη συλλογή των υποστοιχείων με την καθορισμένη ετικέτα.
hasAttribute() Επιστρέφει true αν το στοιχείο έχει την καθορισμένη ιδιότητα.
hasAttributes() Επιστρέφει true αν το στοιχείο έχει οποιεσδήποτε ιδιότητες.
hasChildNodes() Επιστρέφει true αν το στοιχείο έχει οποιοδήποτε υποστοιχείο.
element.id Ορίζει ή επιστρέφει την τιμή της ιδιότητας id του στοιχείου.
innerHTML Ορίζει ή επιστρέφει το περιεχόμενο του στοιχείου.
innerText η ρύθμιση ή η επιστροφή του κειμένου του κόμβου και των απογόνων του
insertAdjacentElement() Εισάγει νέο στοιχείο HTML στην τοποθεσία του στοιχείου.
insertAdjacentHTML() Εισάγει κείμενο μορφοποιημένο ως HTML στην τοποθεσία του στοιχείου.
insertAdjacentText() Εισάγει κείμενο στην τοποθεσία του στοιχείου.
insertBefore() Εισάγει νέο υποστοιχείο πριν από το υπάρχον υποστοιχείο.
isContentEditable Επιστρέφει true αν το περιεχόμενο του στοιχείου είναι επεξεργαστέο.
isDefaultNamespace() Επιστρέφει true αν η δομημένη URI του namespace είναι η προεπιλεγμένη.
isEqualNode() Ελέγχει αν δύο στοιχεία είναι ίσα.
isSameNode() Ελέγχει αν δύο στοιχεία είναι ο同一ς κόμβος.
isSupported() Απόρριψη.
lang Ορίζει ή επιστρέφει την τιμή της ιδιότητας lang του στοιχείου.
lastChild Επιστρέφει τον τελευταίο υποεлемент του στοιχείου.
lastElementChild Return the last child element of the element.
matches Return true if the element matches the given CSS selector.
namespaceURI Return the namespace URI of the element.
nextSibling Return the next sibling at the same node tree level.
nextElementSibling Return the next element sibling at the same node tree level.
nodeName Return the name of the node.
nodeType Return the node type of the node.
nodeValue Set or return the value of the node.
normalize Merge adjacent text nodes within the element and remove empty text nodes.
offsetHeight Return the height of the element, including padding, border, and scrollbars.
offsetWidth Return the width of the element, including padding, border, and scrollbars.
offsetLeft Return the horizontal offset position of the element.
offsetParent Return the offset container of the element.
offsetTop Return the vertical offset position of the element.
outerHTML Set or return the content of the element (including start and end tags).
outerText Set or return the external text content of the node and its descendants.
ownerDocument Return the root element (document object) of the element.
parentNode Return the parent node of the element.
parentElement Return the parent element node of the element.
previousSibling Return the previous sibling at the same node tree level.
previousElementSibling Return the previous element sibling at the same node tree level.
querySelector Return the first child element that matches the CSS selector.
querySelectorAll Return all child elements that match the CSS selector.
remove Remove an element from the DOM.
removeAttribute Remove an attribute from the element.
removeAttributeNode Remove an attribute node and return the removed node.
removeChild Remove a child node from the element.
removeEventListener Remove the event handler attached using the addEventListener() method.
replaceChild Replace the child nodes within the element.
scrollHeight Return the total height of the element, including padding.
scrollIntoView η ρύθμιση του στοιχείου να κινείται στην ορατή περιοχή του browser window
scrollLeft η ρύθμιση ή η επιστροφή των pixel που γυρίζει ο περιεχόμενος του στοιχείου κάθετα
scrollTop η ρύθμιση ή η επιστροφή των pixel που γυρίζει ο περιεχόμενος του στοιχείου οριζόντια
scrollWidth η επιστροφή του συνολικού πλάτους του στοιχείου, συμπεριλαμβανομένων των εσωτερικών περιθωρίων
setAttribute() η ρύθμιση ή η αλλαγή της τιμής του attribute
setAttributeNode() η ρύθμιση ή η αλλαγή του attribute node
style η ρύθμιση ή η επιστροφή της τιμής της ιδιότητας style του στοιχείου
tabIndex η ρύθμιση ή η επιστροφή της τιμής της ιδιότητας tabIndex του στοιχείου
tagName η επιστροφή του τίτλου του στοιχείου
textContent η ρύθμιση ή η επιστροφή του κειμένου του κόμβου και των απογόνων του
title η ρύθμιση ή η επιστροφή της τιμής της ιδιότητας title του στοιχείου
toString() η μετατροπή του στοιχείου σε řetězec

το interface Element εξηγείται

το interface Element εκφράζει στοιχεία HTML, στοιχεία XML ή σημειώσεις. η ιδιότητα tagName καθορίζει το όνομα του στοιχείου. η ιδιότητα documentElement του Document αναφέρεται στο ρίζα Element του έγγραφου. η ιδιότητα body του HTMLDocument είναι παρόμοια, αναφέρεται στο στοιχείο <body> του έγγραφου. Για να βρείτε στοιχεία με συγκεκριμένο όνομα σε έγγραφο HTML, χρησιμοποιήστε το Document.getElementById() (και δώστε στο στοιχείο ένα μοναδικό όνομα μέσω της ιδιότητας id). Για να εντοπίσετε στοιχεία με το όνομα του σήματος, χρησιμοποιήστε το getElementsByTagName(), το οποίο είναι και μέθοδος του Element και του Document. Στο έγγραφο HTML, μπορείτε επίσης να χρησιμοποιήσετε τη μέθοδο HTMLDocument.getElementsByName() για να βρείτε στοιχεία με την ιδιότητα name. Τέλος, μπορείτε να δημιουργήσετε νέο στοιχείο Element που θα προστεθεί στο έγγραφο χρησιμοποιώντας τη μέθοδο Document.createElement().

το addEventListener() και το συγκεκριμένο για το IE substitute method attachEvent() παρέχουν την δυνατότητα εγγραφής λειτουργιών για συγκεκριμένους τύπους γεγονότων στο στοιχείο. Τεχνολογικά μιλώντας, το addEventListener() και το removeEventListener() και το dispatchEvent() ορίζονται από το interface EventTarget του 2ου επίπεδου DOM Events. Όλα τα Element αντικείμενα υλοποιούν το EventTarget.

Οι διάφορες άλλες μεθόδους αυτού του διασώματος παρέχουν πρόσβαση στις ιδιότητες του στοιχείου. Στο έγγραφο HTML (και σε πολλές έγγραφα XML), όλες οι ιδιότητες έχουν απλές τιμές字符串 και μπορείτε να χρησιμοποιήσετε απλές μεθόδους getAttribute() και setAttribute() για οποιαδήποτε επιθυμητή λειτουργία ιδιοτήτων.

Αν χρησιμοποιείτε έγγραφα XML, μπορεί να περιέχουν αναφορές entity ως μέρος της τιμής του ατριβούτου, θα πρέπει να χρησιμοποιήσετε το αντικείμενο Attr και τον κόμβο του υποδέντρου του. Μπορείτε να χρησιμοποιήσετε getAttributeNode() και setAttributeNode() για να αποκτήσετε και να ρυθμίσετε το αντικείμενο Attr για μια ατρύπτουτα, ή μπορείτε να περιηγηθείτε στον πίνακα attributes[] του διασώματος για να περιηγηθείτε στον κόμβο Attr. Αν χρησιμοποιείτε ένα έγγραφο XML με ονομαστικό χώρο, πρέπει να χρησιμοποιήσετε τις μεθόδους με ονομαστικό χώρο που ξεκινούν με "NS".

Στο επίπεδο 1 του κανονισμού DOM, η μέθοδος normalize() είναι μέρος της διεπαφής Element. Στο επίπεδο 2 του κανονισμού, η normalize() είναι μέρος της διεπαφής Node. Όλοι οι κόμβοι Element 继承 αυτήν τη μέθοδο και εξακολουθούν να μπορούν να τη χρησιμοποιούν.

Θέματα: Κόμβοι HTML DOM

Στο HTML DOM (μο델 αντικειμένων έγγραφου), κάθε τμήμα είναι κόμβος:

  • Το έγγραφο itself είναι κόμβος έγγραφου
  • Όλα τα στοιχεία του HTML είναι κόμβοι στοιχείων
  • Όλα τα ατριβούτα του HTML είναι κόμβοι ατριβούτων
  • Το κείμενο εντός των στοιχείων HTML είναι κόμβοι κειμένου
  • Τα σχόλια είναι κόμβοι σχολίου

Ο κόμβος Element

Στο HTML DOM, ο κόμβος Element αντιπροσωπεύει το στοιχείο HTML.

Ο κόμβος Element μπορεί να έχει υποκόμβους τύπου κόμβου στοιχείου, κόμβου κειμένου, ή κόμβου σχολίου.

Ο κόμβος NodeList αντιπροσωπεύει μια λίστα κόμβων, όπως η συλλογή των υποκόμβων των στοιχείων HTML.

Τα στοιχεία μπορεί να έχουν και ατριβούτα. Οι ατριβούτες είναι κόμβοι ατριβούτων (βλέπε την επόμενη ενότητα).