在前端开发中，我们时常需要获取用户选择的文本或者元素。但是，当我们得到用户选择的文本时，如何获取它所在的 DOM 元素呢？下面本文将为您介绍几种实用的方法。
方法一：使用 window.getSelection()
window.getSelection() 方法可以获取当前页面的选区对象。通过 getRangeAt() 方法返回的 Range 对象，我们可以获取选区的起始位置和结束位置，从而可以确定选区所在的 DOM 元素。
----- --------- - ---------------------- -- --------------------- - -- - ----- ----- - ------------------------ ----- --------- - ------------------------------ ----- ------- - ------------------ --- - - --------- - --------------------- --------------------- -
这段代码首先获取当前的选区对象，然后通过 rangeCount 属性判断是否有选区存在。如果有选区，就获取第一个 Range 对象并通过 commonAncestorContainer 属性获取选区的公共祖先节点。最后，如果该节点是一个 DOM 元素，则直接返回，否则返回其父节点。
方法二：使用 document.getSelection()
除了 window.getSelection() 方法之外，还可以使用 document.getSelection() 方法来获取选区对象。这两个方法的返回值相同，但是 document.getSelection() 更加方便一些，特别是在 IE 浏览器中。
----- --------- - ------------------------ -- --------------------- - -- - ----- ----- - ------------------------ ----- --------- - ------------------------------ ----- ------- - ------------------ --- - - --------- - --------------------- --------------------- -
以上代码与方法一中的代码完全相同。
方法三：使用 document.activeElement
除了获取选区对象之外，我们还可以通过 document.activeElement 属性来获取当前获得焦点的元素。如果当前焦点在文本框或者其他可编辑的元素上，那么它将返回该元素的引用。
----- ------------- - -----------------------
-- ------------------------------------ --- ---------- --
----------------------------------- --- -------- -
----------------------------------------------------------------------- -----------------------------
- ---- -
----- --------- - ----------------------
-- --------------------- - -- -
----- ----- - ------------------------
----- --------- - ------------------------------
----- ------- - ------------------ --- - - --------- - ---------------------
---------------------
-
-这段代码首先判断当前焦点是否在文本框或者其他可编辑的元素上，如果是，则直接获取选区的文本内容。否则，就获取当前页面的选区对象并按照方法一中的方式获取选区所在的 DOM 元素。
总结
本文介绍了三种获取包含当前选区的 DOM 元素的方法，分别是使用 window.getSelection()、document.getSelection() 和 document.activeElement。无论您选择哪种方法，都可以轻松地获取到用户选区所在的 DOM 元素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28005