Chapter 10 of Js for Web developers

This article Reprinted from: http://blog.sina.com.cn/s/blog_50122c300100fbqs.html

Recently I am working on the Web HTML editor and will use the range knowledge. I am posting this article when searching for materials and feel it is helpful to myself.

Ranges

To allow an even greater measure of control over a page, you canuse something called a range. A range can be used to select asection of a document regardless of node boundaries (note that theselection occurs behind the scenes and
Cannot be seen by theuser ).
Ranges are helpful when regular Dom manipulation isn't specificenough to change a document. And as usual, there are two differentimplementations of ranges: one from the Dom and one from internetexplorer.

Ranges
 

In order to have a larger page control, introduce ranges. A range can be used to select a part of the document without considering the node boundary (note that the selection takes place behind the scenes and cannot be seen directly by the user ). When common Dom operations are not detailed enough to change a document, range is useful. Generally, there are two ranges implementations: Dom and IE.

Simple selection in Dom ranges
The simplest way to select a part of the document using a range isto use either selectnode () or selectnodecontents (). these methodseach accept one argument, a DOM node, and fill a range withinformation from that node.
The selectnode () method selects the entire node, including itschil.pdf, whereas
Selectnodecontents () selects all of the node's children.
Simple selection in Dom ranges:
 The easiest way to use a range to select a part of a document is to use selectnode () or selectnodecontents (). These methods all accept a parameter (a DOM node) and fill the range with the information of this node.
 Selectnode () selects the child nodes that the entire node contains, and selectnodecontents () selects all its child nodes.

Whenever you create a range, a number of properties are assigned toit:
1, startcontainer-the node within which the range starts (theparent of the first node in the selection)
2, startoffset-the offset within the startcontainer where therange starts. If
Startcontainer is a text node, comment node, or CDATA node, thestartoffset is the number of characters skipped before the rangestarts; otherwise, the offset is the index of the first child nodein the range.
3, endcontainer-the node within which the range ends (the parentof the last node in the selection)
4, endoffset-the offset within the endcontainer where the rangeends (follows the same rules as startoffset)
5, commonancestorcontainer-the first node within which bothstartcontainer and
Endcontainer exist
These properties are all read-only and are designed to give youadditional information about the range.
 When you create a range, many attributes are assigned to it:
1. startcontainer-range (parent node of the first node in the selected area ).
2, startoffset-offset in startcontainer starting with range. If startcontainer is a text node, comment node or CDATA node, startoffset is the number of letters skipped before the start of range; otherwise, offset is the index of the first subnode of range.
3. End Node of endcontainer-range (parent node of the last node of the selected area)
4, endoffset-offset in the endcontainer after range. (Follow startoffset Rules)
5. Both commonancestorcontainer-startcontainer and endcontainer have the first node.
 These attributes are read-only and are designed to give you detailed information about the range.
When you use selectnode (), the startcontainer, endcontainer, andcommonancestorcontainer are all equal to the parent node of thenode that was passed in; startoffset is equal to the index of thegiven node within the parent's childnodes collection, whereasendoffset
Is equal to the startoffset plus one (because only onenode is selected ).
 When you use selectnode (), startcontainer, endcontainer, and commonancestorcontainer are equal to the parent node of the selected node. Startoffset is equal to the index of all the child nodes of the selected node in the parent node. At the same time, endoffset equals 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 passedin; startoffset is equal to 0; endoffset is equal to the number ofchild nodes (node. childnodes. length ).
 When selectnodecontents () is used, startcontainer, endcontainer, and commonancestorcontainer are both equal to the selected node; startoffset is equal to zero, and endoffset is equal to the length of the child node (node. childnodes. length ).