How to Change DOM Property Values

Manipulate the DOM to add functionality to your website.

The Document Object Model (DOM) is the representation of the objects that make up a web page. Web developers alter the property values of those DOM objects to create much of the functionality that you see on the web. For example, you can manipulate the DOM to change a paragraph's size, color, font and location on a page. Once you learn to change DOM property values, you can make your website easier to use and more fun to navigate. You create DOM elements using HTML; you modify their property values using JavaScript.

Things You'll Need

• HTML editor or Notepad

Instructions

1. Add the following code to the body section of the document:

   <h1 id="myHeading" style="position:absolute">This is a heading</h1><br /><br />
   <input id="move" type="button" value="move" onclick="return move()" /><br />
   <input id="modify" type="button" value="modify" onclick="return modify()" />

   This code creates a heading and two buttons named "Move" and "Modify." These three elements are DOM elements. In this example, the heading's "position" property has a value of "absolute." That means you can move the heading later using JavaScript.

2. Add the following JavaScript functions to the head section of the document:

   function move() {
   var myObject = document.getElementById("myHeading");
   myObject.style.left = "300px";
   }

   function modify() {
   var myObject = document.getElementById("myHeading");
   myObject.style.color = "red";
   }

   These functions will change the heading's DOM property values when you click the buttons. The "document.getElementByID" command retrieves the heading element and changes its style properties. You can use this type of logic to change the style property of any element on any web page. In this example, the position and font properties of the header element will change when you click the buttons.

3. Open the page in a browser and click the buttons. When you click the "Move" button, the heading will move to the right. When you click the "Modify" button, the heading will change color and its font size will increase.

Tips & Warnings

• Study online tutorials to learn more about the DOM and the "document.GetElementByID" command. This command is essential to DOM manipulation. It allows you to retrieve any element on a web page and change its property values. You can also animate web page objects by changing their DOM property values. For instance, by altering an image's "left" and "top" values at timed intervals you can move the image across the page.

References

• W3schools: HTML DOM Introduction

Resources

• W3schools: HTML DOM Style Object