createRange 메서드

createRange 메서드는 문서 조각 객체를 생성합니다. 이 조각은 요소의 일부와 텍스트 부분을 포함할 수 있습니다. 이 메서드의 본질을 이해하려면 예제를 참조하세요.

구문

document.createRange();

예제

단락의 내용을 가져옵니다:

<p id="p">
	<b>abcde</b>fg
</p>

let p = document.getElementById('p');

let text = document.createRange();
text.selectNode(p);
alert(text.toString());

코드 실행 결과:

'abcdefg'

예제

이 방법으로는 요소의 내용뿐만 아니라 문서의 어떤 부분도 가져올 수 있습니다. 한 요소에서 시작하여 다른 요소에서 끝나는 부분이라도 가능합니다:

<div id="root">
	<p>
		text1
	</p>
	<p>
		text2
	</p>
</div>

let root = document.getElementById('root');
let start = root.children[0].firstChild;
let end = root.children[1].firstChild;

let text = document.createRange();
text.setStart(start, 12);
text.setEnd(end, 8);
alert(text.toString());

참고 항목

getSelection 메서드