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

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.