Если я сделаю выбор на html-странице, и я:
var a = document.getSelection()
Я получаю объект с четырьмя свойствами:
значения первых трех одинаковы, т.е. текст, который я выбрал, но как они отличаются друг от друга и какой из них использовать?
Согласно MDN
Выбор. anchorNode. Возвращает Node, в котором начинается выбор.
Выбор. focusNode. Возвращает Node, в котором заканчивается выбор.
потому что были дебаты по именованию, baseNode - это псевдоним для anchorNode, extentNode для focusNode
Следующее выходит за рамки этого вопроса, но я все равно опубликую его, поскольку в некоторых сценариях я обнаружил, что выбор является сложной частью.
Взгляните на этот пример:
<p>ab12<sup>3</sup>4567890 !</p>
Скажем, мы сделали выбор "1234567890". Я сделал снимок, чтобы объяснить, где находятся якорные и фокусные узлы и смещения.
Я создаю функцию, для которой требуются вложенные контент-элементы. При отладке я заметил, что baseNode и extentNode - это не просто псевдонимы. Я пытаюсь найти документацию на них, так как они не находятся в MDN. Но, основываясь на этом скриншоте, я бы не предположил, что это просто псевдонимы (в Chrome):
Я никоим образом не эксперт, но, экспериментируя, мне кажется, что anchorNode - это node, который был начат, и focusNode, где он закончился (предположительно потому, что он имеет фокус после завершения выбора).
baseNode похоже на anchorNode и extentNode так же, как baseNode, только то, что они не существуют в Firefox, только в Chrome.