logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Working With the DOM

Guest Author - Elizabeth Connick

The Document Object Model, otherwise known as DOM, is a highly useful tool for web developers – it allows them to directly affect specific portions of the HTML document with programming such as Javascript. Here's how you can use DOM to add some dynamic elements to your pages.

DOM commands will typically contain a method, which tells the program what to do, and a property, which identifies the method's target. Let's look at an example of a very basic HTML page:

<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<p id="sample">This is an example of a basic HTML page.</p>
</body>
</html>

Suppose you wanted to use Javascript to store one particular paragraph's text in a variable. Using the DOM, you could do so with a command like this:

var x=document.getElementById("sample").childNodes[0].nodeValue;

How does this line work? Let's start with the method – in this case, getElementById. The getElementById method does just what you'd think – it grabs a particular HTML element based on its id. In this case, getElementById("sample") tells the program to look for an HTML element with an id of "sample." childNodes[0] tells it to narrow down further to the first child node of "sample," meaning the text inside this element. And nodeValue tells it to get the value of that child node. After running this line of code, the variable 'x' now contains the text string 'This is an example of a basic HTML page.'

Now let's say you actually wanted to change the text in your sample paragraph. In that case, you would use a line of code like this:

document.getElementById("sample").childNodes[0].nodeValue = "Hello world!";

Again, the getElementById method tells your program what you are doing, and the childNodes property locates the specific piece of HTML you want to affect.

Now let's take it a step further and add a dynamic aspect. We can add a button to the webpage that will give visitors the power to change your page's text!

Here's how the code might look:

<html>
<head>
<title>Sample HTML Page</title>
<script type="text/javascript">
function coolButton()
{
document.getElementById("sample").childNodes[0].nodeValue = "Hello world!";
}
</script>
</head>
<body>
<p id="sample">This is an example of a basic HTML page.</p>
<input type="button" onclick="coolButton()" value="Click me to change the text!">
</body>
</html>

The program uses the Javascript onClick event handler (which basically says "Do the following when someone clicks on this object…") to run our DOM-powered command and change the text.
This site needs an editor - click to learn more!

Add Working+With+the+DOM to Twitter Add Working+With+the+DOM to Facebook Add Working+With+the+DOM to MySpace Add Working+With+the+DOM to Del.icio.us Digg Working+With+the+DOM Add Working+With+the+DOM to Yahoo My Web Add Working+With+the+DOM to Google Bookmarks Add Working+With+the+DOM to Stumbleupon Add Working+With+the+DOM to Reddit




An Introduction to the DOM
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor