如何在内容可编辑元素中获取所选元素

How to get the selected element inside a contenteditable element

本文关键字：元素 获取 编辑      更新时间：2023-09-26

我试过什么

我

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

有谁知道如何实现这一目标？德克萨斯州:)

您可以使用

Range 来引用文档的选定部分，然后检查 commonAncestorContainer 以检索<ul>。
在您的示例中，如果您选择列表的一部分，则可以使用以下内容检索<ul>：

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

如果您想获取光标指向的元素（没有选择），您可以参考 startContainer 属性，然后检查检索<li>的parentNode。例如：

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

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

相关文章：