| home / experts / dhtml / diner / realpos1 |
|
Determining Element Page Coordinates, Part 1
| |||||||||||||||||
 |
Consider the image (WebReference logo) in the left column. The HTML that the image resides in is: <HTML>
<HEAD></HEAD>
<BODY>
...
<SPAN>
<TABLE>
<TR>
...
<TD>
<TABLE>
<TR>
<TD>
<IMG ID="TheWRImage" SRC="wrlogo.gif">
</TD>
...
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</SPAN>
</BODY>
</HTML>
|
The table below illustrates the document hierarchy of this page in relation to the WR logo image and with reference to the parentElement property of elements.
Note:
The bordered area labelled: Your Browser was dynamically generated when the page was loaded. It displays information only in IEWin and NS6+, the browsers currently under consideration.
In older NS6 versions, there are timing problems with the onload event firing. If you are using such a browser you might not see information displayed in the bordered area. Refresh the page until you do.
The remainder of the table lists the document hierarchy by tag name starting with the immediate parentElement of the image and working up to the top-most element, for the browsers addressed by this article.
| Parent Elements - elementReference.parentElement | |
| Your browser: | n/a |
 |
TheWRImage | TD | TR | TBODY | TABLE | TD | TR | TBODY | TABLE | SPAN | BODY | HTML | null |
 |
TheWRImage | n/a |
All versions of IE return the same results.
The parentElement of the top-most element in the hierarchy (<HTML>) returns as null.
This is useful for testing an element's nested position. Example:
elementReference.bIsTopLevel = (elementReference.parentElement == null);
Let's repeat this example with parent nodes.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: August 26, 2002
URL: http://www.webreference.com/dhtml/diner/realpos1/3.html
