JavaScript 고급 프로그래밍 DOM 연구 노트_javascript 기술

Chapter 10 DOM
DOM은 XML 및 HTML 문서용 API입니다. 이는 텍스트 노드 조작을 위한 속성과 메서드를 지정하고 특정 구현은 각 브라우저에서 구현됩니다.
1. 노드 계층
1) 문서 노드: 문서, 각 문서의 루트 노드입니다.
2) 문서 요소: 요소는 문서의 가장 바깥쪽 요소이자 문서 노드의 첫 번째 하위 노드입니다.
3) 노드 유형:
①노드는 DOM에 있는 다양한 노드 유형의 기본 유형으로 동일한 기본 속성과 메소드를 공유합니다.
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.TEXT_NODE(3)
□
□ Node. ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.COMMENT_NODE(8); 🎜>□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12)
각 노드의 nodeType 속성은 다음과 같은 유형을 반환합니다. 상수 .
노드 유형은 nodeType 속성을 숫자 값과 비교하여 얻을 수 있습니다.
②nodeName 및 nodeVlue 속성.
③childNodes 속성에는 각 노드의 하위 노드 정보가 저장되고, childNodes 속성에는 NodeList 객체가 저장됩니다.
□ 배열과 유사한 객체인 NodeList 객체는 길이 속성을 가지지만 Array의 인스턴스는 아닙니다.
□ NodeList의 노드에 액세스하려면 대괄호를 사용하거나 item() 메서드를 사용할 수 있습니다.
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ NodeList를 배열 객체로 변환합니다.
function ConvertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //IE가 아님
}catch ( 예){
array = new Array();
for(var i = 0,len = node.length; i array.push(nodes[i]);
}
} return array;
}
④parentName 속성: 문서 트리의 상위 노드를 가리킵니다.
⑤previousSibling 속성 및 nextSibling 속성: 이전/다음 형제 노드.
⑥firstChild 속성 및 lastChild 속성: 이전/다음 하위 노드.
7hasChildNodes() 메서드: 하위 노드가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
8appendChild() 메서드: childNodes 목록 끝에 자식 노드를 추가하고 새로 추가된 노드를 반환합니다.
⑨insertBefore() 메소드: 두 개의 매개변수: 삽입할 노드와 참조로 사용되는 노드. 새로 추가된 노드를 반환합니다.
⑩replaceChild() 메서드: 두 개의 매개 변수: 삽입할 노드와 교체할 노드. 새로 추가된 노드를 반환합니다.
⑾removeChild() 메서드: 노드를 제거합니다.
⑿cloneNode() 메서드: 부울 값을 허용합니다. true는 깊은 복사, 노드 및 하위 노드 복사를 의미합니다. false는 얕은 복사를 의미하며 자체 노드만 복사합니다.
⒀nomalize() 메서드: 문서 트리의 텍스트 노드를 처리합니다.
4) 문서 유형(문서 객체의 경우)
①문서 유형은 HTMLDocument 유형의 인스턴스인 문서를 나타내며 전체 HTML 페이지를 나타냅니다. 문서 개체는 창 개체의 속성이며 전역 개체로 액세스할 수 있습니다.
②documentElement 속성. 이 속성은 항상 HTML 페이지의
요소를 가리킵니다.
③body 속성은
요소를 직접 가리킵니다. ④doctype 속성: 다양한 브라우저에서 지원되는
에 액세스합니다. 제한된 사용.

⑤title 속성: 제목의 텍스트를 얻어와 설정할 수 있습니다.
⑥URL 속성: 주소 표시줄의 URL입니다. 7domain 속성: 페이지의 도메인 이름(설정 가능, 제한 있음)
⑧referrer 속성: 현재 페이지에 링크된 페이지의 URL 저장
9getElementById() 메소드: 페이지의 ID를 전달 요소를 반환하고 요소 노드를 반환합니다.
⑩getElementsByTagName() 메서드: 요소 이름을 전달하고 NodeList를 반환합니다.
□ NodeList와 유사하게 HTML의 HTMLCollection 객체를 반환합니다.
□ HTMLCollection 개체에 액세스합니다: 대괄호 구문, item() 메서드, 명명된Item() 메서드. HTMLCollection 개체는 요소의 name 특성을 통해 컬렉션의 항목을 가져올 수도 있습니다.
⑾getElementsByName() 메서드: 지정된 name 속성을 가진 모든 요소를 ​​반환합니다.
⑿특별 컬렉션, 이 컬렉션은 HTMLCollection 객체입니다.
□ document.anchors: 문서에서 name 속성을 가진 모든
요소를 포함합니다.
□ document.applet: 문서의 모든
요소를 포함합니다. □ document.forms: 문서의 모든
요소를 포함합니다. □ document.images: 문서의 모든
요소를 포함합니다.

