52

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?

Rishul Matta
  • 3,383
  • 5
  • 23
  • 29

4 Answers4

120

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.

window.getSelection

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Laimonas
  • 5,781
  • 2
  • 19
  • 20
  • 8
    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. – Synexis Mar 16 '16 at 21:46
  • 5
    Nice work for the picture! Note that both baseNode and extentNode have been removed from the MDN page. – chailong Jun 18 '19 at 07:46
12

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): enter image description here

tjmehta
  • 28,667
  • 4
  • 21
  • 18
  • 1
    `baseNode` and `anchorNode` are aliases. `focusNode` and `extentNode` are aliases. (Not `baseNode` and `extentNode`.) Confusing, I know – CWD Subs Oct 24 '22 at 15:01
5

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.

ehrencrona
  • 6,102
  • 1
  • 18
  • 24
4

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

Tigran Petrosyan
  • 41
  • 1
  • 1
  • 1
    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 ... ......." – Lakshya Raj Feb 13 '21 at 23:21