页面上有一个显示 HTML 的 div。
我可以使用获取选定的文本
window.getSelection();它返回节点列表。
也尝试过window.getSelection().toString();它返回字符串。
我需要的是选择 DOM，而不是文本或节点列表。我想在仅使用 javascript 选择文本时添加 data-child 属性。
所以，如果显示的文本是 <div>xyz</div> ，应该变成<div data-child="id-1">xyz</div>选择后。
最佳答案
您可以尝试这种方法..(如果您的 div 中有直接文本节点)
window.getSelection().focusNode.parentElement //returns the selected element
这样你就可以设置 attr
window.getSelection().focusNode.parentElement.setAttribute('data-id', 'id-1');
您可以将其与当前的 div 一起包装在“mouseup”事件中
<!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>
或者，如果有很多 div，最好的方法是仅将 attr 添加到选定的“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)
}
关于javascript - 如果所选文本是 HTML，如何使用 javascript 获取所选 DOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46870154/