Working With the DOM
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.
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!
You Should Also Read:
An Introduction to the DOM
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
