zoukankan      html  css  js  c++  java
  • M2级遍历和范围Range

    DOM中的范围

    DOM2在document类中定义了createRange()方法。在兼容DOM的浏览器中,这个方法属于document对象。使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围。

    var supportsRange = document.implemention.hasFeature("Range","2.0");
    var alsoSupportsRange = (typeof documnet.createRange == "function");

    如果浏览器支持range,则可以使用createRange来直接创建DOM范围

    var range = document.createRange();
    与节点类似,新创建的范围也直接与创建它的文档关联在一起,不能用于文档。创建了范围之后,接下来就可以使用它在后台选择文档中的特定部分。而创建文档范围并设置了其位置之后,还可以针对范围的内容执行很多种操作,从而实现对底层DOM树的更精细的控制。

    每个范围由一个range类型的实例表示,这个实例拥有很多的属性和方法。
    startContainer 包含范围起点的节点
    startOffset
    endContainer 包含范围终点的节点
    endOffset
    commonAncestorContainer: startContainer和endContainer共同的祖先节点在文档树中最深的位置。

    为了更精确地控制将哪些节点包含在范围中,还可以使用下列方法

    setStartBefore(refNode)将范围起点设置在refNode之前,因此,refNode也就是范围选区中的第一个子节点。同时会将startContainer设置为refNode.parentNode,将startOffset属性设置为refNode在其父节点的childNodes集合中的索引。
    setStartAfter
    setEndBefore
    setEndAfter

  • 相关阅读:
    解决安装mysql 到start service出现未响应问题
    【日历】自定义(上下月切换)
    html2canvas 无法渲染网络图片及本地 解决方案
    css 弹性盒子--“垂直居中”--兼容写法
    CSS垂直居中
    window.postMessage 在iframe父子页面数据传输
    小程序 rich-text 处理显示
    前端规范
    CSS技巧(一):清除浮动
    博客地址迁移
  • 原文地址:https://www.cnblogs.com/yingzi/p/2624124.html
Copyright © 2011-2022 走看看