XML-Range解析

本文介绍了XML DOM中的Range对象,主要用于图文混排场景,涉及名词解释、获取方法、属性及方法等内容。Range对象表示文档的连续区域,可以用于选取、操作文本、图片等元素。通过Document的createRange和Selection的getRangeAt方法可以获取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在搞图文混排,要插入表情、图片、音频、视频之类的,主要用到XML DOM -Rang对象,恶补下知识,记录之。

转载请注明出处
[我的博客]http://www.lostbug.cn

名词解释

Range对象表示文档的连续区域范围。如用户在窗口中鼠标拖动的连续选中范围。

获取方法

  • 通过Document对象的createRange()方法创建
  • 通过Selection对象的getRangeAt()方法获取

属性

  • Range.collapsed
    返回一个判断Rang起始位置是否相同的boolean值
  • Range.commonAncestorContainer
    返回包含startContainer和endContainer的最深节点
  • Range.endContainer
    返回包含Range终点的节点
  • Range.endOffset
    返回endContainer中表示Range终点位置的数字
  • Range.startContainer
    返回包含Range开始的节点
  • Range.startOffstet
    返回startContainer表示Range起始位置的数字

方法

方法描述
cloneContents()返回新的 DocumentFragment 对象,它包含该范围表示的文档区域的副本。
cloneRange()创建一个新的 Range 对象,表示与当前的 Range 对象相同的文档区域。
collapse()折叠该范围,使它的边界点重合。
compareBoundaryPoints()比较指定范围的边界点和当前范围的边界点,根据它们的顺序返回 -1、0 和 1。比较哪个边界点由它的第一个参数指定,它的值必须是前面定义的常量之一。
deleteContents()删除当前Rang()对象表示的文档区域
detach()通知实现不再使用当前的范围,可以停止跟踪。如果调用了范围的这个方法,那么接下来调用的该范围任何方法都会抛出代码为 INVALID_STATE_ERR 的 DOMException 异常。
extract()删除当前范围表示的文档区域,并且以 DocumentFragment 对象的形式返回那个区域的内容。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很相似。
insertNode()把指定节点插入Range表示文档范围的起始点
selectNode()设置Range表示文档范围的边界点,使它包含指定的节点和它的所有子孙节点。
selectNodeContents()设置该范围的边界点,使它包含指定节点的子孙节点,但不包含指定的节点本身。
setEnd()把该范围的结束点设置为指定的节点和偏移量。
setEndAfter()把该范围的结束点设置为紧邻指定节点的节点之后。
setEndBefore()把该范围的结束点设置为紧邻指定节点之前。
setStart()把该范围的开始点设置为指定的节点中的指定偏移量。
setStartAfter()把该范围的开始点设置为紧邻指定节点的节点之后。
setStartBefore()把该范围的开始点设置为紧邻指定节点之前。
surroundContents()把指定的节点插入文档范围的开始点,然后重定范围中的所有节点的父节点,使它们成为新插入的节点的子孙节点。
toString()返回该范围表示的文档区域的纯文本内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值