如何获取包含当前选区的 DOM 元素

在前端开发中，我们时常需要获取用户选择的文本或者元素。但是，当我们得到用户选择的文本时，如何获取它所在的 DOM 元素呢？下面本文将为您介绍几种实用的方法。

方法一：使用 window.getSelection()

window.getSelection() 方法可以获取当前页面的选区对象。通过 getRangeAt() 方法返回的 Range 对象，我们可以获取选区的起始位置和结束位置，从而可以确定选区所在的 DOM 元素。

const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  const container = range.commonAncestorContainer;
  const element = container.nodeType === 1 ? container : container.parentNode;
  console.log(element);
}

这段代码首先获取当前的选区对象，然后通过 rangeCount 属性判断是否有选区存在。如果有选区，就获取第一个 Range 对象并通过 commonAncestorContainer 属性获取选区的公共祖先节点。最后，如果该节点是一个 DOM 元素，则直接返回，否则返回其父节点。

方法二：使用 document.getSelection()

除了 window.getSelection() 方法之外，还可以使用 document.getSelection() 方法来获取选区对象。这两个方法的返回值相同，但是 document.getSelection() 更加方便一些，特别是在 IE 浏览器中。

const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  const container = range.commonAncestorContainer;
  const element = container.nodeType === 1 ? container : container.parentNode;
  console.log(element);
}

以上代码与方法一中的代码完全相同。

方法三：使用 document.activeElement

除了获取选区对象之外，我们还可以通过 document.activeElement 属性来获取当前获得焦点的元素。如果当前焦点在文本框或者其他可编辑的元素上，那么它将返回该元素的引用。

-- -------------------- ---- -------
----- ------------- - -----------------------
-- ------------------------------------ --- ---------- -- 
    ----------------------------------- --- -------- -
  ----------------------------------------------------------------------- -----------------------------
- ---- -
  ----- --------- - ----------------------
  -- --------------------- - -- -
    ----- ----- - ------------------------
    ----- --------- - ------------------------------
    ----- ------- - ------------------ --- - - --------- - ---------------------
    ---------------------
  -
-

这段代码首先判断当前焦点是否在文本框或者其他可编辑的元素上，如果是，则直接获取选区的文本内容。否则，就获取当前页面的选区对象并按照方法一中的方式获取选区所在的 DOM 元素。

总结

本文介绍了三种获取包含当前选区的 DOM 元素的方法，分别是使用 window.getSelection()、document.getSelection() 和 document.activeElement。无论您选择哪种方法，都可以轻松地获取到用户选区所在的 DOM 元素。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28005