↑
Main Page

read-only

endContainer

— The node within which the range ends (the parent of the last node in the

selection)

endOffset

— The offset within the

endContainer

where the range ends (follows the same

rules as

startOffset

)

commonAncestorContainer

— The first node within which both

startContainer

and

endContainer

exist

These properties are all read-only and are designed to give you additional information about the range.

When you use

selectNode()

, the

startContainer

endContainer

, and

commonAncestorContainer

are all equal to the parent node of the node that was passed in;

startOffset

is equal to the index of the

given node within the parent’s

childNodes

collection, whereas

endOffset

is equal to the

startOffset

plus one (because only one node is selected).

When you use

selectNodeContents()

startContainer

endContainer

, and

commonAncestor

Container

are equal to the node that was passed in;

startOffset

is equal to 0;

endOffset

is equal

to the number of child nodes (

node.childNodes.length

The following example illustrates these properties:

<html>

<head>

<title>DOM Range Example</title>

function useRanges() {

var oRange1 = document.createRange();

var oRange2 = document.createRange();

var oP1 = document.getElementById(“p1”);

oRange1.selectNode(oP1);

oRange2.selectNodeContents(oP1);

document.getElementById(“txtStartContainer1”).value =

oRange1.startContainer.tagName;

document.getElementById(“txtStartOffset1”).value =

oRange1.startOffset;

document.getElementById(“txtEndContainer1”).value =

oRange1.endContainer.tagName;

document.getElementById(“txtEndOffset1”).value = oRange1.endOffset;

document.getElementById(“txtCommonAncestor1”).value =

oRange1.commonAncestorContainer.tagName;

document.getElementById(“txtStartContainer2”).value =

oRange2.startContainer.tagName;

document.getElementById(“txtStartOffset2”).value =

oRange2.startOffset;

document.getElementById(“txtEndContainer2”).value =

oRange2.endContainer.tagName;

document.getElementById(“txtEndOffset2”).value = oRange2.endOffset;

document.getElementById(“txtCommonAncestor2”).value =

oRange2.commonAncestorContainer.tagName;

}

</script>

319

Advanced DOM Techniques

13_579088 ch10.qxd 3/28/05 11:39 AM Page 319