Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/article.php on line 101

Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/article.php on line 107

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/article.php on line 109

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/article.php on line 124

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/article.php on line 125

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/article.php on line 127

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174
The Melonfire Community - Trog
Logo         Community
  Trog
Services
The Company
Community
Columns
Your Account
Contact Us
 
 
Rough Guide To The DOM (part 1)
Find out how the new W3C DOM finally brings some standards to the decidedly non-standard world of the Web.

| Back To Basics |

We'll start with the basics - a very simple HTML page.


<html><head></head><body bgcolor="white"><div id="a" style="font-family: Arial; color: white; background: black">Wassup?</div></body></html>


Let's alter the font colour of the text within the <div>. In Internet Explorer, this would typically be accomplished with


<script language="JavaScript">
document.all.a.style.color = "red";
</script>


Here's the code I would use in Mozilla:


<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
obj.style.color = "red";
</script>


An explanation is in order here. Under the new DOM, every element in an HTML document is part of a "tree", and you can access each and every element by navigating through the tree "branches" until you reach the corresponding "node". Given that, here's my representation of the HTML document above, in "tree" form.


document
   | -- <html>
      | -- <head>
      | -- <body>
         | -- <div>


Now, to get to the <div>, I need to:

1. start at the top ("document");

2. move down to the main branch - the <html> tag, or "document.childNodes[0]";

3. then to the second sub-branch - the <body> tag or "document.childNodes[0].childNodes[1]";

4. then to the <div> - "document.childNodes[0].childNodes[1].childNodes[0]";

At this point, I have successfully navigated my way to the <div> element in the document tree. A quick way of verifying this is to use an alert() on the object


<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
alert(obj.nodeName);
obj.style.color = "red";
</script>


which displays the name of the tag - DIV - in an alert box.

At this point, I can begin futzing with object attributes - in the example above, I've altered the "color" style attribute. Don't worry about this for the moment; simply verify that you have understood the manner in which I navigated through the document tree to reach the DIV.


How to do Everything with PHP & MySQL
How to do Everything with PHP & MySQL, the best-selling book by Melonfire, explains how to take full advantage of PHP's built-in support for MySQL and link the results of database queries to Web pages. You'll get full details on PHP programming and MySQL database development, and then you'll learn to use these two cutting-edge technologies together. Easy-to-follow sample applications include a PHP online shopping cart, a MySQL order tracking system, and a PHP/MySQL news publishing system.

Read more, or grab your copy now!


previous page more like this  print this article  next page
 
Search...
 
In trog...
Logging With PHP
Building A Quick-And-Dirty PHP/MySQL Publishing System
Output Buffering With PHP
Date/Time Processing With PHP
Creating Web Calendars With The PEAR Calendar Class
more...
 
In the hitg report...
Crime Scenes
Animal Attraction
Lord Of The Strings
more...
 
In boombox...
Patience - George Michael
Think Tank - Blur
My Private Nation - Train
more...
 
In colophon...
Hostage - Robert Crais
The Dead Heart - Douglas Kennedy
Right As Rain - George Pelecanos
more...
 
In cut!...
American Chai
The Core
Possession
more...
 
Find out how you can use this article on your own Web site!


Copyright © 1998-
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/article.php on line 731
2018 Melonfire. All rights reserved
Terms and Conditions | Feedback