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

Με βάση το tag

Είναι δυνατό στην Javascript να μπορέσουμε να επιλέξουμε ένα DOM-αντικείμενο με βάση το tag του. Αν πρόκειται για χρήση της συγκεκριμένης ετικέτας μόνο σε ένα σημείο τότε αυτό που θα επιστραφεί θα είναι μόνο το συγκεκριμένο DOM-αντικείμενο. Αν όμως πρόκειται για μια συγκεκριμένη ετικέτα μέσα σε ένα πλήθος όμοιων ετικετών στην ίδια ιστοσελίδα, τότε επιστρέφεται ένας πίνακας με όλα τα DOM-αντικείμενα, και εμείς θα πρέπει να «ψάξουμε» μέσα σε αυτόν το συγκεκριμένο πίνακα το αντικείμενο που μας ενδιαφέρει. 

Ας δούμε πως μπορούμε να αποκτήσουμε πρόσβαση σε ένα DOM-Α έχοντας μοναδική ύπαρξη μέσα στην ιστοσελίδα ως tag:

Αρχείο: tagselector1.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχείο DOM-Α </title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <p>Αυτό είναι ένα <a id='mylink' href='http://www.google.gr/'>απλό</a> έγγραφο.</p>
 <script>
  var aobject = document.getElementsByTagName("a");
  console.log(aobject);
 </script>
 </body>
</html>

Αποτέλεσμα:

Προκειμένου να διαλέξουμε DOM-Α μέσα σε μια ιστοσελίδα βασιζόμενοι στο όνομα του tag χρησιμοποιούμε την ιδιότητα «getElementsByTagName("όνομα ετικέτας")», όπου μέσα στην παρένθεση μπαίνει το όνομα της ετικέτας που θέλουμε να επιλέξουμε. Επίσης είναι σημαντικό να χρησιμοποιούμε συντεταγμένες θέσεων προκειμένου να χρησιμοποιήσουμε αυτό που αναζητάμε, διαφορετικά δεν θα μπορέσουμε να αποκτήσουμε πρόσβαση σε αυτό. Στην παραπάνω περίπτωση μπορούμε να χρησιμοποιήσουμε το «[0]» ως συντεταγμένη, δείτε παρακάτω πως χρησιμοποιείται. Επιλογή αντικειμένου μέσα από πλήθος όμοιων tags:

Αρχείο: tagselector2.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-Α </title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <p>Πρώτη παράγραφος</p>
  <p>Δεύτερη παράγραφος <p>Τρίτη παράγραφος μέσα στην δεύτερη</p></p>
  <p>Τέταρτη παράγραφος</p>
 <script>
  var aobject = document.getElementsByTagName("p")[3];
  console.log(aobject);
 </script>
 </body>
</html>

Αποτέλεσμα:

Γίνεται η χρήση συντεταγμένης θέσης όπως θα γινόταν και σε έναν πίνακα. Έτσι το πρώτο «<p>» έχει την συντεταγμένη «0», το δεύτερο «1» και λοιπά. Εμείς θέλαμε την τέταρτη παράγραφο επομένως «3». Εδώ θα πρέπει να σημειώσουμε ότι δεν έχει σημασία το tag πως θα είναι γραμμένο, αν είναι δηλαδή με μικρά γράμματα γραμμένο ή με κεφαλαία ή και μικτά. Όταν καλούμε την συγκεκριμένη ιδιότητα του εγγράφου τότε η αναζήτηση γίνεται σε όλο το έγγραφο και επιστρέφονται όλα τα στοιχεία που ταιριάζουν στην αναζήτηση όποιο τρόπο γραφής και να έχουν. 

Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί και στα στοιχεία DOM-Α εκτός από το στοιχείο-ρίζα του document. Η διαφορά είναι ότι πλέον όταν επιλέγεται να γίνει αναζήτηση μέσα σε ένα DOM-Α η αναζήτηση γίνεται από αυτό το στοιχείο και κάτω, δηλαδή στα παιδιά του τα εγγόνια του τα δισέγγονα του κτλ. Σαν να γίνεται αυτό το στοιχείο για την συγκεκριμένη αναζήτηση το στοιχείο-ρίζα. Ένα σύντομο παράδειγμα με βάση το αρχείο «tagselector1.html» είναι:

