Παραδείγματα
Μπορούμε να αναφερθούμε σε ένα html στοιχείο με τη χρήση της δήλωσης document.getElementById. Με τη δήλωση αυτή αναφερόμαστε σε ένα στοιχείο με συγκεκριμένη τιμή στην ιδιότητα id. Π.χ.
<body>
<div id="test"></div>
<script type="text/javascript">
document.getElementById ( "test" ).innerHTML = "<p>Content</p>";
</script>
</body>
Η innerHTML προσθέτει κώδικα html ανάμεσα στα tags του στοιχείου στο οποίο αναφερόμαστε.
Εμφάνιση κειμένου
Όπως είδαμε και στην πλειοψηφία των παραδειγμάτων για να εμφανίσουμε κείμενο στην οθόνη, χρησιμοποιούμε την εντολή document.write. Π.χ.
document.write ( "Hello world!" );
Μπορούμε να συνδυάσουμε και html tags μέσα στις παρενθέσεις. Δηλαδή:
document.write ( "<h2>Hello world!</h2>" );
Αναφορά σε φόρμες
Για να αναφερθούμε σε κάποια φόρμα, χρησιμοποιούμε τη δήλωση document.forms [i], όπου i ο αριθμός της φόρμας που θέλουμε να προσπελάσουμε. Έτσι αν έχουμε μία φόρμα στη σελίδα, μπορούμε να αναφερθούμε σε εκείνη με τη δήλωση document.forms [0]. Π.χ. για να εμφανίσουμε το όνοα μιας φόρμας, μπορούμε να γράψουμε:
<body>
<form name="form_test">
</form>
<script type="text/javascript">
document.write ( document.forms [0].name );
</script>
</body>
Προσθήκη html κώδικα σε κάποιο στοιχείο
<div id="content"></div>
<script type="text/javascript">
document.getElementById ( "content" ).innerHTML = "<p>Add html content with innerHTML</p>";
</script>
Ενεργοποίηση ενός button
<input type="button" value="Click me" id="button" onclick="test_disabled ();" />
<script type="text/javascript">
function test_disabled ()
{
var object = document.getElementById ( "button" );
object.disabled = "true";
} // end function test_disabled
</script>
Εύρεση όλων των στοιχείων μιας φόρμας
<form id="fm">
<input type="text" id="firstname" value="" />
<input type="text" id="lastname" value="" />
<input type="button" id="button" value="Show form elements" onclick="show_elements ()" />
</form>
<script type="text/javascript">
function show_elements ()
{
var form = document.getElementById ( "fm" );
var length = form.elements.length; // Επιστρέφει τον αριθμό των στοιχείων της φόρμας
for ( var i = 0; i < length; i++ )
{
document.write ( form.elements [ i ].id + '<br />' ); // Εμφανίζουμε το id κάθε στοιχείου της φόρμας
} // end for
} // end function show_ elements
</script>
Αρχικοποίηση ή αποστολή μιας φόρμας
Για να επανέλθουν οι τιμές των στοιχείων μιας φόρμας στην αρχική τους κατάσσταση, αρκεί να καλέσουμε τη μέθοδο reset ενός στοιχείου <form>. Για να αποστείλουμε τις πληροφορίες της φόρμας, καλούμε τη μέθοδο submit. Π.χ.
<form id="fm">
<input type="text" id="firstname" value="αρχικό όνομα" />
<input type="text" id="lastname" value="αρχικό επώνυμο" />
<input type="button" id="button" value="Reset" onclick="reset_form ()" />
<input type="button" id="button" value="Submit" onclick="submit_form ()" />
</form>
<script type="text/javascript">
function reset_form ()
{
var form = document.getElementById ( "fm" );
form.reset ();
} // end function reset_form
function submit_form ()
{
var form = document.getElementById ( "fm" );
form.submit ();
} // end function submit_form
</script>
Εμφάνιση του επιλεγμένου στοιχείου σε μία drop down list
<form id="fm">
<select id="list" name="list">
<option value="Windows">Windows</option>
<option value="Mac OS">Mac OS</option>
<option value="Linux">Linux</option>
</select>
<input type="button" value="Click me" onclick="show_selected_option ();" />
</form>
<script type="text/javascript">
function show_selected_option ()
{
var list = document.getElementById ( 'list' );
alert ( list.options [list.selectedIndex].value );
} // end function show_selected_option
</script>
Μετάβαση σε άλλο url
<input type="button" value="Click me" onclick="redirect ();" />
<script type="text/javascript">
function redirect ()
{
location.href = "http://www.google.gr";
} // end function redirect
</script>
Ερώτηση επιλογής
<input type="button" value="Click me" onclick="ask ();" />
<script type="text/javascript">
function ask ()
{
var ask = confirm ( 'Θέλετε να μεταβείτε στο google?' );
if ( ask == true )
{
location.href = "http://www.google.gr";
} // end if
} // end function ask
</script>