如何将所选元素置于一个可信的元素中

Question

我试过的

我检查了这个问题,这个问题是它给了我当前选择的内容,但我想要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

---

有谁知道如何实现这一目标？Tx :)

Answer 1

您可以使用范围来引用文档的选定部分,然后检查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;

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