Что такое anchorNode, baseNode, extentNode и focusNode в объекте, возвращаемом document.getSelection?

Если я сделаю выбор на html-странице, и я:

var a = document.getSelection()

Я получаю объект с четырьмя свойствами:

  • anchorNode
  • BaseNode
  • extentNode
  • focusNode

значения первых трех одинаковы, т.е. текст, который я выбрал, но как они отличаются друг от друга и какой из них использовать?

Ответы

Ответ 1

Согласно MDN

Выбор. anchorNode. Возвращает Node, в котором начинается выбор.

Выбор. focusNode. Возвращает Node, в котором заканчивается выбор.

потому что были дебаты по именованию, baseNode - это псевдоним для anchorNode, extentNode для focusNode

Следующее выходит за рамки этого вопроса, но я все равно опубликую его, поскольку в некоторых сценариях я обнаружил, что выбор является сложной частью.

Взгляните на этот пример:

<p>ab12<sup>3</sup>4567890 !</p>

Скажем, мы сделали выбор "1234567890". Я сделал снимок, чтобы объяснить, где находятся якорные и фокусные узлы и смещения.

window.getSelection

Ответ 2

Я создаю функцию, для которой требуются вложенные контент-элементы. При отладке я заметил, что baseNode и extentNode - это не просто псевдонимы. Я пытаюсь найти документацию на них, так как они не находятся в MDN. Но, основываясь на этом скриншоте, я бы не предположил, что это просто псевдонимы (в Chrome): введите описание изображения здесь

Ответ 3

Я никоим образом не эксперт, но, экспериментируя, мне кажется, что anchorNode - это node, который был начат, и focusNode, где он закончился (предположительно потому, что он имеет фокус после завершения выбора).

baseNode похоже на anchorNode и extentNode так же, как baseNode, только то, что они не существуют в Firefox, только в Chrome.