Αρχείο: tagselector3.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-Α </title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <p>Πρώτη <a href='http://www.learncode.gr/'>παράγραφος</a></p>
  <p>Δεύτερη παράγραφος <p>Τρίτη παράγραφος μέσα στην δεύτερη</p></p>
  <p>Τέταρτη παράγραφος</p>
 <script>
  var object1 = document.getElementsByTagName("p")[0];
  var object2 = object1.getElementsByTagName("a")[0];
  console.log(object2);
 </script>
 </body>
</html>

Το οποίο θα μας δώσει ως αποτέλεσμα:

Με βάση το id

Αν θέλουμε να προσπελάσουμε αντικείμενα ένα προς ένα, τότε στηριζόμαστε σε κάποιο γνώρισμα του αντικειμένου που θέλουμε να εξετάσουμε και που το κάνει να διαφέρει από τα άλλα αντικείμενα, όπως για παράδειγμα ένα μοναδικό id, μια μοναδική class ή γενικώς ένα attribute με μοναδικό περιεχόμενο. Ένα απλό παράδειγμα id σε ένα html αντικείμενο: 

<a id='mylink' href='http://www.google.gr/'>απλό</a>

Το αντικείμενο μας στην προκειμένη περίπτωση είναι το «a», όπου ως γνωρίσματα διαθέτει το «id» με τιμή «mylink», και το «href», με τιμή «http://www.google.gr/».

Για να επιλέξουμε το συγκεκριμένο αντικείμενο μέσα από μια HTML σελίδα χρησιμοποιώντας ιδιότητες Javascript θα κάνουμε χρήση της εντολής «getElementById("mylink")», μέσα στην παρένθεση μπαίνει το όνομα του id που θέλουμε να διαλέξουμε, στην προκειμένη «mylink». Επιλέγοντας το συγκεκριμένο αντικείμενο μπορούμε να προσπελάσουμε τα γνωρίσματα του σαν ιδιότητες μεταβλητής, πχ το «href» του «<a>» στην σελίδα, μπορεί να γίνει «link.href» ιδιότητα μιας μεταβλητής με όνομα «link». Ας δούμε ένα παράδειγμα:

Αρχείο: idselector.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-A Id</title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <p>Αυτό είναι ένα <a id='mylink' href='kati'>απλό</a> έγγραφο.</p>
 </body>
 <script>
  var link = document.getElementById("mylink");
  var url = link.href;
  link.id='mylink2';
  console.log(link);
 </script>
</html>

Αποτέλεσμα:

Ο κώδικας javascript μας, επέλεξε το συγκεκριμένο αντικείμενο με id «mylink2» δημιουργώντας την μεταβλητή «link» που σε αυτήν καταχωρήθηκε το αντικείμενο, και ύστερα προσπελάστηκε από αυτήν την μεταβλητή το γνώρισμα «id» ως ιδιότητα αλλάζοντας του τιμή.

Με βάση την css κλάση

Το να επιλέξει κάποιος ένα DOM-Α με βάση την CSS κλάση του είναι πολύ εύκολο, αρκεί να γνωρίζει την αντίστοιχη κλάση. Εννοείται πως εάν υπάρχει μόνο ένα DOM-Α θα επιστραφεί μόνο αυτό, ενώ αν υπάρχουν πολλά με την ίδια κλάση ανεξαρτήτως αν έχουν ίδιο tag ή όχι θα επιστραφούν όλα σε μορφή πίνακα. Η κλάση ενός DOM-Α tag αναφέρεται στο γνώρισμα «class» που έχουν τα tags στην HTML και μπορούν να εκμεταλλευτούν οι μορφοποιήσεις CSS προκειμένου να μορφοποιήσουν κατάλληλα το στοιχείο με αυτό το «class». Για να επιτευχθεί η επιλογή χρησιμοποιείται η ιδιότητα «getElementsByClassName("όνομα κλάσης")» όπου μέσα στις παρενθέσεις εισάγεται το όνομα της κλάσης.

