Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Access Web Page Elements With getElementById

By Stephen Bucaro

Everything you see on a web page, be it a button, text input box, form, table, or just text, is an "element". Web page elements are defined by html code and html tags. As a web browser parses the html code in order to layout the web page, it fills in the page's Document Object Model (DOM). The DOM is a hierarchical tree structure of all the html elements on the web page.

You might be wondering "what's the difference between an 'element' and an 'object'." Well, in the first Web browsers, everything was an element. Web pages were static. In later web browers, elements became "objects" with "properties" and "methods". With an object you can execute methods, which are similar to functions, to make things happen. One thing you can make happen with a method is to change an objects properties. An example of a property is "backgroundcolor".

In a modern web browser you can use programming code, like Java Script or VBScript, to execute an elements methods in order to change its properties. Webpages are no longer static. So in reality, there is no difference between "element" and "object". When you use programming code to execute an elements methods, this is referred to as Dynamic HTML (DHTML). One of the first things you have to do to execute one of an elements methods is to get the element, which actually means getting a reference to the element in the DOM.

After get a reference to the element, you save it in a variable, and then you can use that variable's name to execute that element's methods and change that element's properties. There are several ways to "get" a web page element, the most popular being the document object's getElementById method. The code shown below is an example of using Java Script and getElementById to get a reference to an element.

<div id="Div1">This is my text.</div>

var objDiv1 = document.getElementById("Div1");

Once you get a referrence to an element, you can execute one of it's methods. The example below uses getElementById to access the div element whose id="Div1" and then uses it's .innerHTML method to get the div's contents and display it in a message box.

<div id="Div1">This is my text.</div>

<script type="text/javascript">

var objDiv1 = document.getElementById("Div1");
alert(objDiv1.innerHTML);

</script>

The element's .innerHTML method can also be used to write text or html code into a div element, as shown below.

<div id="Div2">This is my text.</div>

<script type="text/javascript">

var objDiv2 = document.getElementById("Div2");
objDiv2.innerHTML = "This is my NEW text.";

</script>

By actually displaying a button in the div, the code shown below demonstrates that indeed you are writing HTML code inside the div, which is very powerful. In this example it was done with one line of code by not saving a reference to the div. You don't really need to save a reference to an element if you're going to access it only one time.

<div id="Div3">This is my text.</div>

<script type="text/javascript">

document.getElementById("Div3").innerHTML = "<input type='button' value='MyButton'>";

</script>

In the example shown below, we do save a reference to the div element because we are going to access it more than one time.