Range对象的setStart方法和setEnd方法

692 阅读1分钟

MDN

首先挂上 MDN 的链接,最权威的解释就在这。
但由于翻译的原因,可能不太好理解。
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…

我的理解

告诉 Range 对象,选中的范围从哪里开始,到哪里结束。

Demo

developer.mozilla.org/zh-CN/docs/… 这个页面的控制台输入并执行以下代码后,观察浏览器中的文本,它会呈现类似你用鼠标选中了一小段文字的效果。

dom = document.querySelector('#content > article > h1')
range = document.createRange()
range.setStart(dom.firstChild,6)
range.setEnd(dom.firstChild,12)
// 在浏览器中呈现选中效果
window.getSelection().addRange(range)

易错点

第一个参数是 node 节点,第二个是偏移量。
如果你是想选中一段文本的第几个字到第几个字,那你传入的第一个参数,不能只传入一个节点,而应该是具体的文本内容,比如在 developer.mozilla.org/zh-CN/docs/… 这个页面你想选中以下内容:
image.png
你就不能这样子传参:
image.png
而是应该将节点下的具体文本节点传进去,如下:
image.png

参考

你还可以在以下地址找到本文: