DOM中的范围

最新推荐文章于 2023-08-21 20:30:15 发布
原创 最新推荐文章于 2023-08-21 20:30:15 发布 · 454 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析了DOM中范围（Range）的概念，展示了如何利用document.createRange()创建范围，并详细介绍了Range类型实例的属性如startContainer, endContainer, startOffset, endOffset及commonAncestorContainer。此外，还讲解了如何使用selectNode(), selectNodeContents(), setStart()和setEnd()等函数进行复杂范围的选择。

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

1.范围：通过范围可以选择文档中的一个区域，不必考虑节点的界限。使用document.createRange()方法可以创建范围（Range类型的实例）。新创建的范围直接与创建他的文档关联在一起，不能用于其他文档。

使用Range类型的实例（范围）来选择文档的一部分可以使用selectNode(DOM节点)和selectNodeContents()函数

    Range类型的实例的属性和方法：

          ① startContainer：包含范围起点的节点（即范围起点的父节点）

          ② endContainer：包含范围终点的节点（即范围终点的父节点）

          ③ startOffset：范围起点在startContainer节点的偏移量。若1. startContainer为文本节点，注释节点，或CDATA节点，那么startOffset为范围起点之前跳过的字符数量。2. startContainer为其他节点，那么startOffset为startContainer到范围的起始节点的子节点的数量。

          ④ endOffset：范围终点在endContainer节点的偏移量。若1. endContainer为文本节点，注释节点，或CDATA节点，那么endOffset为范围终点之前跳过的字符数量。2. endContainer为其他节点，那么endOffset为endContainer到范围的终止节点的子节点的数量。

          ⑤ commonAncestorContainer：startContainer 和 endContainer 共同的祖先节点

情况二：startContainer为其他节点：

情况二：endContainer为其他节点： 

 2. 创建复杂的范围使用setStart()和setEnd()函数，参数为参照节点(startContainer)和一个偏移量(startOffset)

 

上述两个函数还可以用于选择节点的一部分

 

