Range 객체 및 Selection 객체

1632 단어 selectionrange
1. Range 객체
Range 객체는 페이지의 연속 영역을 나타냅니다.Range 객체에서는 페이지의 모든 영역을 가져오거나 수정할 수 있습니다.
 
2. Selection 객체
모든 브라우저 창과 모든 창의 페이지는 사용자가 마우스로 페이지에서 선택한 영역을 대표하는 selection 대상을 가지고 있다.
문을 통해 Selection 객체를 얻으려면 다음과 같이 하십시오.
var selection = document.getselection();

 
3. 페이지 내용 실례 얻기
function rangeTest()
{
     var html;
     showRangeDiv = document.getElementById("showRange");
     selection = document.getSelection();
     if(selection.rangeCount>0)
     {
          html = "    "+selection.rangeCount+"   <br/>";
          for(var i=0;i<selection.rangeCount;i++)
               {
                     var range = selection.getRangeAt(i);
                     html += " "+(i+1)+"    "+range+"<br/>";
                }
                showRangeDiv.innerHTML = html;
     }
}
Selection   Range      
<input type = "button"  value = "   " onclick = "rangeTest()">
<div id = "'showRange"></div>

설명:
1. input 탭으로 Button을 만들고, onclick은rangeTest () 함수입니다.
2. rangeTest() 함수 작성
html 정의
document.getElementById div ID 가져오기
document.getSelection() 사용자가 페이지에서 선택한 마우스를 가져옵니다.
구성if문 (만약 selection.rangeCount>0이라면 사용자가 선택한 내용을 설명합니다)
for 순환문 만들기
selection.getRangeAt(i)
현재 selection 대상에서range 대상을 가져옵니다
i는 RangeCount의 속성 값입니다.
i에 따라 해당range 대상을 되돌려줍니다
3. 사용자가 페이지의 내용을 선택하고 Button을 누르면 함수를 호출하여 선택한 내용을 표시합니다.

좋은 웹페이지 즐겨찾기