What is anchorNode , baseNode , extentNode and focusNode in the object returned by document.getSelection?

Question

If I make a selection in a html page and I do :

var a = document.getSelection() 

I get an object with four properties :

1. anchorNode
2. baseNode
3. extentNode
4. focusNode

the values of first three is the same i.e. the text that I have selected but how are they different and which one to use?

Answer 1

According to MDN

selection.anchorNode - returns the Node in which the selection begins.

selection.focusNode - returns the Node in which the selection ends.

because there were debates on naming:

• baseNode is alias for anchorNode
• extentNode for focusNode

Note: references to both baseNode and extentNode have been removed from the MDN page.

The following is beyond the scope of this question, but I'll post this anyway, as I found selection to be a tricky part in some scenarios.

Take a look at this example:

<p>ab12<sup>3</sup>4567890 !</p> 

Let's say we've made selection "1234567890". I've made a picture to explain where anchor and focus nodes and offsets are.