□ document.links: 문서에서 href 속성이 있는 모든
요소를 포함합니다. ⒀DOM 일관성 감지: document.implementation 속성은 객체에 해당 정보와 기능을 제공합니다.
□ 이 개체에는 hasFeature()라는 한 가지 메서드가 있습니다. 두 개의 매개 변수는 감지할 DOM 기능의 이름과 버전 번호입니다. □ 기능: Core, XML, HTML, Views, StyleSheets, CSS, CSS2, Events, UIEvents, MouseEvents, MutationEvents, HTMLEvents, Range, Traversal, LS, LS-Async, Validation
⒁출력 스트림 웹 페이지 작성 : write(), writeln(), open() 및 close().
5) 요소 유형
①은 XML 또는 HTML 요소를 나타내는 데 사용되며 요소 태그 이름, 하위 노드 및 속성에 대한 액세스를 제공합니다.
② nodeName 속성 또는 tagName 속성을 사용하여 요소 태그 이름에 액세스할 수 있습니다. tagName은 HTML에서는 대문자 태그 이름을 반환하고 XML에서는 변경되지 않은 상태로 반환합니다.
(1) HTML 요소
■모든 HTML 요소는 Element 유형의 하위 클래스인 HTMLElement 유형으로 표현되며 다음 속성을 갖습니다.
□id: 문서에 있는 요소의 고유 식별자입니다.
□title: 요소에 대한 추가 설명 정보로, 일반적으로 도구 설명 표시줄을 통해 표시됩니다.
□lang: 요소 콘텐츠의 언어 코드로 거의 사용되지 않습니다.
□dir: 언어의 방향, 값은 "ltr" 또는 "rtl"이며 거의 사용되지 않습니다.
□className: 해당 요소의 class 속성에 해당하며, 해당 요소에 지정된 CSS 클래스입니다.
위 속성을 사용하여 해당 특성 값을 얻거나 수정할 수 있습니다.
(2) 속성 가져오기
①getAttribute() 메서드: 인식된 속성과 사용자 정의 속성의 값을 가져올 수 있습니다.
□모든 요소의 모든 속성은 DOM 요소 자체의 속성을 통해서도 액세스할 수 있습니다. Alert(div.id);alert(div.align);
□인식된(비맞춤형) 기능만 속성 형태로 DOM 개체에 추가됩니다.
□style 속성은 getAttribute()를 통해 속성값 CSS 텍스트에 액세스합니다. 개체는 속성을 통해 액세스됩니다.
□onclick 속성: getAttribute(), JS 코드 문자열을 반환합니다. 속성 액세스를 통해 함수를 반환합니다.
□일반적으로 속성은 속성을 통해 얻어집니다. 사용자 정의 속성 값을 얻을 경우에만 getAttribute()를 사용하세요.
(3) 속성 설정
①setAttribute(): 두 개의 매개변수, 설정할 속성의 이름과 값. 속성이 이미 존재하는 경우 setAttribute()는 기존 값을 지정된 값으로 대체하고, 속성이 존재하지 않는 경우 setAttribute()는 속성을 생성하고 해당 값을 설정합니다.
□이 방법은 HTML 속성과 사용자 정의 속성을 모두 사용할 수 있습니다.
□인식된 특성은 모두 속성이므로 속성에 직접 값을 할당하면 속성의 값을 설정할 수 있습니다.
□IE6, IE7에서는 setAttribute()가 클래스와 스타일을 설정하면 이벤트 핸들러가 아무런 영향을 미치지 않습니다. 그러나 속성을 통해 특성을 설정하는 것은 권장되지 않습니다.
②removeAttribute(): 요소의 속성을 완전히 제거합니다(IE6에서는 지원되지 않음).
(4) 속성 속성
① 이 속성은 NameNodeMap 객체(NodeList와 유사한 "동적" 컬렉션)를 포함합니다. 요소의 각 속성은 Attr 노드로 표시되며 각 노드는 NameNodeMap 개체에 저장됩니다.
□getNameItem(name): nodeName 속성이 name과 같은 노드를 반환합니다.
□removeNameItem(name): nodeName 속성이 name과 같은 노드를 목록에서 제거합니다.
□setNameItem(node): 노드의 nodeName 속성을 인덱스로 사용하여 목록에 노드를 추가합니다.
□item(pos): 디지털 pos 위치에 위치한 노드를 반환합니다.
(5) 요소 생성
① document.createElement() 메서드를 사용하여 새 요소를 생성합니다. 매개변수: 태그 이름.
② IE의 createElement()는 IE7 및 IE6의 문제를 방지하기 위해 전체 요소 태그를 전달할 수 있습니다.
□ 동적으로 생성된 ")
}
(6) 요소 하위 노드
① 요소의 childNode 속성에는 요소, 텍스트 노드, 주석 또는 처리 지침 등 모든 하위 노드가 포함됩니다.
□일반 브라우저는 childNodes를 구문 분석할 때 요소 노드 공간의 공백 문자를 텍스트 노드로 구문 분석하지만 IE는 그렇지 않습니다. 따라서 순회 실행 작업에서는 nodeType 속성을 확인해야 합니다.
For(var i= 0, len = element.childNode.length; i> len; i ){
If(element.childNodes[i].nodeType == 1){
//뭔가 실행 일부 작업
}
}
□Element 노드는 getElementByTagName() 메서드를 지원합니다.
6) 텍스트 유형
①텍스트 노드는 텍스트 유형으로 표현되며 HTML 코드가 없는 일반 텍스트 콘텐츠를 포함합니다.
□하위 노드를 지원하지 않습니다(아니요).
□ nodeValue 속성과 data 속성은 Text 노드에 포함된 텍스트에 액세스할 수 있습니다.
②작업 텍스트 노드
□appendData(text): 노드 끝에 텍스트를 추가합니다.
□deleteData(offset,count): 오프셋 위치부터 count 문자를 삭제합니다.
□insertData(offset,text): 오프셋 위치에 텍스트를 삽입합니다.
□replaceData(offset,count,text): 텍스트를 사용하여 오프셋으로 지정된 위치부터 시작하는 문자열을 오프셋 개수로 바꿉니다.
□splitText(offset): 현재 텍스트 노드를 offset으로 지정된 위치에서 두 개의 텍스트 노드로 분할합니다.
□substringData(offset,count): offset으로 지정된 위치부터 시작하여 offset count에서 끝나는 문자열을 추출합니다.
□텍스트 노드에는 노드의 문자 수를 저장하는 길이 속성이 있습니다. nodeValue.length와 data.length에도 동일한 값이 저장됩니다.
○텍스트 노드 값을 수정하면 문자열이 HTML로 인코딩되고 특수 기호가 이스케이프됩니다.
div.firstChild.nodeValue = "Someother" //Output Someother > >
③텍스트 노드 생성
□ document.createTextNode()를 사용하여 새 텍스트 노드를 생성합니다. 매개변수: 삽입할 텍스트(HTML 또는 XML 형식으로 자동 인코딩됨)
④정규화된 텍스트 노드
□DOM 작업은 동일한 상위 요소에 여러 텍스트 노드를 삽입할 수 있지만 혼동을 일으킬 수 있습니다.
□노드 유형을 통해 상속된 Normalize() 메서드는 동일한 상위 요소의 모든 텍스트 노드를 병합할 수 있습니다.
⑤텍스트 노드 분할
□텍스트 유형 메소드 SplitText(): 노드 메소드 Normalize()와 달리 위치 매개변수를 전달하고 위치에서 두 개의 텍스트 노드로 분할한 후 다음 텍스트 노드를 반환합니다.
□텍스트 노드 분할은 텍스트 노드에서 데이터를 추출하는 일반적인 DOM 구문 분석 기술입니다.
7) Comment 유형
□Comment 유형은 Text 유형과 동일한 기본 클래스를 상속하므로 SplitText()를 제외한 모든 문자열 연산 메소드를 갖습니다.
□Comment 노드는 document.createComment()를 사용하여 생성할 수 있습니다.
8) CDATASection 유형
□CDATASection 유형은 XML 기반 문서의 CDATA 영역만 나타냅니다.
□CDATASection 유형은 Text 유형을 상속하며 SplitText()를 제외한 모든 메소드를 갖습니다.
□모든 주요 브라우저에서는 이 유형을 올바르게 구문 분석할 수 없습니다.
9) DocumentType 유형
□IE는
을 지원하지 않습니다.□DocumentType 개체는 DOM 레벨 1에서 동적으로 생성될 수 없습니다.
□DocumentType 개체는 document.doctype에 저장됩니다.
◇name 속성: 문서 유형 이름입니다.
◇entities 속성: 문서 유형으로 설명되는 엔터티의 NamedNodeMap 개체입니다.
◇notation 속성: 문서 유형에 따라 설명되는 기호의 NamedNodeMap 개체입니다.
10) DocumentFragment 유형
□DOM은 문서 조각이 노드를 포함하고 제어할 수 있지만 완전한 문서와 같은 추가 리소스를 차지하지 않는 "경량" 문서라고 규정합니다.
□문서 조각은 문서에 추가할 수 없으며 문서 조각만 "창고"에 저장된 노드로 추가됩니다.
var 조각 = document.createDomFragment();
var ul = document.getElementById("myList");
var li = null; ){
li = document.createElement("li"); li.appendChild(document.createTextNode("haha"))
fragment.appendChild(li)
ul.appendChild.appendChild(li);
□appendChild() 또는 insertBefore()를 통해 문서 조각의 내용을 문서에 추가할 수 있습니다.
11) 속성 유형
□은 노드이지만 속성은 DOM 문서 트리의 일부로 간주되지 않습니다. 이러한 노드는 거의 사용되지 않습니다.
□Attr 객체에는 3가지 속성이 있습니다.
◇name 속성: 속성 이름(예: nodeName)
◇value 속성: 속성 값(예: nodeValue)
◇지정된 속성: 부울 값, 사용되는 속성 구별 속성이 코드에 지정되어 있는지 아니면 기본값인지 여부입니다.
□ 기능 노드에 직접 접근하는 것은 권장되지 않습니다. getAttribute()
setAttribute() 및 RemoveAttribute() 메서드를 사용하는 것이 좋습니다. 0