Αρχείο: cssSelector1.html


<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχείο DOM-Α </title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <p class='ena'>Αυτό είναι ένα έγγραφο.</p>
  <p class='duo'>Αυτό είναι "δύο" έγγραφο.</p>
  <p class='tria'>Αυτό είναι "τρία" έγγραφο.</p>
  <p class='ena'>Αυτό είναι ένα έγγραφο.</p>
 <script>
  var aobject = document.getElementsByClassName("ena")[0];
  console.log(aobject);
 </script>
 </body>
</html>

Αποτέλεσμα:

H επιλογή μέσα σε πολλές ίδιες κλάσεις, συγκεκριμένα δυο ίδιες για το πρώτο και το τελευταίο «<p>», γίνεται μέσω της χρήσης συντεταγμένης θέσης μέσα σε πίνακα, ενώ αν είχαμε μόνο ένα στοιχείο με αυτήν την κλάση τότε θα χρειαζόταν να χρησιμοποιήσουμε την συντεταγμένη θέσης «[0]», διαφορετικά θα χρησιμοποιήσαμε τον πίνακα και όχι το ίδιο το αντικείμενο που θέλουμε.

Στην javascript γενικώς υπάρχει ένα πλήθος τρόπων με τους οποίους μπορεί κάποιος να διαλέξει αντικείμενα με βάση οτιδήποτε υπάρχει ως γνώρισμα σε ένα DOM-A. Παρακάτω παραθέτουμε μερικούς τρόπους με τους οποίους γίνεται αυτή η επιλογή μέσα από την CSS.

Επιλογέας Αντιστοίχηση
Απλές Επιλογές 
#nav
 
<div id='nav'>
 
div
 
<div>
 
.warning
 
<div class='warning'>
Επιλογέας με βάση κάποιο γνώρισμα 
p[lang="gr"]
 
<p lang='gr'>
 
*[name="x"]
 
<span name='x'>
Σύνθετες επιλογές 
span.fatal.error
 
<span class="fatal error" >
 
span[lang='fr'].warning
 
<span lang='fr' class='warning' >
Επιλογές απογόνων 
#log span
 
<div id='log'>
 <div>
  <span></span>
 </div>
</div>
 
#log>span
 
<div id='log'>
 <span></span>
</div>
 
body>h1:first-child
 
<body>
 <h1></h1>
 <h1></h1>
</body>
Διάφοροι άλλοι 
div,#log
 
<div></div>
<span id='log'></span>

Με βάση το όνομα

Εκτός από ένα σωρό γνωρίσματα, ιδιότητες, φόρμες και λοιπά, υπάρχει και ο πιο απλούστερος τρόπος, ο οποίος είναι να βρούμε ένα στοιχείο DOM-Α με βάση το όνομα του. Αυτό γίνεται αφού στο αντίστοιχο DOM-A υπάρχει γνώρισμα «name». 

Αρχείο: nameSelector.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-A Name-Id</title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1 name='ena'>Ένα έγγραφο HTML</h1>
  <p name='ena'>Αυτό είναι ένα <b name='duo'>απλό</b> έγγραφο.</p>
 </body>
 <script>
  var objects=document.getElementsByName("ena");
  var object=objects[1];
  console.log(object);
 </script>
</html>

Αποτέλεσμα:

Επιλογές φόρμας εισαγωγής και εικόνων

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

Εικόνες

