Confusion regarding start container attribute of Browser Range object

I was going through the documentation for the range object, and I am a bit confused about开发者_如何学运维 the start container property of the range object. I assumed that the start container would always be a text node, but the book says that the start container could also represent an element.

Could anyone give me an example highlighting when this would be the case?

A DOM Range can represent any continuous portion of a document and its boundaries can be anywhere within the document (including within comment, entity and attribute nodes). It's not just used for selections (although in HTML scripting that is the most common use).

If a boundary container node is an element then the offset is the number of child nodes of the container prior to the boundary. For example, look at the following range (delimited by pipes):

<div id="foo"><img src="1.png">|<img src="2.png">|<img src="3.png"></div>

There are no text nodes at all here. The range start is after one child node of the div and the end is after two child nodes. This range could be created as follows:

var div = document.getElementById("foo");
var range = document.createRange();
range.setStart(div, 1);
range.setEnd(div, 2);