Javascript 표준 DOM 범위 작업의 전체 세트_기본 지식

레벨 2 DOM은 DOM 표준을 따르는 브라우저인 경우 createRange() 메서드를 정의합니다(IE는 이 표준을 지원하지 않지만 IE에는 표준에 정의된 것보다 더 많은 속성이나 메서드가 있습니다). 문서 개체에 속하므로 범위 개체를 만들려면 다음을 수행하세요.

var oRange = document.createRange();

브라우저가 이 표준 Range 개체를 지원하는지 확인하려면 다음을 수행하세요. hasFeature() 메서드를 사용하여 감지할 수 있습니다.

var presentsDOMRange = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
var oRange = document. createRange();
//여기에 범위 코드
}
간단한 선택을 위한 범위 개체
선택하려면 Range를 사용하는 것이 가장 쉽습니다. selectNode() 또는 selectNodeContents( ) 메소드, 이 두 메소드에는 수신 매개변수인 DOM 노드가 하나만 있습니다.

selectNode() 메서드는 하위 노드를 포함한 모든 노드를 선택하는 반면, selectNodeContents()는 하위 노드만 선택합니다. 예:

Hello World

<script><br/>var oRange1 = document.createRange() ; <br/>var oRange2 = document.createRange();<br/>var oP1 = document.getElementById("p1");<br/>oRange1.selectNode(oP1);<br/>oRange2.selectNodeContents(oP1);<br/> </script>

oRange1과 oRange2에는 위에서 언급한 두 가지 메소드가 포함되어 있는데, 아래 다이어그램을 보시면 이 두 메소드의 차이점을 금방 아실 수 있을 거라 믿습니다.

Range 객체를 생성할 때 Range 인스턴스는 다음 속성을 갖습니다.
startContainer — 범위 객체가 시작되는 노드 객체를 반환합니다( 첫 번째 노드)
startOffset — Range 시작의 오프셋(오프셋)을 반환합니다. startContainer가 텍스트 노드, 주석 노드 또는 CDATA 노드인 경우 이 속성은 텍스트의 오프셋을 반환합니다. 첫 번째 노드의 인덱스를 반환합니다.
endCOntainer — Range 개체의 마지막 노드 개체(상위 노드의 마지막 노드)를 반환합니다.
endOffset — Range 끝의 오프셋(offset)을 반환합니다. 특성은 startOffset과 동일합니다.
commonAncestorContainer — Range 객체를 포함하는 첫 번째 노드를 반환합니다.

참고: 이러한 속성은 읽기 전용입니다. startOffset 및 endOffset에 대해서는 아래에서 자세히 설명합니다.

다음 코드는 이러한 속성을 설명합니다. Mozilla Firefox에서 실행하세요(이 표준을 지원하는 브라우저 - DOM2 수준은 IE에서 작동하지 않음).

 

 
 

 

안녕하세요 세계

 
 
 
 
 
 
 

oRange1 시작 컨테이너:       시작 오프셋:       끝 컨테이너:       끝 오프셋:       공통 상위 항목:

oRange2  컨테이너 시작:       시작 오프셋:       끝 컨테이너:       끝 오프셋:       공통 상위 항목:

 

위 코드는 댓글로 달지 않습니다. 궁금한 사항은 댓글로 남겨주세요.

Range에는 다른 메소드도 있습니다:
setStartBefore(node) — 노드를 기준으로 Range의 시작 위치를 설정합니다. node
setStartAfter(node) — 위와 동일
setEndBefore — 범위 설정 노드를 기준으로 끝 위치 설정 node
setEndAfter — 위와 동일

복잡한 DOM 범위

복잡한 DOM 범위를 구축하려면 다음이 필요합니다. setStart() 및 setEnd() 두 가지 메소드를 사용하십시오. 이 두 메소드에는 두 개의 매개변수가 있습니다. 하나는 노드 참조와 오프셋입니다.
setStart 메소드에서 노드 참조는 startContainer이고 오프셋은 startOffset입니다.
setEnd() 메소드에서 노드 참조는 endContainer이고 오프셋은 endOffset입니다.

이 두 가지 방법을 사용하는 것은 selectNode() 및 selectNodeContents() 방법과 유사합니다. 예를 들어 아래 useRanges() 함수의 이전 예에서는 setStart() 및 setEnd()를 사용할 수 있습니다.

function useRanges() {
var oRange1 = document.createRange( );
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
var iP1Index = -1;
for (var i=0; i < ; oP1.parentNode.childNodes.length; i ) {
if (oP1.parentNode.childNodes[i] == oP1) {
iP1Index = i;
break;
}
}

oRange1.setStart(oP1.parentNode, iP1Index);
oRange1.setEnd(oP1.parentNode, iP1Index 1);
oRange2.setStart(oP1, 0);
oRange2.setEnd (oP1, oP1.childNodes.length);
//여기에 텍스트 상자 할당
}

노드(oRange1)를 선택할 때 모든 노드를 지정해야 합니다. oP1 상위 노드에서 childNodes 컬렉션에 대한 인덱스입니다.

