通过单击元素中的任意位置来获取DOM范围

Obtaining a DOM Range by clicking anywhere within an Element

本文关键字：位置 获取 DOM 范围 任意 单击 元素      更新时间：2023-09-26

给定以下HTML。。。

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,
</p>
<p>Tomorrow is the next day, etc, etc....</p>

点击$$DayOfWeek$$返回一个DOM Range对象(通过一个组件，它是与KendoUI捆绑在一起的所见即所得编辑器(。

然后我可以像这样访问整个元素…

var element = range.startContainer.parentElement;
console.log(element);

其输出。。。

<span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>

我想弄清楚的是如何将由整个元素组成的Range对象构造为Range。

所需的"高级"行为是单击一段文本，然后让浏览器选择该元素中的所有文本，返回一个Range对象。

很高兴接受jQuery解决方案。

HTML

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,</p>
<p>Tomorrow is the next day, etc, etc....</p>

JS-

var span = document.querySelector('[data-token]');
span.addEventListener('click', function() {
    var sel = window.getSelection();
    var range = document.createRange();
    sel.removeAllRanges();
    range.setStart(span.childNodes[0], 0);                      
    range.setEnd(span.childNodes[0], span.innerText.length);
    sel.addRange(range);                      
});

给你一把小提琴：http://jsfiddle.net/V66zH/2/

它可能不是超级跨浏览器，但可以在chrome中工作。请参阅JavaScript Set Window selection以了解其他地方的一些附加优化。

还假设只有一个子节点，如您的示例html 中所示

范围的一些附加参考(https://developer.mozilla.org/en-US/docs/Web/API/range)和选择(https://developer.mozilla.org/en-US/docs/Web/API/Selection)

如果我理解正确的话，我想出了一个似乎有效的方法，你希望点击周围的元素产生一个包含该元素中所有内容的范围。

如果没有onclick代码(我认为您可以处理(，下面是您描述的DOM范围代码：

var sel=document.getSelection(); //find the node that was clicked
var rng=sel.getRangeAt();  //get a range on that node
//now, extend the start and end range to the whole element:
rng.setStart(rng.startContainer.parentNode.firstChild);
rng.setEndAfter(rng.endContainer.parentNode.lastChild);
//DEMO: verify the correct range using a temp div/alert:
var t=document.createElement("div");
t.appendChild(rng.cloneContents());
alert(t.innerHTML);
相关文章：