range基础
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了range基础相关的知识，希望对你有一定的参考价值。
collapse这个方法是把结束位置抛弃掉，并不是简单的设置到开始位置。 结束位置被抛弃掉以后，只要没有给它重新设置位置，它就一直都会等 于开始位置。即使你修改了开始位置，结束位置还是会在修改后的开始位置上。 selection=getSelection(); range=document.createRange(); selection是能看到的选区，range是多个选区片段 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div {width:600px;border:1px solid red;} </style> <script> function selectRange(){ //变量初始化 var editor,selection,range,s; editor=document.getElementById("editor"); s=editor.childNodes; selection=getSelection(); range=document.createRange(); //设置range的开始和结束点 range.setStart(s[2],0); range.setEnd(s[3],0); //移除selection中原有的所有range selection.removeAllRanges(); //把这个新的range添加到selection中 selection.addRange(range); console.log("开始对象",selection.anchorNode); console.log("开始位置",selection.anchorOffset); console.log("结束对象",selection.focusNode); console.log("结束位置",selection.focusOffset); } </script> </head> <body> <div contenteditable="true" id="editor"> 金樽清酒斗十千，玉盘珍馐值万钱。<br/> 停杯投箸不能食，拔剑四顾心茫然。<br/> 欲渡黄河冰塞川，将登太行雪满山。<br/> 闲来垂钓碧溪上，忽复乘舟梦日边。<br/> 行路难！行路难！多歧路，今安在？<br/> 长风破浪会有时，直挂云帆济沧海。<br/> </div> <button onclick="selectRange()">select</button> </body> </html>
以上是关于range基础的主要内容，如果未能解决你的问题，请参考以下文章
Python range 数据类型 [学习 Python 必备基础知识][看此一篇就够了][range()][range 元素元素检测元素索引查找切片负索引][检测 range 对象是否相等](代码片
[vscode]--HTML代码片段（基础版，reactvuejquery）