前言：
这节课主要学习HTML5中关于Range对象的常用API。
1.Range对象初识
作用：一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。
Rnage对象示例：
<body> Range对象初识</br> <input id="btn" type="button" value="提交"> <div id="showRange"></div> <script> function $(ele) { return document.getElementById(ele) } var btn = $('btn') var showRange = $('showRange') var html; btn.onclick = function (){ // 通过getSelection()方法，获取selection对象 var selection = document.getSelection() // 通过rangeCount属性，获取选中内容的个数 var count = selection.rangeCount html = '你选中了' + count + '段内容.' if (count > 0) { for (var i = 0; i < count; i++){ // 通过getRangeAt()方法，获取具体range对象 var range = selection.getRangeAt(i) html += '第' + (i+1) + '段内容为:' + range + '</br>' } } showRange.innerHTML = html } </script> </body>
2.Range对象的selectNode/selectNodeContents/deleteContents方法
方法：
selectNode(node) -- 获取指定节点
selectNodeContents(node) -- 获取指定节点内容
deleteContents --- 删除range选中的节点(或内容)
Rnage方法示例：
<body> <div id="testRange" class="range" style="background-color:pink; 50%; height: 40px"> 测试Range对象的selectNode、selectNodeContents、deleteContents方法 </div> <button id="btn1" onclick="deleteContents(false)">删除内容</button> <button id="btn2" onclick="deleteContents(true)">删除元素</button> <script> function deleteContents (flag) { var testRange = document.getElementById('testRange') // 创建range对象 var range = document.createRange() if (flag){ // 获取当前的元素节点 range.selectNode(testRange) //删除range选中的内容 range.deleteContents() } else { // 获取当前节点的内容 range.selectNodeContents(testRange) //删除range选中的内容 range.deleteContents() } } </script> </body>
3.Range对象的set相关方法
方法：
setStart(node, index) -- 设置Range对象的起点位置
setEnd(node, index) -- 设置Range对象的结束位置
理解：start/end分别表示Range的起点和终点
Before/After分别表示节点的起点和终点
setStartBefore -- 将节点的起点位置设置为Range对象的起点位置
setStartAfter -- 将节点的终点位置设置为Range对象的起点位置
setEndBefore -- 将节点的起点位置设置为Range对象的终点位置
setEndAfter -- 将节点的终点位置设置为Range对象的终点位置
Rnage方法setStart和setEnd示例：
<body> <div id="testRange" class="range" style="background-color:pink; 50%; height: 40px"> 测试Range对象的set相关方法 </div> <button id="btn1" onclick="deleteChar()">删除</button> <script> function deleteChar () { var testRange = document.getElementById('testRange') var textContent = testRange.firstChild // 创建range对象 var range = document.createRange() //设置Range对象的起始位置 range.setStart(textContent, 1) //设置Range对象的结束位置 range.setEnd(textContent, 4) //删除Range对象选中的内容 range.deleteContents() } </script> </body>
Rnage对象的方法setStartBefore/After和setEndBefore/After示例：
<body> <table id="myTable" border="1" cellspacing="0" cellpadding="0"> <tr> <td>内容1</td> <td>内容2</td> </tr> <tr> <td>内容3</td> <td>内容4</td> </tr> </table> <button onclick="deleteRow()">删除第一行</button> <script> function deleteRow() { var table = document.getElementById('myTable') if (table.rows.length > 0){ //获取table中的第一行 var row = table.rows[0] //创建range对象 var range = document.createRange() //设置range的起点 range.setStartBefore(row) //设置range的终点 range.setEndAfter(row) range.deleteContents() } } </script> </body>
4.Range对象cloneRange/cloneContents/extractContents的方法
方法：
cloneRange() -- 克隆Range对象
cloneContents -- 克隆Range对象选中的内容(contents)
extractContents --- 剪切Range对象选中的内容。
Rnage方法示例：
<body> <div id="test" style="background-color:pink; 50%; height: 28px;">测试Range对象的cloneRange/cloneContents/extractContents方法</div> <div id="test1" style="background-color:yellow; 50%; height: 28px;"></div> <button onclick="cloneRange()">cloneRange</button> <button onclick="cloneContents()">cloneContents</button> <button onclick="extractContents()">extractContents</button> <script> // cloneRange()方法的演示 function cloneRange() { var div = document.getElementById('test') // 创建range对象 var range = document.createRange() // 获取指定节点的内容 range.selectNodeContents(div) // 克隆对应的Range对象 var cloneRange = range.cloneRange() console.log(cloneRange.toString()) } // cloneContents()方法的演示 function cloneContents() { var div = document.getElementById('test') // 创建range对象 var range = document.createRange() // 获取指定节点的内容 range.selectNodeContents(div) // 克隆Range对象中选中节点的内容(此处的内容就是div元素) var cloneContents = range.cloneContents() div.appendChild(cloneContents) } // extractContents()方法的演示 function extractContents() { var div = document.getElementById('test') var div1 = document.getElementById('test1') // 创建range对象 var range = document.createRange() // 获取指定节点的内容 range.selectNodeContents(div) // 克隆对应的节点 var extractContents = range.extractContents() div1.appendChild(extractContents) } </script> </body>
5.Range对象collapse/detach的方法
方法：
collapse -- 设置range对象对元素的选择状态
detach --- 释放range对象(不再需要的时候)
Rnage方法示例：
<body> <div id="div" style="background-color: pink; 300px; height: 50px">测试Range的选中取消功能</div> <button onclick="select()">选择元素</button> <button onclick="unselect()">取消选择</button> <button onclick="showContents()">显示选中内容</button> <script> var range = document.createRange() function select () { var div = document.getElementById('div') range.selectNode(div) // 释放掉创建的range对象(不再需要的时候) // range.detach() } function unselect () { var div = document.getElementById('div') // 取消range选中的内容 range.collapse(false) } function showContents () { console.log(range.toString()) } </script> </body>
6.Range对象insertNode/compareBoundaryPoints的方法
方法：
insertNode(node) -- 将参数中的节点移动到range对象的起始位置处
compareBoundaryPoints --- 比较两个Range对象的相对位置
Rnage方法示例：
<body> <div id="div" style="background-color: pink; 300px; height: 50px">测试Range的<b id="boldText">选中</b>取消功能</div> <button onclick="insert()" id="btn">insert</button> <button onclick="compareBoundary()" id="btn">compare</button> <script> // 移动元素位置方法 function insert() { var btn = document.getElementById('btn') var selection = document.getSelection() var range = selection.getRangeAt(0) // 将btn按钮重新移动到鼠标选中的地方 range.insertNode(btn) } // 判断range起/终点位置方法 function compareBoundary() { var boldText = document.getElementById('boldText') var range = document.createRange() range.selectNodeContents(boldText.firstChild) var selection = document.getSelection() var range1 = selection.getRangeAt(0) if (range1.compareBoundaryPoints(Range.START_TO_END, range) <= 0) { console.log("选取的文字在粗体前面") } else if (range1.compareBoundaryPoints(Range.END_TO_START, range) >= 0){ console.log("选取的文字在粗体后面") } } </script> </body>