콘텐츠 선택 코드(oRange2)는 추가 고려가 필요하지 않습니다.

지금의 예에서 이 HTML(코드

World

)
hello의 llo부터 World의 Wo까지의 범위를 선택합니다. setStart() 및 setEnd()를 사용하면 쉽습니다.

먼저 일반 DOM 메서드를 사용하여 텍스트 노드에 대한 참조와 컨테이너 p1에 대한 참조를 가져와야 합니다.

var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;

설명 :
텍스트 Hello는 실제로 컨테이너 p1의 손자 노드이므로 oP1.firstChild를 사용하여 요소를 가져올 수 있습니다. oP1.firstChild.firstChild는 Hello 텍스트 노드의 참조입니다. 컨테이너 p1의 참조입니다.

다음 단계에서는 범위를 만들고 오프셋을 설정합니다.

var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);

설명 :
setStart()의 경우, 텍스트 노드(즉, Hello)에서 문자 l의 위치가 2이므로 오프셋(offset)이 2이므로(위치는 0부터 계산됨), setEnd() 메소드의 오프셋은 위와 같은 이유로 3입니다. World 앞에 공백이 있고 공백도 공간을 차지한다는 점에 유의해야 합니다. 그림에 표시된 대로:

참고:
(Mozilla DOM Range 버그 #135928) 이 Range 메서드를 더 낮은 수준에서 실행하세요. Mozilla 브라우저 버전 setStart() 및 setEnd()가 모두 동일한 텍스트 노드를 가리키는 경우 예외가 발생합니다.

DOM Range를 사용하여 일부 작업 수행
Range를 생성할 때 개체, 범위 내 모든 개체 위에 문서의 조각 노드가 생성되었습니다. 그 전에 Range 개체는 선택한 Range가 올바른 형식임을 증명하기 위해 검증되어야 합니다.
예를 들어 Range

분명히 여기서는 위에서 언급한 것처럼 Range를 만들 때 형식이 올바르지 않습니다. , 조각이 자동으로 생성됩니다. 여기서 조각은 Range의 정확성을 보장하기 위해 일부 요소를 자동으로 동적으로 추가합니다.

He

는 시작 태그 가 자동으로 추가되어 전체 Range가 llo

이 프래그먼트가 생성된 후 Range의 몇 가지 방법을 사용하여 작동할 수 있습니다.

가장 간단한 작업은 deleteContents() 메서드입니다. 이 메서드는 위 작업 후 deleteContents()가 수행됩니다.

Herld

닫는 태그를 추가한 이유는 위에서 언급한 바와 같으며, Range가 잘 되는지 확인하기 위한 것입니다. -형성된 .

extractContents() 메소드는 deleteContents()와 유사하지만 구체적인 작업이 다릅니다. extractContents()는 선택된 Range를 DOM 트리에서 프래그먼트로 이동하고 이 프래그먼트를 반환합니다. Mozilla Firefox에서 실행하면 결과를 보면 이해가 될 것입니다. ——삭제된 llo Wo는 본문 끝에 조각으로 추가됩니다.

Hello World

<script><br/>var oP1 = document.getElementById("p1" );<br/>var oHello = oP1.firstChild.firstChild;<br/>var oWorld = oP1.lastChild;<br/>var oRange = document.createRange();<br/>oRange.setStart(oHello, 2);<br/>oRange.setEnd(oWorld, 3);<br/>var oFragment = oRange.extractContents();<br/>document.body.appendChild(oFragment);<br/></script>

cloneContents() 메서드는 선택한 Range의 조각을 복제할 수 있습니다. 예:

Hello
<script> ;<br/>var oP1 = document.getElementById("p1");<br/>var oHello = oP1.firstChild.firstChild;<br/>var oWorld = oP1.lastChild;<br/>var oRange = document. createRange(); <br/>oRange.setStart(oHello, 2);<br/>oRange.setEnd(oWorld, 3);<br/>var oFragment = oRange.cloneContents();<br/>document.body.appendChild(oFragment );<br/></script>

이 메소드는 extractContents()와 유사하지만 삭제되지 않고 복제됩니다.

범위에서 일부 데이터 삽입

이전 섹션의 메서드는 범위에서 선택한 조각을 제거하는 방법을 해결합니다. 이제 Range에 콘텐츠를 추가하는 방법을 설명합니다.
insertNode() 메소드는 Range에 노드를 삽입할 수 있습니다. Range에 다음 노드를 삽입하려면 어떻게 해야 합니까?
삽입된 텍스트

아래 코드를 살펴보세요.

< ; b>Hello World

<script><br/>var oP1 = document.getElementById("p1");<br/>var oHello = oP1.firstChild.firstChild;<br/> var oWorld = oP1.lastChild;<br/>var oRange = document.createRange();<br/>var oSpan = document.createElement("span");<br/>oSpan.style.color = "red";<br/> oSpan .appendChild(document.createTextNode("삽입된 텍스트"));<br/><br/>oRange.setStart(oHello, 2);<br/>oRange.setEnd(oWorld, 3);<br/>oRange.insertNode(oSpan ) ;<br/></script>

원래 HTML은 다음과 같습니다.

He삽입된 텍스트llo World

surroundContents()의 매개변수는 이 노드를 Range에 추가하는 노드입니다. 아래 예.

Hello World

<script><br/>var oP1 = document.getElementById("p1" );<br/>var oHello = oP1.firstChild.firstChild;<br/>var oWorld = oP1.lastChild;<br/>var oRange = document.createRange();<br/>var oSpan = document.createElement("span") ;<br/>oSpan.style.BackgroundColor = "노란색";<br/><br/>oRange.setStart(oHello, 2);<br/>oRange.setEnd(oWorld, 3);<br/>oRange.surroundContents(oSpan) ;<br/></script>

oRange에서 선택한 범위 내에 새로 생성된 노드 스팬이 있어 선택한 Range의 배경이 노란색으로 변합니다.

collapse() 메서드:

collapse() 메서드에는 선택적인 부울 매개변수가 하나만 있습니다. 즉, 존재할 수도 있고 존재하지 않을 수도 있으며 기본값은 false입니다.
참이면 범위 경계의 시작 부분까지 접히고, 거짓이면 범위 끝 부분까지 접힙니다. 그건

Hello World

<script><br/>var oP1 = document.getElementById("p1");<br/>var oHello = oP1.firstChild.firstChild;<br/>var oWorld = oP1.lastChild;<br/>var oRange = document.createRange();<br/>oRange.setStart(oHello, 2);<br/>oRange. setEnd(oWorld, 3);<br/>oRange.collapse(true); <br/></script>

Range가 축소되었는지 알고 싶다면 다음을 사용할 수 있습니다. 접힌 속성을 사용하여 true 또는 false를 얻을 수 있습니다. 아래 예를 참조하세요.

단락 1

단락 2

<script><br/>var oP1 = document.getElementById("p1");<br/>var oP2 = document.getElementById("p2");<br/>var oRange = document.createRange();<br/>oRange.setStartAfter(oP1);<br/> oRange.setStartBefore(oP2);<br/>alert(oRange.collapsed); //outputs "true"<br/></script>

위 코드는 true를 출력합니다. 축소 방법을 사용하지 않았지만 Range 설정이 1의 끝부터 p2의 시작까지 시작되므로 요소가 없습니다. 즉,

(Range start)(Range end)

이므로 표시된 값은 true입니다.

범위 경계 비교

compareBoundaryPoints() 메서드, 구문은 다음과 같습니다.
compare = Comparerange.compareBoundaryPoints(how, sourceRange)

매개변수 의미:
비교 - 1, 0, -1을 반환합니다. (0은 같음을 의미하고, 1은 비교 범위가 sourceRange 뒤에 있음을 의미하고, -1은 비교 범위가 sourceRange 앞에 있음을 의미합니다.)
어떻게 - 범위 상수인지: END_TO_END |END_TO_START |START_TO_END|START_TO_START
sourceRange - Range 개체의 경계입니다.

아래 예를 살펴보세요.

Hello World

<script><br/>var oRange1 = document.createRange();<br/>var oRange2 = document.createRange();<br/>var oP1 = document.getElementById("p1");<br/>oRange1.selectNodeContents(oP1);<br/> oRange2.selectNodeContents(oP1);<br/>oRange2.setEndBefore(oP1.lastChild);<br/>alert(oRange1.compareBoundaryPoints(Range.START_TO_START, oRange2)) <br/>//출력 0<br/>alert(oRange1 . CompareBoundaryPoints(Range.END_TO_END, oRange2)); <br/>//outputs 1;<br/></script>

다음 그림은 이 두 Range를 결합한 개략도입니다. 위의 설명을 통해 결과를 명확하게 분석할 수 있습니다.

Clone Range

이 작업은 매우 간단하며 명령문 하나만 필요합니다. :

var oNewRange = oRange.cloneRange();

cloneRange() 메서드는 현재 Range의 복사본을 반환합니다. 이 역시 Range 개체입니다.

Range가 차지하는 시스템 리소스 지우기

Range 개체를 생성할 때 detach() 메서드를 사용하여 해당 개체가 차지하는 시스템 리소스를 지우는 것이 가장 좋습니다. . 지워지지는 않지만 GC(가비지 컬렉터)에서도 수집하게 되는데, 해제할 때는 detach()를 사용하는 것이 좋은 습관입니다. 구문은 다음과 같습니다.

oRange.detach();

다음 예제는 Mozilla에서 Range를 사용하여 IE에서 element.insertAdjacentHTML() 메서드를 시뮬레이션합니다.

if (browser.isMozilla) {
HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {
var df; var r = this.ownerDocument.createRange();
스위치( String(sWhere).toLowerCase()) {
케이스 "beforebegin":
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df , this);
break;
case "afterbegin":
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
break;
case "beforeend":
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
break;
case "afterend":
r.setStartAfter(this);
df = r.createContextualFragment( sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
break;
}
};
}