你的位置:首页 > 网页设计

[网页设计]html5学习笔记4


Range对象基本用法

效果图如下(在谷歌浏览器下的展示)

代码如下

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body><script>  function test()  {    var html="";    var showRange=document.getElementById("test");    selection=document.getSelection();    if (selection.rangeCount <= 0) {    } else {      for (var i = 0; i < selection.rangeCount; i++) {        var range = selection.getRangeAt(i);        html+="您选取的内容为["+range+"]</br>";      }      showRange.innerHTML=html;    }  }</script><p>为中国奥运健儿加油</p><input type="button" onclick="test()" value="点击"/><div id="test"></div></body></html>

在火狐浏览器下的展示

为什么会出现这种情况呢,因为火狐浏览器下可以针对不连续的内容多选.

Range对象之SelectNode和selectNodeContents方法

效果图如下

代码内容如下:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body><script>  function deleteRangeContent(statusContent)  {   var div=document.getElementById("range");    var rangeObject=document.createRange();    if(statusContent)    {      rangeObject.(div);      rangeObject.deleteContents();    }    else    {      rangeObject.selectNode(div);      rangeObject.deleteContents();    }  }</script><div style="width:300px;height: 30px;background-color: #ec7dff" id="range">查看效果</div><input type="button" onclick="deleteRangeContent(true)" value="删除div内部内容"/><input type="button" onclick="deleteRangeContent(false)" value="删除div及内部内容"/></body></html>

selectNodeContents是选定div里边的内容,selectNode是选定div包括里边的内容.

Range对象之setStart和setEnd方法

效果图如下


我们误以为是会删除”中国奥运”四个字,但是实际上删除的只有“国奥运”.

Range对象之setStartBefore和setEndAfter方法

效果图如下

代码如下

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    table,tr,td    {      border:1px solid;    }  </style></head><body><script>  function deleteContent()  {    var tableElement=document.getElementById("tb");    if(tableElement.rows.length>0)    {      var range=document.createRange();      var row=tableElement.rows[0];      range.setStartBefore(row);      range.setEndAfter(row);      range.deleteContents();    }  }</script><table id="tb" style="border:1px solid;">  <tr>    <td>第一行第一列</td>    <td>第一行第二列</td>  </tr>  <tr>    <td>第二行第一列</td>    <td>第二行第二列</td>  </tr></table><button onclick="deleteContent()">删除table行</button></body></html>

该实例中定义了table的开始位置和结束位置来删除.