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?

Ibo

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.

Pluralize

There appears to be some inconsistencies (perhaps bugs) with baseNode and extentNode where they do not match anchorNode and focusNode, respectively, in certain cases. I can't see any reason to use them in the first place though. – Hahnke

Nice work for the picture! Note that both baseNode and extentNode have been removed from the MDN page. – Flyblown

Thank you, this helped me fix a problem where baseNode was available in the browser but not in a jest test. I switched to anchorNode and everything works including the jest test. tiny history lesson goes a long way in getting things working. thanks again. – Pga

Answer 2

I have been building out a feature that requires nested contenteditable elements. When debugging I noticed that baseNode and extentNode are NOT just aliases. I am trying to find documentation on them since they are not in MDN. But based on this screenshot I wouldn't assume they are just aliases (in Chrome):

Striated

baseNode and anchorNode are aliases. focusNode and extentNode are aliases. (Not baseNode and extentNode.) Confusing, I know 😊 – Sink

Answer 3

I'm by no means an expert, but by experimenting it seems to me that the anchorNode is the node the selection started on and focusNode the one where it ended (presumably because it has focus once the selection is over).

baseNode seems to be the same as anchorNode and extentNode the same as baseNode, only that they don't exist in Firefox, only in Chrome.

Chrisman

Answer 4

anchorNode and focusNode - there are in every browser. baseNode and extentNode - there are only in Chrome

Aphoristic

The OP is asking for what is the difference between them, not their browser compatibility. I think the OP wants an answer like "anchorNode contains ... and focusNode signifies ... ......." – Selda