Question

有一个div在页面上显示HTML。我可以使用选择的文本 window.getSelection();它返回节点列表。还试过window.getSelection().toString();它返回字符串。

我需要的是选择DOM而不是文本或节点列表。我想在仅使用javascript选择文本时添加data-child属性。

因此，如果显示的文字为<div>xyz</div>，则选择后该文字应为<div data-child="id-1">xyz</div>。

Answer 1

你可以尝试这种方法..（如果只有你在你的div中引导文本节点）

window.getSelection().focusNode.parentElement     //returns the selected element

所以你可以像

那样设置attr

window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1');

您可以将其包装在鼠标中。当前div的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id natus voluptatibus eum explicabo soluta excepturi?
    </div>
    <div id="myDiv2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id natus voluptatibus eum explicabo soluta excepturi?
    </div>

    <script>
        var myDiv = document.getElementById('myDiv')
        myDiv.addEventListener('mouseup', function(){
            window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1');
        })
    </script>
</body>
</html>

或者最好的方法是将attr添加到选定的＆＃39; div＆＃39;只有，如果有很多div

var div = document.querySelectorAll('div')
for(var i = 0; i < div.length; i++){
    div[i].addEventListener('mouseup', function(){
     window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1');
    }, false)
}

如果所选文本是HTML，如何使用javascript获取选定的DOM？

1 个答案: