javascript - 如何在 contenteditable 元素中获取所选元素

Question

我尝试过的

我 checkout this question , 和 this one ，问题是它给了我当前选择的内容，但我想要 dom 元素。

---

我想做什么

我正在寻找一种方法来获取当前正在使用 javascript 编辑的元素的标记名。例如:

<article contenteditable=true>
    <h2>Some List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item *caret here* 2</li>
        <li>Item 3</li>
    </ul>
</article>

我希望能够将列表项放入 javascript el 变量中。例如，我可以这样做:

el.tagName
el.className

---

有人知道怎么实现吗？发送 :)

Answer 1

您可以使用 Range引用文档的选定部分，然后检查 commonAncestorContainer用于检索 <ul> .
在您的示例中，如果您选择列表的一部分，您可以检索 <ul>像这样:

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var ulTag = range.commonAncestorContainer;

如果您想要获取光标指向的元素(无需选择)，您可以引用 startContainer属性，然后检查 parentNode用于检索 <li> .例如:

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var pointedLiTag = range.startContainer.parentNode;

请注意，这些只是简单的用例，在真实文档中有很多嵌套元素，因此在使用之前，您必须确保检索到的元素是您期望的元素。