getElementById is a method of the browser document object that lets you access html elements methods in order to execute an element's methods in order to change its properties. This is referred to as Dynamic HTML (DHTML).
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Access Web Page Elements With getElementById

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.

RSS Feed RSS Feed



Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268