First of all to begin the Javascript document getElementById Tutorial a html5 document needs to be created.

On line 9 in the html5 document is a ‘div’ element that contains an empty ‘id’ attribute. We can add a ‘id’ name of ‘demo’.

Again on line 9 we will add some text for this demonstration.

Javascript document getElementById Tutorial

The javascript ‘document.getElementById()‘ method will return the element in a html5 document that has the specified ‘id’ value.

Javascript document getElementById Tutorial. Alert box.
The ‘document.getElementById()‘ method has returned the element with an id of ‘demo’.

In the above example the javascript code on lines 11 and 12 can be explained as follow:

  • First of all on line 11 a variable named ‘id’ is created that returns the element with a id value of ‘demo’.
  • On line 12 an alert box is given the variable name id.
  • The alert box will display the elements within the html5 document that has an id value of ‘demo’.

If the ‘id’ value does not exist the ‘document.getElementById()‘ method will return a value of ‘null’.

Javascript document getElementById Tutorial. Alert box with null displayed.
The ‘document.getElementById()’ method has given a null value to the id variable.

In the above example the javascript code on lines 11 and 12 can be explained as follow:

  • First of all on line 11 a variable named ‘id’ is created that returns the element with a id value of ‘demo’.
  • On line 12 an alert box is given the variable name id.
  • The alert box will display the elements within the html5 document that has an id value of ‘demo’.

In javascript the document.getElementById() method is used for many tasks. Here is a basic example that uses ‘getElementById()’ to obtain all the text form the element that has a id of ‘demo’. It then displays all the text in an alert pop-up box.

Javascript document getElementById Tutorial. Alert box with text.
The javascript method ‘getElementById’ has targeted the ‘div’ element with an id of ‘demo’.

In the above example the javascript code on lines 11 and 12 can be explained as follow:

  • First of all on line 11 a variable named ‘id’ is created that returns the element with a id value of ‘demo’.
  • On line 12 an alert box is given the variable name id and chained it to the innerHTML property.
  • The alert box will display the html elements contained within the ‘div’ that has an id value of ‘demo’

It is debatable as to whether the above example is useful however the above example does demonstrate a practical use for the ‘document.getElementById()‘ method.

Use the ‘document.getElementById()‘ method to grab input.

First of all on line 9 in the above html5 document is an input field with an id of ‘name’. On line 10 is an submit button.

When the button is clicked the ‘onclick()’ eventHandler will trigger a function named ‘getInput’.

Javascript document getElementById Tutorial
Input field with a first name value of ‘Leonardo’.
  • On line 12 in-between the script tags is the function getInput().
  • Next on line 13 the function getInput() will create a variable named ‘firstName’ that holds the value returned from the ‘name’ id that has been passed to the ‘document.getElementById’ method.
  • On line 14 the alert box will display the value from the variable ‘firstName’.
Javascript document getElementById Tutorial
The alert box displays the name that was entered into the input field with an id of ‘name’.

More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *