Gdybym dokonać wyboru w stronę html i zrobić:Co to jest anchorNode, baseNode, extentNode i focusNode w obiekcie zwróconym przez document.getSelection?
var a = document.getSelection()
uzyskać obiekt z czterema właściwościami:
wartości pierwszych trzech są takie same, tj. Tekst, który wybrałem, ale w jaki sposób są różne i których użyć?
Według MDN
Selection. anchorNode - Zwraca węzeł, w którym rozpoczyna się wybór.
Wybór. focusNode - Zwraca węzeł, w którym kończy się wybór.
ponieważ nie było debaty na temat nazewnictwa, baseNode jest alias dla anchorNode, extentNode dla focusNode
Poniżej znajduje się poza zakresem tej kwestii, ale będę pisać to tak, ponieważ uznałem, że wybór jest trudnym elementem w niektórych scenariuszach.
Spójrz na ten przykład:
<p>ab12<sup>3</sup>4567890 !</p>
Powiedzmy zrobiliśmy wybór "1234567890". Zrobiłem zdjęcie, aby wyjaśnić, gdzie znajdują się węzły i przesunięcia kotwicy i ostrości.
Nie jestem ekspertem, ale eksperymentując wydaje mi się, że anchorNode jest węzłem, w którym rozpoczęto selekcję, i focusNode tym, w którym się zakończył (prawdopodobnie dlatego, że ma fokus po zakończeniu selekcji).
Węzeł baseNode wydaje się być taki sam jak węzeł anchorNode i extentNode taki sam jak węzeł podstawowy, tyle tylko, że nie istnieją w przeglądarce Firefox, tylko w przeglądarce Chrome.
I zostały budowania z funkcji, która wymaga zagnieżdżonych elementów contentEditable. Podczas debugowania zauważyłem, że baseNode i extentNode są tylko aliasami. Próbuję znaleźć na nich dokumentację, ponieważ nie ma ich w MDN. Ale na podstawie tego zrzutu nie zakładam, że są to po prostu aliasy (w Chrome): 
Wygląda na to, że są pewne niespójności (być może błędy) z węzłami baseNode i extentNode, w których nie pasują one odpowiednio do anchorNode i focusNode, niektóre przypadki. Nie widzę jednak żadnego powodu, żeby z nich korzystać. – Synexis