Question

我尝试了什么

我查看了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

有谁知道如何实现这一目标？ Tx：）

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;

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

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

我尝试了什么

我想做什么

1 个答案: