JavaScript Examples Bible - UserWorks Technologies

Chapter 4 ✦ The Document and Body Objects (Chapter 18)
The Results box shows that an object was created. Now, look at the properties of
the object by typing a into the bottom text field. The precise listings of properties
varies between IE5+ and NN6, but the W3C DOM properties that they share in common
indicate that the object is a node type 3 with a node name of #text. No parents,
children, or siblings exist yet because the object created here is not part of
the document hierarchy tree until it is explicitly added to the document.
To see how insertion works, enter the following statement into the top text field
to append the text node to the myP paragraph:
document.getElementById(“myP”).appendChild(a)
The word “Hello” appears at the end of the simple paragraph lower on the page.
Now you can modify the text of that node either via the reference from the point of
view of the containing P element or via the global variable reference for the newly
created node:
document.getElementById(“myP”).lastChild.nodeValue = “Howdy”
or
a.nodeValue = “Howdy”
elementFromPoint(x, y)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
Listing 18-14 is a document that contains many different types of elements, each
of which has an ID attribute assigned to it. The onMouseOver event handler for the
document object invokes a function that finds out which element the cursor is over
when the event fires. Notice that the event coordinates are event.clientX and
event.clientY, which use the same coordinate plane as the page for their point of
reference. As you roll the mouse over every element, its ID appears on the page. In
Figure 4-1, the pointer is inside a table cell, whose ID appears in bold at the end of
the first paragraph. Some elements, such as BR and TR, occupy no space in the document,
so you cannot get their IDs to appear. On a typical browser screen size, a
positioned element rests atop one of the paragraph elements so that you can see
how the elementFromPoint() method handles overlapping elements. If you scroll
the page, the coordinates for the event and the page’s elements stay in sync.
247
document.elementFromPoint()