2. DOM 확장
1. 프레젠테이션 모드
①문서 객체의 compatMode 속성
□값은 "CSS1Compat"이며 표준 모드입니다.
□값은 'BackCompact'로 혼합 모드입니다.
②IE8은 문서 객체에 대한 새로운 속성 documentMode를 도입하여 5(혼합 모드), 7(시뮬레이션 모드), 8(표준 모드) 값을 반환합니다.
2. 스크롤
□스크롤 방법은 모두 HTMLElement 유형입니다. 확장이 존재하며 요소 노드에서 사용할 수 있습니다.
□scrollIntoView(bool): 요소가 뷰포트에 표시되도록 브라우저 창이나 컨테이너 요소를 스크롤합니다. (매개변수가 true이거나 생략된 경우 맨 위로 스크롤합니다.)
□scrollIntoViewIfNeeded(bool): 현재 요소가 뷰포트에 표시되지 않는 경우 브라우저 창이나 컨테이너 요소만 스크롤하여 현재 요소를 표시합니다. (Safari 및 Chrome 구현).
□scrollByLines(lineCount): 지정된 줄 수만큼 요소의 내용을 스크롤합니다. lineCount는 양수/음수일 수 있습니다. (Safari, Chrome에서 사용 가능)
3. children 속성
□children 속성은 해당 요소의 하위 노드 중 해당 요소인 노드만 포함합니다.
□HTMLCollection 객체.
□Firefox는 이를 지원하지 않습니다. IE의 하위 컬렉션에는 주석 노드가 포함됩니다.
4. Contains() 메소드
□는 검색 시작점인 조상 노드에서 호출되어야 하며, 검색할 노드를 매개변수로 전달해야 합니다. 노드를 현재 노드의 자손으로 전달하려면 true를 반환합니다.
□Firefox는 Contains() 메서드를 지원하지 않으며 DOM3 수준에서 대체 CompareDocumentPosition() 메서드를 구현하여 두 노드 간의 관계를 결정합니다. 2.x 이하의 Safari 버전은 지원되지 않습니다.
다양한 브라우저 코드와 호환 가능:
function contain(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit > =552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node ​​​​=== refNode){
return true; node = node.parentNode;
}while(node ​​​​!== null);
return false
}
}
5.innerText 속성
□노드 문서집의 모든 텍스트를 얕은 것부터 깊은 것까지 읽을 수 있습니다.
□ inner.Text 속성을 통해 노드 텍스트를 설정하면 기존의 모든 하위 노드가 제거되고 DOM 트리가 완전히 변경됩니다.
□이 속성에 할당된 텍스트는 자동으로 HTML로 인코딩됩니다.
□Firefox는 innerText를 지원하지 않지만 유사한 기능을 가진 textContent 속성을 지원합니다.
□innerText: IE, Safari, Opera, Chrome 지원
□textContent: Safari, Firefox, Opera, Chrome 지원
호환 코드:
function getInnerText(element){
return(요소 유형 .textContent == "string")?element.textContent:element.innerText;
}

