DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 4 | WebReference

DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 4


Determining Element Page Coordinates, Part 1
IE for Windows, NS6

Parent Nodes - elementReference.parentNode

The parentNode property is supported by Internet Explorer 5+ and NS6+ and is part of the W3C DOM specification.
It is documented at:
W3C
MSDN
Mozilla.

We'll use the same image as on the previous page. The HTML that the image resides in is the same as before:

<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 parentNode property of elements.

Parent Nodes    -     elementReference.parentNode
Your browser: n/a
TheWRImage | n/a
TheWRImage | TD | TR | TBODY | TABLE | TD | TR | TBODY | TABLE | SPAN | BODY | HTML | null
TheWRImage | TD | TR | TBODY | TABLE | TD | TR | TBODY | TABLE | SPAN | BODY | HTML | document
TheWRImage | TD | TR | TBODY | TABLE | TD | TR | TBODY | TABLE | SPAN | BODY | HTML | document

The results here are not as straightforward as with parentElement. In fact, the three versions of IE give us three different results!

IE4 does not support parentNode since the browser predates the W3C standard that introduced the property.

IE5 supports it, but considers it no more than an alias of its own parentElement property. Thus, the top-most element's parentNode is null, just as with parentElement. The IE documentation reflects this.

As of this writing, the IE documentation does not point out that IE6 has modified its behavior to conform to the W3C standard, which states that the top-most element's parentNode is document.

NS6+ behavior is the same as IE6's and the W3C standard.

If we needed a routine that accessed parent elements, we would have to account for IE4 not supporting parentNode and NS6+ not supporting parentElement.

Luckily we have no need of such a routine for our present purposes, so we'll move on to a look at the offsetParent property.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: August 26, 2002

URL: https://www.webreference.com/dhtml/diner/realpos1/4.html


Justtechjobs.comFind a programming school near you






Online Campus Both