[html 5]学習ノート-APIのRangeオブジェクトを編集する(一)
10600 ワード
1、Rangeオブジェクトの基本概念
1つのRangeオブジェクトはページ上の連続領域を表し、Rangeオブジェクトによってページ上の任意の領域を取得または変更することができます.
2、RangeオブジェクトのSelectNodeメソッド、SelectNodeContentsメソッド、deleteContentsメソッド
SelectNodeメソッドは、Rangeオブジェクトの始点を、あるノードの始点として指定し、Rangeの終点を、そのノードの終点として指定し、Rangeオブジェクトの領域にそのノードを含ませるために使用されます.
SelectNodeContentsメソッドは、Rangeオブジェクトの始点を、あるノードのすべてのコンテンツの始点として指定し、Rangeオブジェクトの終点を、あるノードのすべてのコンテンツの終点として指定し、Rangeオブジェクトの領域にそのノードのすべてのコンテンツを含ませるために使用されます.
Rangeオブジェクトに含まれるコンテンツをページから削除するdeleteContentsメソッド.
3、Rangeオブジェクトには、setStart、setEnd、setStart Before、setStartAfter、setEnd Before、setStartAfter、setEndBefore、setEndAfterなど、ページの内容を操作する方法がたくさんあります
setStartは、あるノードの位置をRangeオブジェクトの始点位置に設定するために使用されます.
setEndは、ノードの位置をRangeオブジェクトの終了位置に設定するために使用されます.
setStartBeforeは、あるノードの始点位置をRangeオブジェクトが表す領域の始点位置に設定するために使用されます.
setStartAfterは、あるノードの終点位置をRangeオブジェクトが表す領域の始点位置に設定するために使用されます.
setEndBeforeは、あるノードの始点位置をRangeオブジェクトが表す領域の終点位置に設定するために使用されます.
setEndAfterは、あるノードの終点位置をRangeオブジェクトが表す領域の終点位置に設定するために使用されます.
1つのRangeオブジェクトはページ上の連続領域を表し、Rangeオブジェクトによってページ上の任意の領域を取得または変更することができます.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script>
9 function rangeTest(){
10 var html;
11 showRangeDiv = document.getElementById("showRange");
12 selection = document.getSelection();
13 if(selection.rangeCount>0){
14 html = " >"+selection.rangeCount+"< <br>";
15 for (var i = 0; i < selection.rangeCount; i++) {
16 var range = selection.getRangeAt(i);
17 html+=" "+(i+1)+" :"+range+"<br>";
18 }
19 showRangeDiv.innerHTML = html;
20 }
21 }
22 </script>
23 Selection Range
24 <input type="button" value=" " onclick="rangeTest()"></input>
25 <div id="showRange"></div>
26 </body>
27 </html>2、RangeオブジェクトのSelectNodeメソッド、SelectNodeContentsメソッド、deleteContentsメソッド
SelectNodeメソッドは、Rangeオブジェクトの始点を、あるノードの始点として指定し、Rangeの終点を、そのノードの終点として指定し、Rangeオブジェクトの領域にそのノードを含ませるために使用されます.
SelectNodeContentsメソッドは、Rangeオブジェクトの始点を、あるノードのすべてのコンテンツの始点として指定し、Rangeオブジェクトの終点を、あるノードのすべてのコンテンツの終点として指定し、Rangeオブジェクトの領域にそのノードのすべてのコンテンツを含ませるために使用されます.
Rangeオブジェクトに含まれるコンテンツをページから削除するdeleteContentsメソッド.
1 <body>
2 <script>
3 function deleteRangeContent(onlyContent){
4 var div = document.getElementById("div");
5 var rangeObj = document.createRange();
6 if(onlyContent){
7 rangeObj.selectNodeContents(div);
8 rangeObj.deleteContents();
9 }else{
10 rangeObj.selectNode(div);
11 rangeObj.deleteContents();
12 }
13 }
14 </script>
15 <div id="div" style="background-color:#e0a0b0;width=300px;height=50px">
16
17 </div>
18 <button onclick="deleteRangeContent(true)"> </button>
19 <button onclick="deleteRangeContent(false)"> </button>
20 </body>3、Rangeオブジェクトには、setStart、setEnd、setStart Before、setStartAfter、setEnd Before、setStartAfter、setEndBefore、setEndAfterなど、ページの内容を操作する方法がたくさんあります
setStartは、あるノードの位置をRangeオブジェクトの始点位置に設定するために使用されます.
setEndは、ノードの位置をRangeオブジェクトの終了位置に設定するために使用されます.
1 <body>
2 <script>
3 function deleteChar(){
4 var div = document.getElementById("myDiv");
5 var textNode = div.firstChild;
6 var rangeObj = document.createRange();
7 rangeObj.setStart(textNode,1);
8 rangeObj.setEnd(textNode,4);
9 rangeObj.deleteContents();
10 }
11 </script>
12 <div id="myDiv" style="color:red"> </div>
13 <button onclick="deleteChar()"> </button>
14 </body>setStartBeforeは、あるノードの始点位置をRangeオブジェクトが表す領域の始点位置に設定するために使用されます.
setStartAfterは、あるノードの終点位置をRangeオブジェクトが表す領域の始点位置に設定するために使用されます.
setEndBeforeは、あるノードの始点位置をRangeオブジェクトが表す領域の終点位置に設定するために使用されます.
setEndAfterは、あるノードの終点位置をRangeオブジェクトが表す領域の終点位置に設定するために使用されます.
1 <body>
2 <script>
3 function deleteRow(){
4 var table = document.getElementById("myTable");
5 if (table.rows.length>0) {
6 var row = table.rows[0];
7 var rangeObj = document.createRange();
8 rangeObj.setStartBefore(row);
9 rangeObj.setEndAfter(row);
10 rangeObj.deleteContents();
11 };
12 }
13 </script>
14 <table id="myTable" border="1" cellspacing="0" cellpadding="0">
15 <tr>
16 <td> 1</td>
17 <td> 2</td>
18 </tr>
19 <tr>
20 <td> 3</td>
21 <td> 4</td>
22 </tr>
23 </table>
24 <button onclick="deleteRow()"> </button>
25 </body>