function setInnerText(element, text){
if(typeof element.textContent == "string") {
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML 속성
□정보를 읽을 때 현재 요소를 반환합니다. 모든 하위 노드의 HTML 표현입니다.
□정보 작성 시 지정된 값에 따라 새로운 DOM 하위 트리가 생성되고, 현재 요소의 모든 하위 노드가 이 하위 트리로 대체됩니다.
□innerHTML 제한: <script> 요소 삽입은 실행되지 않습니다. <style>을 삽입해도 비슷한 문제가 있습니다. <BR>□ 모든 요소에 innerHTML 속성이 있는 것은 아닙니다. 지원되지 않는 요소는 <col>, <colgroup>, <frameset>, <head>, <html>, <style>, <table>, <tbody>, <thead>, <tfoot>, <title> 및 <tr>입니다. . <BR> ③outerText 속성 <BR>□기본적으로 innerText와 동일하지만, 정보 작성 시 포함된 노드가 교체된다는 점이 다릅니다. <BR>□Firefox에서는 지원하지 않습니다. <BR>□권장하지 않습니다. <BR> ④outerHTML 속성 <BR>□은 기본적으로 innerHTML과 동일합니다. 차이점은 정보를 작성할 때 포함된 노드가 대체된다는 것입니다. <BR>□Firefox는 <BR>□권장하지 않습니다 <BR>⑤메모리 및 성능 문제 <BR>□ 하위 노드의 innerText, innerHTML, externalText, externalHTML 교체로 인해 브라우저에서 메모리 문제가 발생할 수 있습니다. 삭제된 하위 트리의 요소에 의해 설정된 이벤트 핸들러나 JS 객체의 값을 가진 속성이 메모리에 여전히 존재합니다. <BR>□ 새로운 HTML을 대량으로 삽입할 때는 여러 DOM 작업을 거치는 것보다 HTML을 사용하는 것이 훨씬 효율적입니다. <BR>3. DOM 운용 기술<BR>1. 동적 스크립트<BR>①외부 파일 삽입: <BR>function loadScript(url){ <BR>var script = document.createElement("script") <BR> script .type = "text/javascript"; <BR>script.src = url; <BR>document.body.appendChild(script); <BR>} <BR> ②JavaScript 코드 지정<BR>□IE 중장 <script>는 특수 요소로 취급되며 해당 하위 노드에 대한 DOM 액세스를 허용하지 않습니다. <BR>호환 방법: <BR>function loadScriptString(code){ <BR>var script = document.createElement("script") <BR>script.type = "text/javascript" <BR>try{ <BR>script.appendChild(document.createTextNode(code)); <BR>}catch(ex){ <BR>script.text = code; <BR>} <BR>document.body.appendChild(script); } <BR>2. 동적 스타일<BR>①외부 링크<BR>function loadStyles(url){ <BR>var link = document.createElement("link") <BR>link.rel = "stylesheet"; >link.href = url; <BR>var head = document.getElementsByTagName("head")[0]; <BR>head.appendChild(link); <BR>} <BR><BR> 요소를 사용하여 임베디드 CSS <BR>□IE는 <style>를 <BR>와 유사한 특수 노드로 취급하며 하위 노드에 대한 액세스를 허용하지 않습니다. <style>□ <script> 요소를 재사용하고 styleSheet.cssText 속성을 다시 설정하면 브라우저가 중단될 수 있습니다. <BR>fucnction loadStyleString(css){ <style>var style = document.createElement("style"); <BR>style.type = "text/css" <BR>try{ <BR>style.appendChild(document .createTextNode(css)); <BR>}catch(ex){ <BR>style.styleSheet.cssText = css; <BR>} <BR>var head = document.getElementsByTagName("head")[0]; 🎜>head.appendChild(style); <BR>} <BR>3. 연산 테이블 <BR>① <BR> 요소에 추가된 속성 및 메서드 <BR>□caption: <BR> 요소를 저장합니다. 포인터 <table>□tBodies: <BR> 요소의 HTMLCollection입니다. <caption>□tFoot: <BR> 요소에 대한 포인터를 보유합니다(있는 경우). <tobdy>□tHead: <BR>에 대한 포인터를 보유합니다. 요소(있는 경우) <tfoot>□rows: 테이블의 모든 행에 대한 HTMLCollection입니다. <BR>□createTHead(): <thead> 요소를 생성하여 테이블에 배치하고 참조를 반환합니다. <BR>□createCaption(): <BR>□deleteTHead(): <thead> 요소를 삭제합니다. <BR>□deleteTFoot(): <BR>□deleteCaption(): <thead>□deleteRow(pos): <BR>□insertRow(pos): 행 컬렉션의 지정된 위치에 행을 삽입합니다. <BR> ② <BR> 요소에 추가된 속성과 메소드는 다음과 같습니다. <BR>□rows: <BR> 요소에 있는 행의 HTMLCollection을 보유합니다. <tbody>□deleteRow(pos): 지정된 위치의 행을 삭제합니다. <BR>□insertRow(pos): 행 컬렉션의 지정된 위치에 행을 삽입하고 삽입된 행의 참조를 반환합니다. <tbody>3<BR> 요소에 추가된 속성 및 메소드 <BR>□cells: <BR> 요소에 셀의 HTMLCollection을 저장합니다. <tr>□deleteCell(pos): 지정된 위치의 셀을 삭제합니다. <BR>□insertCell(pos): 셀 컬렉션의 지정된 위치에 셀을 삽입하고 삽입된 셀 참조를 반환합니다. <tr>4. NodeList <BR>□NodeList 및 해당 "가까운 친척" NamedNodeMap(요소 유형의 속성 속성) 및 HTMLCollection을 사용합니다. 이 세 가지 컬렉션은 "동적"이며 문서 구조가 변경될 때마다 변경됩니다. <BR>□ NodeList 방문 횟수를 줄여보세요. NodeList에 액세스할 때마다 문서 기반 쿼리가 실행되기 때문입니다. NodeList에서 얻은 값을 캐싱하는 것을 고려해보세요. <BR><BR>11장 DOM2 및 DOM3 <BR>1. DOM 변경<br>1. XML 네임스페이스 변경<br>①노드 유형 변경<BR>■DOM2 수준에서 노드 유형에는 다음과 같은 네임스페이스가 포함됩니다. 특정 속성.<BR>□localName: 네임스페이스 접두사가 없는 노드 이름입니다. <BR>□namespaceURI: 네임스페이스 URI, 지정하지 않으면 null입니다. <BR>□prefix: 네임스페이스 접두사, 지정하지 않으면 null입니다. <BR>■DOM 레벨 3 <BR>□isDefaultNamespace(namespaceURI): 지정된 네임스페이스URI는 현재 기본 네임스페이스의 경우 true를 반환합니다. <BR>□lookupNamespaceURI(prefix): 주어진 접두사의 네임스페이스를 반환합니다. <BR>□lookupPrefix(namespaceURI): 주어진 네임스페이스URI의 접두사를 반환합니다. <BR> ②문서 유형 변경 <BR>■DOM2 레벨에서 네임스페이스 관련 <BR>□createElementNS(namespaceURI, tagName): 지정된 tagName을 사용하여 네임스페이스 네임스페이스URI에 속하는 새 요소를 생성합니다. <BR>□createAttributeNS(namespaceURI, attributeName): <BR>□getElementBytagNameNS(namespaceURI, tagName): <BR> ③Elment 유형 변경 <BR>■DOM 레벨 2 코어 <BR>□getAttributeNS(namespaceURI, localName) <BR> □getAttributeNodeNS(namespaceURI, localName) <BR>□getElementsByTagNameNS(namespaceURI, localName) <BR>□hasAttributeNS(namespaceURI, localName) <BR>□removeAttributeNS(namespaceURI, localName) <BR>□setAttributeNodeNS(attrNode): 세트는 다음에 속합니다. 네임스페이스 네임스페이스URI의 특성 노드입니다. <BR> ④NamedNodeMap 유형 변경 <BR>□getNamedItemNS(namespaceURI, localName) <BR>□removeNamedItemNS(namespaceURI, localName) <BR>□setNamedItemNS(node): 노드를 추가합니다. 이 노드는 네임스페이스 정보를 미리 지정했습니다. <BR>2. 기타 측면의 변경 사항 <BR>①DocumentType 유형 변경 <BR>□새 속성 3개 추가: publicId, systemId 및 InternalSubset <BR>□publicId 및 systemId는 문서 유형 선언에서 두 개의 정보 세그먼트를 나타냅니다. <BR>□internalSubset: 문서 유형 선언에 포함된 추가 정의에 액세스하는 데 사용됩니다. <BR> ②문서 유형 변경 <BR>□importNode() 메서드: 한 문서에서 노드를 가져온 다음 이를 다른 문서로 가져와 문서 구조의 일부로 만듭니다. <BR>◇각 노드에는 자신이 속한 문서를 나타내는 ownerDocument 속성이 있습니다. <BR>◇appendChild()에 전달된 노드가 다른 문서에 속해 있어 오류가 발생합니다. <BR>◇ importNode() 메서드는 복사할 노드와 하위 노드를 복사할지 여부를 나타내는 부울 값이라는 두 가지 매개 변수를 허용하는 Element의 cloneNode 메서드와 매우 유사합니다. 원본 노드의 복사본을 반환하지만 현재 문서에서 사용할 수 있습니다. <BR>□defaultView 속성: 해당 문서를 소유한 창(또는 프레임)에 대한 포인터를 저장합니다. <BR>◇IE에서는 이 속성을 지원하지 않지만, 이에 상응하는 parentWindow 속성이 있습니다. <BR>◇ 문서 소유권 창 호환성 코드 결정: <BR>var parentWindow = document.defaultView || document.parentWindow; <BR>□createDocuemntType(): 문서 유형 이름, publicId의 세 가지 매개 변수를 허용하는 새 DocumentType 노드를 만듭니다. , 시스템 ID. <BR>□createDocument() 메서드: 새 문서를 생성합니다. 세 가지 매개변수: 문서 요소의 네임스페이스URI, 문서 요소의 태그 이름, 새 문서의 문서 유형. <BR>□"DOM2 수준 HTML" 모듈은 document.implementation에 createHTMLDocument()라는 새로운 메서드를 추가합니다. 제목의 텍스트만 매개변수로 허용됩니다. 새로운 HTML 문서를 반환합니다. <html>, <head>, <title>, <body>이 포함됩니다. <BR> ③노드 유형 변경 <BR>□isSupported() 메서드: DOM1 수준에서 document.implementation에 의해 도입된 hasFeature() 메서드와 유사합니다. 현재 노드에 어떤 기능이 있는지 확인하는 데 사용됩니다. 두 개의 매개변수: 기능 이름과 기능 버전 번호. <BR>□isSameNode() 메서드: 노드를 전달하고 참조 노드와 동일한 노드인 경우 true를 반환합니다. <BR>□isEqualNode() 메서드: 노드를 전달하고 참조 노드와 같으면 true를 반환합니다. <BR>□setUserData() 메서드: 노드에 데이터를 할당합니다. 세 가지 매개변수: 설정할 키, 실제 데이터 및 처리 기능. <BR>◇처리 함수는 테이블 작업 유형 값(1 복사 2 가져오기 3 삭제 4 이름 바꾸기), 데이터 키, 데이터 값, 소스 노드 및 대상 노드의 5개 매개변수를 허용합니다. <BR>var div = document.createElement("div"); <BR>div.setUserData("name","Nicholas",fucntion(작업, 키, 값, src, 대상){ <BR>if(작업 = = 1){ <BR>dest.setUserData(key, value); <BR>} <BR>}); <BR>IVFrame 변경<BR>□프레임과 인라인 프레임은 각각 HTMLFrameElement와 HTMLIFrameElement로 표현됩니다. <BR>□contentDocument 속성: DOM2 수준 중간 프레임과 내부 프레임의 새로운 속성입니다. 이 속성에는 프레임의 내용을 나타내는 문서 개체에 대한 포인터가 포함되어 있습니다. <BR>□contentDocument 속성은 문서 유형 인스턴스이므로 모든 속성과 메서드를 포함하여 다른 HTML 문서처럼 사용할 수 있습니다. <BR>□IE8은 이전에는 프레임에서 contentDocument 속성을 지원하지 않았지만, 프레임의 창 객체를 반환하는 contentWindow라는 속성을 지원했습니다. <BR>□인라인 프레임 문서 객체 호환 코드에 액세스: <BR>var iframe = document.getElementById("myIframe"); <BR>var iframeDoc = iframe.contentWindow.document <BR>2. 스타일 <BR>1. <BR>요소의 스타일에 접근합니다. ①스타일 속성 <BR>□style 속성을 지원하는 HTML 요소는 JS에 해당 스타일 속성을 가지고 있습니다. <BR>□이 스타일 개체는 cssStyleDeclaration의 인스턴스이며 스타일 속성을 통해 지정된 스타일을 포함합니다. <BR>□스타일 속성에 지정된 모든 CSS 속성은 이 스타일 개체의 해당 속성으로 나타납니다.대시를 사용하는 CSS 속성 이름은 js를 통해 액세스하기 전에 카멜 표기법으로 변환해야 합니다. float 속성은 직접 사용할 수 없습니다. IE는 styleFloat를 사용하여 액세스하고 다른 브라우저는 cssFloat를 사용하여 액세스합니다. <BR>□ 요소에 스타일 속성이 설정되지 않은 경우 스타일 개체에 일부 기본값이 포함될 수 있지만 이러한 값은 요소의 올바른 스타일 정보를 반영하지 않습니다. <BR> ②DOM 스타일 속성 및 메소드 <BR>1) DOM2 레벨은 스타일 객체에 대한 일부 속성과 메소드도 정의합니다. 속성 값을 제공할 때 스타일을 수정할 수도 있습니다. <BR>□cssText: 스타일 속성에서 CSS 코드에 접근합니다. <BR>□length: 요소에 적용된 CSS 속성의 개수입니다. <BR>□parentRule: CSS 정보를 나타내는 CSSRule 객체입니다. <BR>□getPropertyCSSValue(propertyName): cssText 및 cssValueType 두 가지 속성을 포함하여 지정된 속성 값을 포함하는 CSSValue 객체를 반환합니다. <BR>□getProperytPriority(propertyName): 지정된 속성이 !important 설정을 사용하는 경우 "important"를 반환하고, 그렇지 않으면 빈 문자열을 반환합니다. <BR>□item(index): 해당 위치의 CSS 속성 이름을 반환합니다. <BR>□removeProperyt(propertyName): 스타일에서 지정된 속성을 제거합니다. <BR>□setProperty(propertyName, value, Priority): 주어진 속성을 해당 값으로 설정하고 우선순위 플래그("important" 또는 빈 문자열)를 추가합니다. <BR>2) 길이 속성을 디자인하기 위해 <BR>□을 사용하는 목적은 item() 메소드와 함께 사용하기 위함입니다. 요소에 정의된 CSS 속성을 반복하기 위해. <BR>□Firefox, Safari, Opera9 이상, Chrome은 모두 이러한 속성과 메서드를 지원합니다. IE는 cssText만 지원합니다. <BR>□getPropertyCSSValue()는 Safari 및 Chrome에서만 지원됩니다. <BR> ③컴퓨티드 스타일 <BR>□ "DOM2 레벨 스타일"은 document.defaultView를 강화하고 getCompulatedStyle() 메서드를 제공합니다. <BR>□getCompulatedStyle(): 매개변수 2개: 계산된 스타일을 가져오는 요소와 의사 요소 문자열(예: after). 의사 요소 정보가 필요하지 않은 경우 두 번째 매개변수는 null일 수 있습니다. CSSStyleDeclaration 객체를 반환합니다(style 속성과 동일한 유형). <BR>□IE는 getCompulatedStyle() 메소드를 지원하지 않습니다. 그러나 IE에서 스타일 속성이 있는 요소에는 현재 요소의 계산된 모든 스타일을 포함하는 currentStyle 속성(CSSStyleDeclaration의 인스턴스)이 있습니다. <BR>□ 계산된 스타일 호환 코드: <BR>var myDiv = document.getElementById("myDiv"); <BR>var 계산된Style = document.defaultView.getCompulatedStyle(mydiv, null) <BR>alert; (computedStyle.width); <BR>alert(computedStyle.height); <BR>2. 스타일시트 조작 <BR>①CSSSStyleSheet 유형<BR>1) <link> 요소 스타일시트와 <style> 요소 스타일시트를 조작합니다. <BR>2) 브라우저가 DOM2 수준 스타일 시트를 지원하는지 확인합니다. <BR>var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheet","2.0"); <BR>3) CSSStyleSheet는 CSS가 아닌 스타일 시트를 정의하는 기본 인터페이스로 사용할 수 있는 StyleSheet에서 상속됩니다. StyleSheet 인터페이스에서 상속된 속성은 다음과 같습니다. <BR>□disabled: 스타일 시트가 비활성화되었는지 여부를 나타내는 부울 값입니다. 읽기/쓰기. 비활성화하려면 true로 설정하세요. <BR>□href: <link>을 통해 스타일시트가 포함된 경우 스타일시트의 URL이고, 그렇지 않으면 null입니다. <BR>□미디어: 현재 스타일 시트에서 지원하는 모든 미디어 유형의 모음입니다. 모든 DOM 컬렉션과 마찬가지로 length 속성과 item() 메서드가 있습니다. <BR>□ownerNode: 현재 스타일 시트를 소유한 노드에 대한 포인터입니다. @import를 통해 가져온 경우 속성은 null입니다. IE는 이 속성을 지원하지 않습니다. <BR>□parentStyleSheet: @import를 통해 현재 스타일 시트를 가져오는 경우 이 속성은 이를 가져온 스타일 시트에 대한 포인터를 가리킵니다. <BR>□title: ownerNode의 title 속성 값입니다. <BR>□type: 스타일 시트 유형을 나타내는 문자열입니다. CSS 스타일 시트의 경우 이 문자열은 "type/css"입니다.<BR>■위 속성은 비활성화를 제외하고 모두 읽기 전용입니다. <BR>4) CSSStyleSheet는 위 내용을 기반으로 다음과 같은 속성과 메서드를 추가합니다. <BR>□cssRule: 스타일 시트에 포함된 스타일 규칙의 모음입니다. IE는 이를 지원하지 않지만 유사한 규칙 속성을 가지고 있습니다. <BR>□ownerRule: @import를 통해 스타일 시트를 가져온 경우 이 속성은 가져오기를 나타내는 규칙을 가리키는 포인터입니다. 그렇지 않으면 null입니다. IE는 이 속성을 지원하지 않습니다. <BR>□deleRule(index): cssRules 컬렉션의 지정된 위치에 있는 규칙을 삭제합니다. IE는 이를 지원하지 않지만 유사한 RemoveRule() 메소드를 지원합니다. <BR>□insertRule(rule,index): cssRules 컬렉션의 지정된 위치에 규칙 문자열을 삽입합니다. IE는 이를 지원하지 않지만 유사한 addRule() 메소드를 지원합니다. <BR>5) 스타일 시트 개체 가져오기 <BR>□문서에 적용된 모든 스타일 시트는 document.styleSheets 컬렉션으로 표시됩니다. 문서 내 스타일 시트의 개수는 이 컬렉션의 length 속성을 통해 얻을 수 있으며, 각 스타일 시트는 대괄호 구문이나 item() 메서드를 통해 액세스할 수 있습니다. <BR>var sheet = null; <BR>for(var i = 0, len = document.styleSheets.length; i < len; i ){ < len; i ){ <BR>sheet = document.styleSheets[i] <BR>alert( sheet.href); <BR>} <BR>□ document.styleSheet가 반환하는 스타일시트도 브라우저마다 다릅니다. 모든 브라우저에는 <style> 요소와 rel 속성이 "stylesheet"로 설정된 <link> 요소에 의해 도입된 스타일시트가 포함되어 있습니다. <BR>□ CSSStyleSheet 객체는 <link> 또는 <style> 요소를 통해 직접 얻을 수 있습니다. DOM은 sheet라는 CSSStyleSheet 객체를 포함하는 속성을 지정합니다. IE는 이를 지원하지 않지만 IE는 유사한 styleSheet 속성을 지원합니다. <BR>function getStyleSheet(element){ <BR>return element.sheet || <BR>} <BR>//첫 번째 <link> 요소에 의해 도입된 스타일 시트 가져오기 <BR>var link = document .getElementsByTagName("link")[0]; <BR>var sheet = getStylesheet(link); <BR>②CSS 규칙<BR>1) CSSRule 개체는 스타일 시트의 각 규칙을 나타내며 다른 유형에 대한 리소스입니다. 가장 일반적인 CSSStyleRule 유형인 기본 유형은 스타일 정보를 나타냅니다. <BR>2) CSSStyleRule 객체에는 다음 속성이 포함됩니다. <BR>□cssText: IE에서 지원하지 않는 전체 규칙에 해당하는 텍스트를 반환합니다. <BR>□parentRule: 현재 규칙이 가져온 규칙인 경우 이 속성은 가져온 규칙을 참조하고, 그렇지 않은 경우 이 값은 null입니다. IE는 지원하지 않습니다. <BR>□parentStyleSheet: 현재 규칙이 속한 스타일 시트입니다. IE는 지원하지 않습니다. <BR>□selectorText: 현재 규칙의 선택기 텍스트를 반환합니다. <BR>□style: 규칙에서 특정 스타일 값을 설정하고 가져올 수 있는 CSSStyleDeclaration 개체입니다. <BR>□type: 규칙 유형을 나타내는 상수 값입니다. 스타일 규칙의 경우 이 값은 1입니다. IE는 지원하지 않습니다. <BR>■가장 일반적으로 사용되는 속성은 cssText, selectorText 및 style입니다. <BR>□cssText 속성은 style.cssText 속성과 유사하지만 동일하지는 않습니다. 전자에는 스타일 정보를 둘러싼 선택기 텍스트와 중괄호가 포함되어 있으며, 후자에는 스타일 정보만 포함되어 있습니다(요소의 style.cssText와 유사). cssText는 읽기 전용인 반면 style.cssText는 읽기/쓰기입니다. <BR>var sheet = document.styleSheets[0]; <BR>var rule = sheet.cssRules || sheet.rules; <BR>var rule = rule[0] <BR>alert(rule.style.BackgroundColor) ; <BR>rule.style.BackgroundColor="red"; <BR> ③ 규칙 만들기 <BR>□insertRule() 메서드: 규칙 텍스트와 규칙을 삽입할 위치를 나타내는 인덱스라는 두 가지 매개 변수를 허용합니다. //IE는 <BR>sheet.insertRule("body{Background-color:silver}",0)을 지원하지 않습니다. //DOM 메서드. <BR>□addRule(): IE에서 지원됩니다. 두 가지 필수 매개변수: 선택기 텍스트 및 CSS 스타일 정보. 선택적 매개변수: 규칙을 삽입할 위치입니다. //IE에서만 지원됩니다.<BR>Sheet.addRule("body","ground-color:silver",0) <BR>□크로스 브라우저 호환<BR>function insertRule(sheet, selectorText, cssText, position) { <BR>if(sheet.insertRule){ <BR>sheet.insertRule(selectorText "{" cssText "}", position); <BR>}else if(sheet.addRule){ <BR>sheet.addRule(selectorText , cssText,position); <BR>} <BR>} <BR>호출: insertRule(document.styleSheets[0], "body", "Background-color:red", 0) <BR>□필요할 때 추가하려면 규칙이 많으면 작업이 번거로워집니다. 스타일 시트를 동적으로 로드하는 것이 좋습니다. <BR>4삭제 규칙<BR>□sheet.deleteRule(0); //DOM 메서드, IE는 지원하지 않습니다. <BR>Sheet.removeRule(0); //IE 메서드, 둘 다 삭제할 ​​규칙을 전달합니다. <BR>□크로스 브라우저 호환성: <BR>function deleteRule(sheet, index){ <BR>if(sheet.deleteRule){ <BR>Sheet.deleteRule(index) <BR>}else if(sheet.removeRule; ){ <BR>Sheet.removeRule(index); <BR>} <BR>} <BR>호출 방법: deleteRule(document.styleSheets[0],0) <BR>□이 접근 방식은 실제 웹에서는 사용되지 않습니다. 개발 일반적인 관행. 규칙을 삭제하면 CSS 계단식 효과에 영향을 미칩니다. 주의해서 사용하세요. <BR>3. 크기(DOM2 스타일이 아니지만 모든 브라우저에서 지원됨) <BR>①오프셋 치수(오프셋 치수) <BR>정의: 화면에서 요소가 차지하는 모든 표시 공간을 포함합니다. 요소의 표시되는 크기는 모든 패딩, 스크롤 막대 및 테두리 크기를 포함하여 높이와 너비에 따라 결정됩니다(참고, 여백은 포함되지 않음) <BR>□offsetHeight: 요소가 세로 방향으로 차지하는 공간의 양 , 픽셀 단위입니다. <BR>□offsetWidth: 가로 방향에서 요소가 차지하는 공간의 양(픽셀 단위). <BR>□offsetLeft: 요소의 왼쪽 테두리와 포함된 왼쪽 내부 테두리 사이의 픽셀 거리입니다.<BR>□offsetTop: 요소의 위쪽 테두리에서 포함 요소의 위쪽 내부 테두리까지의 거리(픽셀)입니다. <BR>ΔoffsetLeft 및 offsetTop 속성은 포함 요소와 관련되며 포함 요소의 참조는 offsetParent 속성에 저장됩니다. offsetParent 속성은 parentNode의 값과 반드시 ​​동일할 필요는 없습니다. <BR>Δ이러한 속성은 읽기 전용이므로 액세스할 때마다 다시 계산해야 합니다. 재사용할 경우에는 지역 변수에 저장해야 합니다. <BR> ②클라이언트 영역 크기(클라이언트 차원) <BR>요소 콘텐츠 및 패딩의 크기입니다. 스크롤 막대가 차지하는 공간은 포함되지 않습니다. <BR>□clientWidth 속성: 요소의 콘텐츠 영역 너비에 왼쪽 및 오른쪽 패딩 너비를 더한 값입니다. <BR>□clientHeight 속성: 요소의 콘텐츠 영역 높이에 상단 및 하단 패딩 높이를 더한 값입니다. <BR>□ document.documentElement 또는 document.body(IE6 혼합 모드)를 사용하여 브라우저 뷰포트 크기를 결정합니다. <BR>함수 getViewport(){ <BR>if(document.compatMode == "BackCompat"){ <BR>return{ <BR>width:document.body.clientWidth, <BR>height:document.body.clientheight <BR>}; <BR>}else{ <BR>return{ <BR>width:document.documentElement.clientWidth, <BR>height:document.documentElement.clientHeight <BR>} <BR>} <BR> ③스크롤 크기 <BR>는 스크롤 내용을 담고 있는 요소의 크기를 의미합니다. <BR>□scrollHeight: 스크롤 막대를 제외한 요소 콘텐츠의 전체 높이입니다. <BR>□scrollWidth: 스크롤 막대를 제외한 요소 콘텐츠의 전체 너비입니다. <BR>□scrollLeft: 콘텐츠 영역 왼쪽에 숨겨진 픽셀 수입니다. 이 속성을 설정하면 요소의 스크롤 위치를 변경할 수 있습니다. <BR>□scrollTop: 콘텐츠 영역 위에 숨겨진 픽셀 수입니다. 이 속성을 설정하면 요소의 스크롤 위치를 변경할 수 있습니다. <BR>◇문서의 전체 높이를 결정할 때(뷰포트 기준 최소 높이 포함), 스크롤 너비/클라이언트Width 및 스크롤 높이/클라이언트 높이의 최대값을 얻어야 크로스 브라우저를 보장할 수 있습니다. <BR>Var docHeight = Max.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); <BR>Var docWidth = Max.max(document.documentElement.scrollWidth,document.docuemntElement.clientWidth) <BR> : 혼합 모드에서 실행되는 IE의 경우 document.documentElement 대신 document.body를 사용해야 합니다. <BR>◇scrollLeft 및 scrollTop 속성을 사용하여 요소의 현재 스크롤 상태를 확인하고 요소의 스크롤 위치를 설정할 수 있습니다. <BR>function scrollToTop(element){ <BR>if(element.scrollTop != 0){ <BR>element.scrollTop = 0; <BR>} <BR>} <BR>4요소 크기 결정<BR>□ IE, Firefox3 이상 및 Opera9.5 이상에서는 각 요소에 대해 getBoundingClientRect() 메서드를 제공합니다. 이 메서드는 왼쪽, 위쪽, 오른쪽, 아래쪽의 4가지 속성이 있는 직사각형 개체를 반환합니다. 이러한 속성은 뷰포트를 기준으로 페이지에서 요소의 위치를 ​​제공합니다. 하지만 IE는 왼쪽 위 모서리 좌표가 (2,2)라고 생각하고, 다른 브라우저는 (0,0)이라고 생각합니다. <BR>function getBoundingClientRect(element){ <BR>var scrollTop = document.documentElement.scrollTop; <BR>var scrollLeft = document.documentElement.scrollLeft; <BR><br>if(element.getBoundingClientRect){ <br>If (typeofarges.callee.offset != "number"){ <BR>var temp = document.createElement("div") <BR>temp.style.cssText = "position:absolute;left:0;top:0 ;"; <BR>document.body.appendChild(temp); <BR>arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; <BR>document.body.removeChild(temp); <BR> temp = null; <BR>} <BR><br>var ect = element.getBoundingClientRect(); <br>var offset = 인수.callee.offset; <BR><br>return{ <br>왼쪽: 각형. 왼쪽 오프셋, <BR>오른쪽: 직사각형.오른쪽 오프셋, <BR>상단: 직사각형 상단 오프셋, <BR>하단: 직사각형 하단 오프셋 <BR>}<BR>}else{ <BR>var ActualLeft = getElementLeft (요소); <BR>var ActualTop = getElementTop(element); <BR><br>return{ <br>left: ActualLeft - scrollLeft, <BR>right: ActualLeft element.offsetWidth, <BR>top: ActualTop - scrollTop, <BR>bottom: ActualTop element.offsetHeight - scrollTop <BR>} <BR>} <BR>} <BR><br>3. 순회 <br>①개요: "DOM2 수준 순회 및 범위" 모듈 정의 DOM 구조의 순차 순회를 완료하는 데 도움이 되는 두 가지 유형인 NodeIterator와 TreWalker가 도입되었습니다. 이 두 가지 유형은 주어진 시작점을 기반으로 DOM 구조에서 깊이 우선 순회 작업을 수행할 수 있습니다. <BR>□이러한 개체는 DOM 호환 버전에서 액세스할 수 있습니다. IE는 순회를 지원하지 않습니다. <BR>□ 브라우저가 DOM 레벨 2 탐색 기능을 지원하는지 확인하세요. <BR>var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); <BR>var presentsNodeIterator = (typeof document.createNodeIterator == "function") <BR>var presentsTreeWalker = (typeof document.createTreeWalker == "function"); <BR>②NodeIterator <BR>1) document.createNodeIterator() 메서드를 사용하여 새 인스턴스를 만들 수 있습니다. <BR>4개의 매개변수를 허용합니다: <BR>□root: 검색의 시작점으로 사용하려는 나무 종의 노드입니다. <BR>□whatToShow: 방문할 노드를 나타내는 숫자 코드입니다. <BR>□filter: NodeFilter 객체 또는 특정 노드를 승인할지 거부할지를 나타내는 함수입니다. <BR>□entityReferenceExpansion: 엔터티 참조 확장 여부를 나타내는 부울 값입니다. 이 매개변수는 HTML 페이지에서는 사용되지 않습니다. <BR>■whatToShow 매개변수는 NodeFilter 유형에 상수로 값이 정의된 비트마스크입니다.<BR>□NodeFilter.SHOW_ALL: 모든 유형의 노드를 표시합니다. <BR>□NodeFilter.SHOW_ELEMENT: 요소 노드를 표시합니다. <BR>□NodeFilter.SHOW_ATTRIBUTE: 속성 노드를 표시합니다. DOM 구조상의 이유로 이 값은 실제로 사용할 수 없습니다. <BR>□NodeFilter.SHOW_TEXT: 텍스트 노드를 표시합니다. <BR>□NodeFilter.SHOW_CDATA_SECTION: CDATA 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>□NodeFilter.SHOW_ENTITY_REFERENCE: 엔터티 참조 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>□NodeFilter.SHOW_ENTITYPE: 엔터티 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>□NodeFilter.SHOW_PROCESSING_INSTRUCTION: 처리 명령 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>□NodeFilter.SHOW_COMMENT: 주석 노드를 표시합니다. <BR>□NodeFilter.SHOW_DOCUMENT: 문서 노드를 표시합니다. <BR>□NodeFilter.SHOW_DOCUMENT_TYPE: 문서 유형 노드를 표시합니다. <BR>□NodeFilter.SHOW_DOCUMENT_FRAGMENT: 문서 조각 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>□NodeFilter.SHOW_NOTATION: 기호 노드를 표시합니다. HTML에는 쓸모가 없습니다. <BR>◇NodeFilter_SHOW_ALL 외에도 비트별 OR 연산자를 사용하여 여러 옵션을 결합할 수 있습니다. <BR>var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT; <BR>◇필터 매개변수를 사용하여 NodeFilter 개체 또는 필터 기능을 맞춤설정하세요. <BR>NodeFilter 객체에는 acceptNode()라는 하나의 메서드만 있습니다. 액세스되면 NodeFilter.FILTER_ACCEPT가 반환됩니다. <BR>예제 1: Iterator <BR>var filter= { <BR>acceptNode:function (node)P{ <BR>return node.tagName.toLowerCase()=="p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP <BR>} <BR>} <BR> }; <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>예 2: filtr 매개변수는 acceptNode 메소드와 유사한 함수일 수도 있습니다. <BR>var filter = function(node){ <BR>return node.tagName.toLowerCase() == "p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>2) NodeIterator 유형에는 nextNode()와 PreviousNode()라는 두 가지 주요 메서드가 있습니다. <BR>var div = document.getElemetnById("div1"); <BR>var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false) <BR>var node = iterator.nextNode(); >while(node ​​​​!== null){ <BR>alert(node.tagName); <BR>node = iterator.nextNode() <BR>} <BR> ③TreeWalker <BR>1) TreeWalker는 업데이트입니다. NodeIterator 프리미엄 버전. nextNode() 및 이전Node() 외에도 DOM 구조를 다양한 방향으로 탐색하는 다음과 같은 메서드도 있습니다. <BR>□parentNode(): 현재 노드의 부모 노드로 탐색합니다. <BR>□firstChild(): 현재 노드의 첫 번째 자식 노드로 이동합니다. <BR>□lastChild(): 현재 노드의 마지막 자식 노드로 이동합니다. <BR>□nextSibling(): 현재 노드의 다음 형제 노드로 이동합니다. <BR>□previousSibling(): 현재 노드의 이전 형제 노드로 이동합니다. <BR>2) TreeWalker 객체를 생성하려면 document.createNodeIterator() 메서드와 동일한 4개의 매개 변수를 허용하는 document.createTreeWalker() 메서드를 사용합니다. <BR>□ NodeFilter.FITER_ACCEPT 및 NodeFilter.FILTER_SKIP을 반환하는 것 외에도 세 번째 매개 변수 필터 반환 값은 NodeFILTER_REJECT(함수: 해당 노드 및 노드의 전체 하위 트리 건너뛰기)를 사용할 수도 있습니다. <BR>□TreeWalker의 장점은 DOM 구조에서 어떤 방향으로든 이동할 수 있다는 것입니다. <BR>◇예: 필터를 정의하지 않고도 DOM 트리를 순회하여 모든 <BR> 요소를 얻습니다. <BR>var div = document.getElementById("div1"); <li>var walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false); <BR>walker.firstChild(); nextSibling(); <BR>var node = walker.firstChild(); <BR>while(node ​​​​!== null)} <BR>alert(node.tagName) <BR>node = walker.nextSibling() ; <BR>} <BR>□TreeWalker 유형에는 currentNode라는 속성도 있는데, 이는 이전 순회에서 순회 방법에 의해 반환된 노드를 나타냅니다. <BR>4. 범위 <BR>기본 정의: <BR>범위를 사용하면 노드 경계를 고려하지 않고 문서에서 영역을 선택할 수 있습니다(선택은 백그라운드에서 완료되며 사용자에게는 보이지 않습니다). 일반적인 DOM 조작을 통해 문서를 더 효율적으로 수정할 수 없는 경우 범위를 사용하는 것이 좋습니다. <BR>1. DOM의 범위 <BR>①개요: <BR>1) DOM2 레벨에서는 Document 유형의 createRange() 메소드를 정의합니다. <BR>□지원되는 범위인지 확인하세요. <BR>var supportRange = document.implementation.hasFeature("Range","2.0"); <BR>var alsoSupportsRange = (typeof document.createRange == "function"); <BR>□DOM 범위 생성: var range = document.createRange() <BR>2) Range 유형 인스턴스에서는 문서 내 현재 범위의 위치 정보를 제공하는 속성: <BR>□startContainer: 범위의 시작점을 포함하는 노드(즉, 선택 항목의 첫 번째 노드의 상위 노드) <BR>□startOffset: startContainer에 있는 범위의 시작점 오프셋입니다. StartContainer가 텍스트 노드인 경우 startOffset은 범위 시작 전에 건너뛴 문자 수입니다. 그렇지 않은 경우 startOffset은 상위 노드 내의 범위에 있는 첫 번째 하위 노드의 인덱스입니다. <BR>□endContainer: 범위 끝에 있는 노드를 포함합니다(즉, 마지막 노드의 상위 노드를 선택합니다).<BR>□endOffset: endContainer 내 범위의 끝점 오프셋(startoffset 등의 규칙) <BR>□commonAncestorContainer: startContainer와 endContainer의 공통 조상 노드는 문서 트리에서 가장 깊은 위치에 있는 노드입니다. <BR> ②DOM 범위를 사용하여 간단한 선택 구현: <BR>1) 범위를 사용하여 문서의 일부 선택: <BR>□selectNode(): DOM 노드를 전달하고 하위 노드를 포함한 전체 노드를 선택합니다. 범위. <BR>□selectNodeContents(): DOM 노드를 전달하고 하위 노드만 범위로 선택합니다. <BR>2) 범위를 보다 정확하게 제어합니다. <BR>□setStartBefore(refNode): refNode 앞에 범위의 시작점을 설정하므로 refNode가 범위 선택의 첫 번째 하위 노드가 됩니다. 범위의 위치 속성이 자동으로 업데이트됩니다. <BR>□setStartAfter(refNode): <BR>□setEndBefore(refNode): <BR>□setEndAfter(refNode): <BR> ③ DOM 범위를 사용하여 복잡한 선택 구현: <BR>□setStart(): 참조점과 오프셋. 참조 노드는 startContainer가 되고, 오프셋은 startOffset이 됩니다. <BR>□setEnd(): 참조점과 오프셋을 전달합니다. 참조 노드는 endContainer가 되고, 오프셋은 endOffset이 됩니다. <BR><p id="p1"><b>안녕세상!//범위를 사용하여 l부터 o까지 선택합니다. <BR>var p1 = document.getElementById("p1"); <BR>var helloNode = p1.firstChild.firstChild; <BR>var worldNode = p1.lastChild; <BR>var range = document.createRange(); 🎜>range.setStart(helloNode,2); <BR>range.setEnd(worldNode,3); <BR>DOM 범위의 내용을 조작<BR>□작업 메서드를 호출하면 배경이 유효한 값을 생성합니다. 범위 문서 조각 및 DOM 구조의 경우. P275 <BR>□deleteContents(): 해당 범위에 포함된 내용을 문서에서 삭제합니다. <BR>□extractContents(): 문서에서 범위 콘텐츠를 제거하고 범위 문서 조각을 반환합니다. <BR>⑤DOM 범위에 콘텐츠 삽입 <BR>□insertNode(): 범위 선택의 시작 부분에 노드를 삽입합니다. <BR>□surroundContents(): 범위 콘텐츠를 둘러싸는 노드인 하나의 매개변수를 허용합니다. <BR>a. 범위의 콘텐츠를 추출합니다(extractContent() 실행과 유사). <BR>b. 문서의 원래 범위 위치에 지정된 노드를 삽입합니다. <BR>c. 문서 조각의 내용을 지정된 노드에 추가합니다. <BR>⑥DOM 범위 접기 <BR>□소위 접기 범위는 범위 내에서 선택되지 않은 문서의 모든 부분을 말합니다. <BR>□collapse() 메서드: 하나의 매개변수 부울 값. 범위의 시작 부분으로 축소하려면 true이고, 범위 끝으로 축소하려면 false입니다. 접힌 속성을 사용하여 접혔는지 확인할 수 있습니다. <BR>range.collapse(true); //시작점으로 축소<BR>alert(range.collapsed); //true 출력 <BR>7DOM 범위 비교<BR>여러 범위가 있을 때 사용 가능 CompareBoundaryPoints( ) 이러한 범위에 공통 경계(시작 또는 끝)가 있는지 확인하는 방법입니다. 두 개의 매개변수: 비교 방법과 비교할 범위를 나타내는 상수. <BR>비교방법 상수값 : <BR>□Range.START_TO_START(0) : 첫 번째 범위와 두 번째 범위의 시작점을 비교합니다. <BR>□Range.START_TO_END(1): <BR>□Range.END_TO_END(2): <BR>□Range.END_TO_STRAT(3): <BR>⑧DOM 범위 복사<BR>□cloneRange() 메서드: var newRange = range.cloneRange(); <BR>9DOM 범위 정리<BR>□문서에서 범위를 분리하려면 detach() 메서드를 호출하세요. <BR>range.detach(); //문서에서 분리<BR>range = null; //Dereference<BR>2. IE의 범위<BR>①개요: <BR>□IE는 DOM 범위를 지원하지 않습니다. 유사한 텍스트 범위가 지원됩니다. <BR>□텍스트 범위는 주로 텍스트를 처리합니다(DOM 노드일 필요는 없음). createTextRange() 메소드는 <BR>, <body>, <button>, <input> 등의 요소를 통해 호출됩니다. <textarea>□문서를 통해 생성된 범위는 페이지 내 어디에서나 사용할 수 있습니다. <BR>var range = document.body.createTextRange(); <BR>IIE 범위를 사용하여 간단한 선택 구현<BR>□findText() 메서드: 주어진 텍스트가 처음 나타나는 위치를 찾아 해당 텍스트를 둘러싸도록 범위를 이동합니다. . 텍스트를 찾았는지 여부를 나타내는 부울 값을 반환합니다. <BR>◇범위 내의 텍스트를 반환하려면 text 속성을 사용하세요. <BR>var range = document.body.createTextRange(); <BR>varfound = range.findText("Hello"); <BR>◇findText에 다른 매개변수를 전달할 수 있습니다. 뒤로 검색합니다. 값이 양수이면 앞으로 검색합니다. <BR>□moveToElementText() 메서드: DOM의 selectNode() 메서드와 유사합니다. DOM 요소를 허용하고 HTML 태그를 포함하여 해당 요소의 모든 텍스트를 선택합니다. <BR>◇범위는 htmlText 속성을 사용하여 HTML을 포함한 범위의 전체 내용을 얻을 수 있습니다. <BR> ③IE 범위를 사용하여 복잡한 선택 구현 <BR>□4개 메소드: move(), moveStart(), moveEnd(), Expand() 두 개의 매개변수: 이동 단위 및 이동 단위 수; 이동 단위는 다음 문자열입니다. <BR>◇"character": 문자 단위로 이동합니다. <BR>◇"word": 단어 단위(공백이 아닌 일련의 문자로 이동) <BR>◇"sentence": 문장 단위(마침표, hello 또는 느낌표로 끝나는 일련의 문자로 이동) <BR>◇"textedit" : 현재 범위 선택의 시작 또는 끝으로 이동합니다. <BR>□moveStart(): 범위의 시작점으로 이동합니다. moveEnd()는 범위의 끝점으로 이동합니다. <BR>□expand(): 임의의 부분에서 선택한 텍스트를 모두 선택합니다. <BR>□move() 메서드: 먼저 현재 범위를 접은 다음(시작점과 끝점이 동일함) 지정된 단위 수만큼 범위를 이동합니다. <BR>IV IE 범위 내용 조작 <BR>□범위에는 텍스트만 포함되어 있으며, text 속성을 통해 텍스트를 읽고 쓸 수 있습니다. <BR>□pasteHTML() 메서드: 범위에 HTML 코드를 삽입합니다. <BR>⑤IE 범위 축소 <BR>□collapse() 메서드: 부울 값을 전달합니다. true는 시작점으로 축소되고, false는 끝점으로 축소됩니다. <BR>□폴딩이 완료되었는지 확인:boundingWidth 속성이 0과 같습니다. <BR>var isCollapse = (range.boundingWidth == 0); <BR>⑥Compare IE range<BR>□compareEndPoints() 메소드: 두 개의 매개변수 : 비교 유형 및 비교할 범위입니다. <BR>◇비교 유형 값 문자열: "startToStart", "StartToEnd", "EndToEnd" 및 "EndToStart". <BR>◇첫 번째 범위 경계가 두 번째 범위보다 앞에 있으면 -1을 반환하고, 같으면 0을 반환하고, 이후이면 1을 반환합니다. <BR>□isEquanl()은 두 범위가 같은지 확인하는 데 사용됩니다. <BR>□inRange()는 범위에 다른 범위가 포함되어 있는지 확인하는 데 사용됩니다. <BR>7IE 범위 복사 <BR>duplicate() 메서드를 사용하여 텍스트 범위를 복사하고 복사본을 반환합니다. <BR>var newRange = range.duplicate();</script>