Javascript
parentNode Property
Value: Node object reference or null
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
The parentNode property returns a reference to the next outermost node that is reflected as an object belonging to the document. For a standard element object, the parentNode property is the same as IE’s parentElement because both objects happen to have a direct parent-node relationship as well as a parent-child element relationship.
Other kinds of content , however can be nodes. This includes text fragments within an element. A text fragment’s parentNode property is the next outermost node or element that encompasses that fragment. A text node object in IE does not have a parentElement property.
Related Items: childNodes, nodeName, nodeType, nodeValue, parentElement properties.
parentElement property
Value: Element object reference or null
Compatibility: WinIE4+, MacIE4+, Moz-, Safari-
The parentElement property returns a reference to the next outermost HTML element from the current element. This parent-child relationship of elements is often, but not always, the same as parent-child node relationship. The difference is that the parentElement property deals only with HTML elements as reflected as document objects, whereas a node is not necessarily an HTML element (an attribute or text chunk).
There is also a distinction between parentElement and offsetParent properties. The latter returns an element that may be many generations removed from a given element but is the immediate parent with regard to positioning context. For example, a td element’s parentElement property is its enclosing tr element, but a td element’s offsetParent property is its table element.
Related Items: ossetParent, parentNode properties.
ownerDocument
Value: Document object reference
Compatibility: WinIE6+, MacIE5+, Moz1+, Safari1+
The ownerDocument property belongs to any element or node in the W3C DOM. The property’s value is a reference to the document node that ultimately contains the element or node. If a script encounters a reference to an element or node, the object’s ownerDocument property provides a way to build references to other objects in the same document or to access properties and methods of the document objects.
Example:
document.body.childNodes[5].ownerDocument
The result is a reference to the document object. You can use that to inspect a property of the document,
document.body.childNodes[5].ownerDocument.URL
This returns the document.URL property for the document that owns the child node.
Related Item: document object.
offsetParent
Value: Object reference
Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+
The offsetParent property returns a reference to the object that acts as a positioning context for the current element.Values for the offsetLeft and offsetTop are measured relative to the top-left corner of the offsetParent object.
The returned object is usually , but not always the next outermost block-level container. For most document elements the offsetParent object is the document.body object.
The property behaves predictably for positioned elements in most browsers.
Code:
<html>
<head>
<title>offsetParent Property</title>
<script type="text/javascript">
function setImagePosition()
{
var x = 0;
var y = 0;
var offsetPointer = document.getElementById("myCell");
while(offsetPointer)
{
x += offsetPointer.offsetLeft;
y += offsetPointer.offsetTop;
offsetPointer = offsetPointer.offsetParent;
}
//correct for MacIE body margin factors
if(navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined")
{
x += document.body.leftMargin;
y += document.body.topMargin;
}
document.getElementById("myDiv").style.left = x + "px";
document.getElementById("myDiv").style.top = y + "px";
document.getElementById("myDiv").style.visibility = "visible";
}
</script>
</head>
<body onLoad="setImagePosition()">
<h1>The offset property</h1>
<p>After the document loads, the script positions a small image in the upper
corner of the second table cell.</p>
<table border="1" align="center">
<tr>
<td>First cell</td>
<td id="myCell">Second cell</td>
</tr>
</table>
<img src="image.png" id="myDiv" height="12" width="12"
style="position:absolute;visibility:hidden;" />
</body>
</html>
Move Images using Javascript
Next javascript code shows how you can move images around the page.
Compatibility: Mozilla, Opera, Chrome, Safari
Code:
var curElement;
function doMouseMove(e)
{
var newleft = 0, newTop = 0;
curElement.style.position = "absolute";
if((e.which == 1) && (curElement != null))
{
newleft = e.screenX - (curElement.offsetWidth/2);
curElement.style.left = newleft + "px";
newtop = e.screenY - (curElement.offsetHeight/2);
curElement.style.top = newtop + "px";
}
}
function doDragStart(e)
{
// Don't do default drag operation.
if ("IMG" == e.target.tagName)
{
e.returnValue = false;
}
}
function doMouseDown(e)
{
if ((e.which == 1) && (e.target.tagName == "IMG"))
{
curElement = e.target;
}
}
function dropElem()
{
curElement = null;
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = dropElem;
To expirement with it create an HTML document and put the code in the head element, the body element must contains at least one img element, good luck.
offsetLeft - offsetTop Properties
Value: integer
Compatibility: WinIE4+, MacIE4+, Moz1+, Safari1+
The offsetTop and offsetLeft properties are valuable in providing pixel coordinates of an element within the positioning context of the parent element even when the elements are not positioned explicitly. The element used as a coordinate context for these properties is whatever element the offsetParent property returns. This means that to determine the precise position of any element you may have to add some code that iterates through the offsetParent hierarchy until that property returns null.
Note: The offsetLeft and offsetTop properties for positioned elements in MacIE do not return the same values as the style.left and style.top properties of the same element.
offsetHeight - offsetWidth Properties
Value: integer
Compatibility: WinIE4+, MacIE4+, Moz1+, Safari1+
These properties report the height and width of any element, for a normal block-level element whose height and width are not specified the offsetHeight is determined by the actual height of the content after all text flows. But the offsetWidth always extends the full width of the containing element. For example , a p element consisting of only a few words may report a offsetwidth of many of hundreds of pixels because the p block extends the full width of the body element that represents the containing parent of the p element. To find out the actual width of text within a full-width block-level element wrap the text within an inline element (span) and inspect the offsetWidth property of the span.
Related items: clientHeight, clientWidth properties.
nodeValue
Value: number, string, null
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
Of the node types implemented in the W3C DOM - capable browsers, only the text and attribute types have readable values. An element’s node value returns a null value. For an attribute node the nodeValue property consists of the value assigned to that attribute. As an example, nodeValue can be used to increase the width of a textarea object.
function increaseCols(elem)
{
var colWidth = parseInt(elem.attributes["cols"].nodeValue, 10);
elem.attributes["cols"].nodeValue = (colWidth * 1.1); }
As another example you can replace the text of an element:
function replace(elem, newtxt)
{
if(elem.childNodes.length == 1 && elem.firstChild.nodeType == 3)
{
elem.firstChild.nodeValue = newtxt;
}
}
The function makes one final verification that the element contains one child node and that it is a text type.
Related items: attributes, innerText, nodeType properties.
nodeName Property
Value: string
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
For HTML and XML elements the name of a node is the same as the tag name. The value is an all-uppercase string of the tag name.
Some nodes such as the text content of an element do not have a tag, the nodeName property is a special value: #text.
The following example demonstrates one way to assing a new class name to every p element in an IE5+ document:
function setPClasses(className)
{
for(var i = 0; i < document.all.length; i++)
{
if(document.all[i].nodeName == "P")
{
document.all[i].className = "className";
}
}
}
Related item: tagName property
nextSibling - previousSibling Properties
Value: Object reference
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
A sibling node is one at the same nested level as another node in the hierarchy of an HTML document. The following p element has tow child nodes (the i and b elements), those tow child nodes are siblings of each other.
<p>Ramones is <i>the</i> best <b>rock’n'roll</b> band.</p>
The i node has not previousSibling property, the b node has not nextSibling prorerty (return null).
The following example assings the same class name to all child nodes of an element:
function setChildClasses(parentElem, className)
{
var childElem = parentElem.firstChild;
while(childElem.nextSibling)
{
childElem.className = className;
childElem = childElem.nextSibling;
}
}
Related items: firstChild, lastChild, childNodes properties, insertAdjucentElement method.
