获得一个DOM范围通过点击元素

鉴于以下HTML内的任何地方...获得一个DOM范围通过点击元素

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

点击$$ DAYOFWEEK $$返回一个DOM Range对象（通过组件，它是一个WYSIWIG editor bundled with KendoUI）。

那么我就可以访问整个元素，像这样......

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

，输出...

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

什么，我试图找出是如何构造一个Range对象由整个元素组成，作为范围。

所需的“高级别”行为是单击一段文本，并让浏览器选择该元素内的所有文本，返回一个Range对象。

很高兴接受jQuery解决方案。

来源

2013-05-21 Baldy

HTML

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

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/

它可能不是超级跨浏览器，但在铬中工作。请参阅JavaScript Set Window selection以获得其他地方的其他优化。

还假定只有一个childNode在你的榜样HTML

的范围（https://developer.mozilla.org/en-US/docs/Web/API/range）和选择（https://developer.mozilla.org/en-US/docs/Web/API/Selection）

来源

2013-05-21 17:52:42

谢谢马特。确实很容易将你的小提琴调整到编辑器组件中，并简单地将它传递给创建的范围，以便选择整个元素。 – Baldy

在FireFox我在span.innerText上得到一个错误...所以我改变了jsFiddle了一下.. 'var TX = span.textContent || span.innerText; range.setEnd（span.childNodes [0]，TX.length）;' ..这种方式我认为它适用于所有浏览器。 –

这里有一种方法，我想出了，似乎工作，如果我正确理解你，你想围绕一个点击的元素产生一个范围包含在该元素的一切。

没有的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);

来源

2013-05-21 17:50:38 dandavis

+1包裹的范围内进入一个新的div的想法有些额外的基准 - 这是有用的获取在html – Baldy

获得一个DOM范围通过点击元素

回答

相关问题