Λήψη στοιχείου DOM σε JavaScript

Τώρα θα μάθουμε πώς να λαμβάνουμε τα στοιχεία DOM μιας σελίδας, προκειμένου στο μέλλον να εκτελούμε διάφορους χειρισμούς με αυτά.

Ας υποθέσουμε ότι έχουμε ένα κουμπί:

<input id="button" type="submit">

Ας πάρουμε μια αναφορά σε αυτό το κουμπί σε μια μεταβλητή. Για αυτό πρέπει να χρησιμοποιήσουμε τη μέθοδο querySelector του ειδικού αντικειμένου document. Αυτή η μέθοδος δέχεται ως παράμετρο έναν επιλογέα CSS και επιστρέφει μια αναφορά στο στοιχείο που βρέθηκε από αυτόν τον επιλογέα.

Το κουμπί μας έχει το χαρακτηριστικό id με τιμή button. Αυτό σημαίνει ότι μπορούμε να βρούμε αυτό το κουμπί με τον επιλογέα #button. Λοιπόν, ας βρούμε το κουμπί μας και ας γράψουμε την αναφορά του σε μια μεταβλητή:

let button = document.querySelector('#button');
console.log(button);

Δίνονται 3 παράγραφοι:

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

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