DOM2中的Range
惊蛰小鱼的博客
07-15 397
DOM2 级在 Document 类型中定义了 createRange()方法。在兼容 DOM 的浏览器中，这个方法属于 document 对象。使用 hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。 var supportsRange = document.implementation.hasFeature("Range", "2.0"); var alsoS...
DOM、事件、变量类型和作用域
weixin_46766870的博客
12-19 349
dom基础 （一）设置元素的样式 ele.style.stylName = styleValue 元素样式 ele要设置样式的dom对象 styleName 样式名称，驼峰命名 sytlevalue 样式值 （二）innerHTML 1.ele.innerHTML 返回ele元素开始和结束标签之间的HTML ele.innerTEXT与innerHTML区别： innerHTML:在HTML中包括HTML标签都解析成重文本 innerText:只获得到...
DOM范围
weixin_34238642的博客
02-11 146
前面的话 　　为了让开发人员更方便地控制页面，DOM定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。在常规的DOM操作不能更有效地修改文挡时，使用范围往往可以达到目的。本文将详细介绍DOM范围   创建范围 　　Document类型中定义了createRange()方法。在兼容DOM的浏览器中，这个方法属于doc...
DOM 中的范围
weixin_33834679的博客
01-29 294
为了让开发人员更方便控制页面，DOM2 级遍历和范围模块定义了 范围 （range） 接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。 Firefox、Opera、Safari 和 Chrome 都支持 DOM 范围。IE 以专有方式实现了自己的范围特性。 DOM 中的范围 DOM2 级在 Document 类型中定义了 createRange()...
第十二章：DOM2 和 DOM3（范围）
miaoch的博客
05-09 720
DOM2和DOM3范围 为了让开发人员更方便的控制页面，DOM Level 2 Traversal and Range 模块定义了“范围”接口。通过范围可以选择文档的一个区域，而不必考虑节点的界限。这种行为是在后台完成的，对用户是不可见的。IE以专有方式实现了自己的范围特性。 DOM中的范围 DOM2级在Document类型中定义了createRange()方法。使用hasFeature()或者直接
Dom中的范围
charlene0824的博客
01-19 883
DOM2级在Document类型中定义了createRange（）方法。在兼容DOM浏览器的浏览器中，这个方法属于document对象。使用hasFeature（）或者直接检测该方法，都可以确定浏览器是否支持范围 var supportRange=document.implementation.hasFeature("Range","2.0"); 如果浏览器支持范围，那么就可以使用create
DOM 之Range(范围)
weixin_30735745的博客
10-06 406
-------《javascript高级程序设计》 12.4 范围 笔记------- DOM2级在Document类型中定义了createRange()方法，在兼容DOM的浏览器中，这个方法属于Document对象。可以使用HasFeature方法来检测浏览器是否支持范围 var supportsRange = document.implementation.hasFeature(‘R...
（JS基础）DOM：遍历 与 范围
weixin_34023863的博客
03-31 334
遍历（Iterator）"DOM2 级遍历和范围"模块定义了两个方法用于辅助完成顺序遍历 DOM 结构的类型： NodeIterator 和 TreeWalker 。这两个类型能够基于给定的起点对 DOM 结构执行深度优先（depth-first）的遍历操作。基本概念任何节点都可以作为遍历的根节点。引用《JavaScript高级程序设计(第3版)》的插图，表示以 document 对象为根节点：N...
JavaScript DOM——可视宽高、标准模式和混杂模式
DebbyOctober的博客
08-27 395
一、获取宽度和高度(文档、可视区域). a) document.documentElement ===》文档 的 文档元素 #获取可视区域的宽 b) document.body) ===》文档 的 body #获取body的宽 注：获取可视区域的宽度和高度：clientWidth、clientHeight 从这里可以看出左右各8px的边距，1186和1170正好相差16px 设置边距为0，那么结果还是1186 #获取浏览器可视区域和body的高度 二、标准模式和混杂模式 标准模式: document.d
说说 JavaScript 在 DOM2 级标准中定义的范围规则
读万卷书，行万里路
06-01 723
DOM2 级标准中定义的范围，可以选择文档中的一个区域进行处理，解决在某些情况下，常规的 DOM 操作中无法有效修改 DOM 文档的问题。Firefox、Opera、Safari 和 Chrome 都支持 DOM 范围。IE 以专有的方式实现了自己的范围。1. DOM 中的范围可以这样检测浏览器是否支持范围：var supportsRange = document.implementation.ha
前端滚动页面获取可见区域dom
wang9rui的博客
10-29 1010
/* * @Description: 监控dom是否在可视范围内 * @Author: wangrui * @Date: 2021-08-05 13:59:58 */ export default class ViewPortLog { constructor(option) { // const { // type 埋点方式 // targetClass,目标元素class类 // cb 回调函数 // }=option; this.
DOM获取元素、窗口滚动、可视区域
最新发布
gyutdcu的博客
08-21 872
DOM获取元素的方法
DOM 范围折叠要注意的几点
王亮的专栏
07-12 2311
var range = document.createRange(refNode); 1.  调用 range.setEndAfter() 或者  range.setEndBefore() 方法，之前没有调用 setStartAfter(),或者 setStartBefore() 方法，程序会报错。 2. 调用 setStartAfter(),或者 setStartBefore
手把手教你实现关于判断dom进入可视区域的功能实现
m0_59157023的博客
11-16 444
手把手教你实现关于判断dom进入可视区域的功能实现
解析Dom、Bom的作用范围
Geezer_007的博客
04-23 367
DOM： dom是文档对象模型，用来获取或设置文档中标签属性； 例如：获取或者设置input表单的value值； BOM： BOM的核心是window，而window对象又具有双重角色，它既是通过JS访问浏览器窗口的一个接口，又是一个Global对象，这意味着在网页中定义的任何对象、变量和函数都以window作为其global对象； ...
关于DOM范围
dehunying8835的博客
10-02 173
DOM范围主要用于选择文档中的特定部分，用于删除，插入等操作 创建范围 document.createRange() <div id="box"> 　　<p>hellohello<i>world</i></p> 　　<ul> 　　　　<li>1</li> 　　　　<li...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值