DOM2范围

mikyou 发布于2019-08-21 10:33 / 2011人阅读

摘要：范围有而中有这个方法接收一个元素，并选择该元素的所有文本，包括标签。如果在范围选区中包含标签可以用属性读取范围全部内容。

DOM2范围

除了IE低版本（ie8-)，其余主流浏览器都支持DOM2的范围，然而IE用其特有的方式实现了范围特性！
Document类型中定义了createRange()，这个方法属于document对象，首先检测浏览器是否支持他：
var supportRange=document.implementation.hasFeature("Range","2.0");
var supportRange2=(typeof document.createRange=="function");

这是初步创建范围后在控制台输出的，拿其中较为关键的属性来说>_<
startContainer与endContainer他们通常是指向相同元素（前者为选区中第一个元素的父节点，后者为选区中最后一个元素的父节点）
startOffset通常等于父节点的childNodes的第一个子节点的索引，在兼容DOM的浏览器中空格算为一个文本节点。
要使用范围选择文档中的一部分，可以使用selectNode()和selectNodeContents()，他们都接收一个参数，即范围的起点，前者选择自身与子，后者只选择子。
为了更精确更方便地控制范围引入了一些更为方便的方法，如下：
setStartBefore(refNode) => 将范围设置在refNode之前，即refNode是范围开始的第一个子节点，所以startContainer就是refNode的父节点
setStartAfter(refNode) => 将范围设置在refNode之后，即refNode的下一个同辈节点才是选区的第一个子节点，所以refNode不在范围之内
setEndBefore(refNode) => 将范围的终点设置在refNode之前，即refNode的上一个同辈节点是选区的最后一个子节点，所以refNode不在范围之内
setEndAfter(refNode) => 将范围的终点设置在refNode之后，即refNode是选区的最后一个子节点，所以refNode在范围之内

复杂操作：

 setStart(node, offset)    =>     设置起点的位置，node是对startContainer的引用，偏移则是startOffset
 setEnd(node, offset)      =>     设置结束点的位置，node是对endContainer的引用，偏移则是startOffset

这段代码最后剩下Herld 虽然把范围内的文本删了，但是DOM结构仍然不会变。
与deleteContents()类似的方法有extractContents()，但后者这个方法会返回选区的内容，因此可以利用他来插入到页面的其他位置。
cloneContents()这个方法，如果只是要创建一个范围的副本而不去删除或移除范围的内容可以用他，语法名称代表用法，即克隆内容。

插入DOM范围中的内容：
使用insertNode()方法可以在范围选区开始处插入一个节点

强调范围选区不同后续操作不同！
在使用完范围之后，最好调用detach()方法，清理范围，回收内存,一旦分离了范围就不能再使用了。
range.detach(); // 从文档中分离
range=null; // 解除引用

IE8及更低版本中的DOM范围

准确来说IE高版本以及低版本都支持文本范围，是IE独有的特性，其他浏览器不支持，语法名称代表用法，所以主要用于文本。

选择某一区域用方法findText(),他会找到第一次出现的文本，然而他第二个参数如果为负值就会找最后一个匹配成功的文本，正值就会找到第一个匹配成功的文本，这也就说明了图中为什么找到hELLO而不是另外两个的原因了！
当中的变量found只要在匹配到文本时就会返回true，匹配不区分大小写在某些操作上也许会带来方便，可以用属性text，来获取范围选中的文本。
DOM范围有selectNode()而IE中有=>moveToElementText() =>这个方法接收一个DOM元素，并选择该元素的所有文本，包括HTML标签。如果在范围选区中包含HTML标签可以用属性htmlText读取范围全部内容。
属性text可以读取文本也可以修改文本，如下：

可见hELLO的部分已经被替代成hello，但标签没有被替代，如果想把标签替换掉可以用pasteHTML()，例如：range1.pasteHTML("hello");
但是上述做法会引起冲突，不提倡！
IE中使用方法duplicate()复制文本范围，如同cloneContents()，新创建的范围带有原范围相同的属性。例：var range=range.duplicate();

这是我个人的一点总结，有些属性方法未提及的！

GPU云服务器云服务器 dom0和dom2 行范围日期范围数值范围

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85758.html

DOMJS高级程序设计笔记——DOM2和DOM3

摘要：对象包含下列属性返回整条规则对应的文本包括选择符和花括号返回当前规则的选择符一个对象返回规则中所有的样式当前规则所属的样式表表示规则类型的常量值。从文档中分离解除引用推荐在使用完范围后再执行上述两个步骤。 DOM1级主要定义了HTML和XML文档的底层结构，DOM2和DOM3则在DOM1的基础上引入了更多的交互功能，支持了更高级的XML特性。DOM2和DOM3分为许多模块（模块之间具...

zzir 2019-08-21 16:19 评论0 收藏0
高程3总结#第12章DOM2和DOM3

摘要：如果不需要伪元素信息，第二个参数可以输操作样式表类型表示的是样式表，包括通过元素包含的样式表和在元素中定义的样式表表示样式表是否被禁用的布尔值。包括元素的高度可见的水平滚动条的高度上边框高度和下边框高度。显示处理指令节点。 DOM2和DOM3 DOM变化针对XML命名空间的变化有了XML命名空间，不同XML文档的元素就可以混合在一起，共同构成格式良好的文档，而不必担心发生命名冲突...

Acceml 2019-08-23 12:01 评论0 收藏0
DOM扩展,DOM2和DOM3

摘要：扩展选择符的核心是两个方法和。目前已完全支持的浏览器有和。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有事件处理程序或引用了其他对象子树时，就有可能导致内存占用问题。删除集合中指定位置的规则。 DOM扩展选择符API Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll(...

suxier 2019-08-21 10:45 评论0 收藏0
JavaScript DOM2和DOM3——“范围”的注意要点

摘要：级遍历和范围模块定义了范围接口。折叠范围方法折叠就是指范围中未选择文档的任何部分。表示折叠到范围的起点，参数表示折叠到范围的终点。常量指定比较当前范围的点和指定范围的点。下节再讨论及更早版本中的范围 DOM2级遍历和范围模块定义了范围接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。 DOM中的范围 DOM2级在Document类型中定义...

happyhuangjinjin 2019-08-19 17:20 评论0 收藏0
温故js系列（10）-事件event

摘要：当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象，通过处理函数传递。比如右击文本框输入区域，会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 评论0 收藏0