Για να προσπελάσουμε μια εικόνα αρκεί μόνο να χρησιμοποιήσουμε το στοιχείο-ρίζα «document», μία τελεία και το όνομα της εικόνας που δόθηκε στο γνώρισμα «name».

Αρχείο: imgSelector.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-A img</title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <img src='https://www.google.gr/images/srpr/logo8w.png' name='google'/>
 </body>
 <script>
  var image=document.google;
  console.log(image);
 </script>
</html>

Αποτέλεσμα: 

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

Φόρμες

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

Για να αποκτήσουμε πρόσβαση σε μια φόρμα αρκεί να χρησιμοποιήσουμε το στοιχείο ρίζα «document», μία τελεία και το όνομα της φόρμας. Ύστερα για να επιλέξουμε ένα στοιχείο μέσα στην φόρμα αρκεί να συνεχίσουμε μετα το όνομα της φόρμας με μια τελεία και το όνομα του στοιχείου που θέλουμε να αντλήσουμε. Τα ονόματα αυτά προέρχονται από το γνώρισμα «name» του κάθε στοιχείου, είναι απαραίτητο δηλαδή να υπάρχει προκειμένου να μπορέσουμε να χρησιμοποιήσουμε αυτές τις συντομεύσεις. 

Αρχείο: formSelector.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-A form</title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <form name='person' method='get' action=''>
   Όνομα: <input type='text' name='firstname'/><br/>
   Επώνυμο: <input type='text' name='surname' /><br/>
   <input type='submit' value='Αποστολή' name='submitbutton' onclick='button.value="Ok!"'/>
  </form>
 </body>
 <script>
  var form=document.person;
  var button = form.submitbutton;
 </script>
</html>

Αποτέλεσμα:

Κάνοντας κλικ στο κουμπί «Αποστολή» το οποίο έχει γνώρισμα «onclick='button.value="Ok!"'» τότε η ιδιότητα «value» του αντικειμένου «'button» θα αλλάξει στην τιμή «"Ok!"». Το αντικείμενο αυτό δημιουργείται όταν φορτώνεται η σελίδα στον κώδικα που υπάρχει στα tags «<script>», μετά το «</body>».

Επιλογή όλων

Πριν υπάρξει το DOM και να σταθεροποιηθεί η χρήση του, υπήρχε το «document.all», το οποίο αναπαριστούσε όλα τα αντικείμενα (αλλά όχι τα texts) μέσα σε ένα έγγραφο. Τώρα πλέον έχει αντικατασταθεί με όλα τα παραπάνω που επεξηγήσαμε, αλλά θα ήταν καλό να επεξηγήσουμε πως λειτουργεί και αυτό. Σε όλες τις προηγούμενες επιλογές στοιχείων DOM-A είχαμε μια συγκεκριμένη δομή συντεταγμένων μέσα στους πίνακες που περιηγούμασταν. Στην συγκεκριμένη περίπτωση όλα τα αντικείμενα παρουσιάζονται σε έναν μονοδιάστατο πίνακα με σειρά όπως βρίσκονται τα αντικείμενα γραμμένα στον κώδικα, αυτό σημαίνει πως το στοιχείο «φόρμα» δεν θα έχει συντεταγμένες «[0][1][1]» αλλά θα βρίσκεται σε μια μονή συντεταγμένη «[6]» με βάση την σειρά που βρίσκεται στον κώδικα. 

Αρχείο: allSelector.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Στοιχεία DOM-A All</title>
  <meta charset='utf-8'/>
 </head>
 <body>
  <h1>Ένα έγγραφο HTML</h1>
  <form name='person' method='get' action=''>
   Όνομα: <input type='text' name='firstname'/><br/>
   Επώνυμο: <input type='text' name='surname' /><br/>
   <input type='submit' value='Αποστολή' name='submitbutton'/>
  </form>
 </body>
 <script>
  var form = document.all[6];
  console.log(form);
 </script>
</html>

Αποτέλεσμα: