document.getSelection 返回的对象中的 anchorNode 、 baseNode 、 extentNode 和 focusNode 是什么？

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 ie 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.

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):

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.

Answer 4

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