DOM
1. DOM 기본 소개
는 DOM이 무엇 1
영어의 DOM이 중국어로 번역 문서 객체 모델을,라고는 문서 객체 모델이다. 즉, 객체로 전체 문서. 그리고 다시, 많은 노드로 구성된 문서는, 이러한 노드는 하나의 객체로 볼 수있다. DOM을 객체는 호스트 개체 브라우저가 호스트로 필요에 속한다. 브라우저 환경 중되면, 객체는 더 이상 존재하지 않게된다. 마찬가지로, 마지막 장에서는 우리가 너무 호스트와 같은 브라우저가 필요합니다, 그래서 그것은 또한 호스트 개체입니다, BOM을 소개했다.
DOM의 역할을 다음과 같이
문서의 HTML 내용은 응용 프로그램 브라우저 인터페이스를 제공 조작
· 등, 문서의 내용 삭제 문서의 내용을 수정, 문서의 내용을 증가 동적 동작에 대한 문서
2 DOM의 역사를
DOM 레벨 0 :
첫째, 우리는 DOM 표준에하는 dom0이 수준이 수준을하지 않는 결정해야합니다. 호출
I 말해야 어떻게의 좌표의 이력에 기준점이 Dom0의 DOM 레벨이고, Dom0의 레벨이 브라우저 4.0 처음 DOM 관련 방법들에 의해 지원되는 IE4와 N etscape을 말한다. 이미지, 링크 및 양식과 같은 일반적인 페이지 요소에 주요 초점. 이제 그 이미지 및 양식 중 일부는 현재 여전히 DOM의 현재 버전에서 사용할 수 있습니다.
DOM 레벨 1 :
1998 년 10 월 W3C 권고안이 될 수 있습니다. DOM 코어 (DOM 코어) 및 DOM HTML : DOM1 단계는 두 가지 모듈로 구성되어 있습니다. 이 버전은 페이지의 각 섹션의 탐색을 허용, 웹 페이지의 전체 모델을 소개합니다.
DOM 레벨 2 :
DOM 레벨 1은 20,001년에 게시, 확장 않았다 들어, 웹 페이지를 쉽게 특정 요소에 대한 액세스를 허용 인기에서 getElementById () 메소드의 도입.
DOM 레벨 3 :
2가 2004 년에 발표 된 추가 확장을 만든 DOM 레벨에 대해.
3 노드 유형과 노드 이름
- 많은 수의 문서로는 노드로 구성된다. 그리고 각 노드는 노드의 유형을 표시하는 데 사용되는 nodeType에라는 속성이 있습니다. : 상이한 값에 대응하는 다른 노드 유형이 특정 값은 다음 표에 대응하는
숫자에 대응하는 노드 이름
우 화소 점 P의 Node.ELEMENT_NODE (1)
속성 노드 Node.ATTRIBUTE_NODE ⑵
텍스트 노드 ⑶ Node.TEXT_NODE
CDATA 노드 Node.CDATA_SECTION_NODE ⑷
엔티티 참조 이름 노드 Node.ENTRY_REFERENCE_NODE (5)
단체명 노드 Node.ENTITY_NODE (6)
처리 명령 노드 Node.PROCESSING_INSTRUCTION_NODE (7)
주석 노드 Node.COMMENT_NODE (8)
문서 노드 Node.DOCUMENT_NODE (9)
문서 노드 Node.DOCUMENT_TYPE_NODE 유형 ( 10)
문헌 단편 노드 Node.DOCUMENT_FRAGMENT_NODE (. 11)
는 DTD 선언 노드 Node.NOTATION_NODE (12 인)
다른 노드가 다른 노드 타입에 대응하는, 우리의 nodeType 속성을 통해 노드의 노드 형태를 얻을 수
의 nodeType 속성과 함께 사용될 수 있으며, 만약, 확인 노드의 잘못된 유형의 잘못된 작업을 수행하지 않는
노드 유형을 얻기 이외에, 우리는 또한 nodeName 속성을 통해 노드의 이름을 얻을 수 있습니다,
당신은 요소 노드의 텍스트 값을 얻을 수 nodeValue를 사용할 수 있습니다
2. 기존의 DOM의 사용
(1) 문서를. 본문
페이지 <body> 엘리먼트 리턴
2 document.images는
모든 문서 영상의 노드리스트를 돌려
각 화소를 얻을 어레이 등일 수
3 document.links을
반드시 href 속성 Ra 및 <분야> 모든 요소를 반환 목록의 노드 요소
4 document.anchors는
모든 재향 군인을 반환> 요소는 노드 목록의 이름 속성이
5 예 : document.forms이
노드의 형태로 모든 문서의 목록을 반환
빠르게 노드 찾기 3
) (1)에서 getElementById를 (
잠금 ID에 대한 빠른 노드 값
2 getElementsByTagName ()
신속 노드를 찾을 수 있지만, 태그 이름으로 노드는 노드의 목록을 얻을 수있는 방법입니다 찾아 태그 이름을 우리는 배열과 유사한 방식으로 특정 노드를 찾을 필요가있다.
GetElementsByClassName 3 ()
이름에서 알 수 있듯이 클래스 이름은 클래스 이름으로 요소를 찾는 것입니다. 그리고 우리는 알고 반환 요소의 목록이 될 것입니다 이런 식으로, 그래서 같은 가질 수있는 클래스의 이름
4 document.getElementsByName ()
이름 값에 해당하는 요소 노드에 액세스하기 위해이 방법을 사용합니다. 노드 이름이 같은 값을 허용하기 때문에, 그래서이 방법은 노드의 목록을 반환합니다.
5 document.querySelector ()는
이 새로운 HTML5 조회 노드 방식의 가장 큰 특징이다가, 첫 번째 요소 만 있습니다 CSS 구문과 일치 문서의 첫 번째 요소를 찾으면서, 검색 할 수있는 것입니다!
6 document.querySelectorAll ()
이 한 번 더 모든 식별자는, 우리가 추측 할 수 위의 방법에 비해,이 요구 사항을 충족하거나 찾을 같은 CSS 구문을 사용하는 모든 요소의 반환입니다
노드 사이의 관계 찾기 4
1 childNodes에 속성은
객체 클래스의 배열 NodeList를 보유하고, 상기 각 노드는 childNodes에 속성을 갖는다. 이 개체는 노드 아래의 모든 자식 노드가 포함되어 있습니다. NodeList를 개체가 자동으로 변경됩니다.
어린이 2 명 속성
어린이 전용 속성은, 모든 텍스트 노드를 무시하고 공백 노드 모든 자식 요소 노드를 다음 노드를 반환
3 firstChild 및 lastChild을
다음으로 처음 두 속성, 액세스 노드와 마지막 노드, 다음 예, 즉 제 자식 노드를 도입 :
<body>
<P ID = "TEST1"클래스 = "ABC"> LOREM의 ipsum의 슬픔 AMET 앉아. </ P>
<P ID = "TEST2"> LOREM의 Ipsum 제품의 슬픔이 AMET 앉는다. </ P>
<a 열연 ef="" class="abc"> 링크 1V / A>
<UL ID = "테스트 3 ">
<LI> ITEM1 </ 리>
<LI> ITEM2 </ 리>
<LI> 항목 3 </ 리>
V / UL은>
vscript>
송출이 I = document.getElementById를 ("테스트 3 ") 상기 CONSOLE.LOG (I. firstChild),
V / 스크립트>
V / BODY>
효과 :
하는 #text가 ►
첫 번째 자식 다음 <UL>에 방문에 여기에서 볼 수 있지만, 사실이 빈 노드 노드, 즉 무엇을 의미합니까? 즉, 공백 및 개행 내부 DOM을 노드로 간주 될 것이다. 이러한 노드는 공백 노드라고합니다. 나는 지금 <UL> 요소 및 VLI> 요소 사이의 간격이 삭제 될 경우, 첫 아이가되게합니다 <
ID = VP "TEST2"> LOREM의 Ipsum 제품의 슬픔의 SIT의 amet.v / P>
<a 열연 ef=""의 class="abc"> 링크 1V / A>
Vul ID = "테스트 3">
<LI> ITEM1 </ 리>
<LI> ITEM2 </ 리>
<LI> 항목 3 </ 리>
V / UL은>
vscript>
송출 document.getElementById를 I = ( "테스트 3");
CONSOLE.LOG (i.firstChild)
V / script>
V / 신체 >
효과 :
<LI> iteml </ 리>
시간 Vul>를 첫번째 하위 요소는 다음의 것은 제 <LI> 요소가된다.
첫 번째 내용 <LI> 요소를 인수에 보관하기 전에 기본 HTML 구조를 원하는 경우, 다음과 같이, 그것은 아래의 층을 찾아 아니라 :
<BODY>
<p 형 위에서 언급 한 id = "TEST1"클래스 = "ABC"> Ipsum 제품의 슬픔의 LOREM을 AMET 앉는다. </ P>
<P ID = "TEST2"> LOREM의 Ipsum 제품의 슬픔이 AMET 앉는다. </ P>
<
<스크립트>
송출 I = document.getElementById를 ( "테스트 3")하며 CONSOLE.LOG (i.firstChild.nextSibling.firstChild);
</ SCRIPT>
</ BODY>
효과 :
"iteml는"
lastChild와 기본적으로 그냥 Fi를 rstChild 반대로, 얻어지는 최종 아이 내부 다음 예제 노드들 :
<body>
. <P ID = "TEST1"클래스 = "ABC"> LOREM의 Ipsum 제품의 슬픔 </ P> AMET SIT
<P ID = "TEST2을"> SIT의 ipsum의 슬픔의 lorem에 AMET. </ P>
<a의 HR ef="" class="abc"> </a>에 링크. 1
<UL ID = "테스트 3">
<LI> ITEM1 </ 리>
<LI> ITEM2 < / 리>
<LI> 항목 3 </ 리>
</ UL>
<script>
송출 document.getElementById를 I = ( "테스트 3") 상기 CONSOLE.LOG (I.lastChild);
</ script>
</ body>
효과 :
다음 ►하는 #text
이것은 또한 빈 노드와 획득
4 인 parentNode
상위 노드의 속성 얻기
5 previousSibling은을과로 nextSibling
PR eviousSiblings 속성은 같은 부모 노드 아래 전에 이웃 노드를 반환합니다. 노드가 제 부모 노드가있는 경우
: 노드, 그 다음 예는, null이 반환
Vbody>
VP ID = "TEST1"클래스 = "ABC"> LOREM의 ipsum의 슬픔의 SIT의 amet.v / P>
VP ID = "TEST2를" > LOREM의 Ipsum 제품의 슬픔의 SIT의 amet.v / P>
<a의 HR ef="" class="abc"> </a>에 링크. 1
Vul ID = "테스트 3">
VLI> item1v / 리>
VLI> item2v / 리>
VLI > item3v / 리>
V / UL은>
vscript>
송출 I = document.getElementById를 ( "테스트 3");
을 console.log (I);
하자 난 = document.getElementById를 ( "TEST1"); CONSOLE.LOG (i.nextSibling.nextSibling); V / script> V / BODY>
효과 : 여기에만로 nextSibling를 작성하는 경우, 그 다음 요소 노드 빈 회 연속해서,이 공 이동 노드를 접속하는 노드에 대한 액세스와 동일하다.
<P ID = "TEST2, L> LOREM의 Ipsum 제품의 슬픔은 · V / P> AMET SIT
. 6 previousElementSibling 및 nextElementSibling는
, 이러한 처리는 너무 많은 문제를 가지고 않고 전방을 래핑 및 후면도 빈 노드로 간주된다. 따라서, 지금 추가
홍보 eviousElementSibling 직접 ^ 노드 두 속성 nextElementSibling 쿼리
다음 요소 또는 노드, 다음 예에서 :
Vbody>
VP의 ID = "TEST1"클래스 = "ABC"> LOREM의 ipsum의 슬픔의 SIT의 amet.v / P>
VP ID = "TEST2"> LOREM의 Ipsum 제품의 슬픔의 SIT의 amet.v / P>
<a HR의 ef=""의 class="abc"> 링크 1 </a>을
<UL ID = "TEST3">
<LI> 항목 1 </ 리>
<LI> 항목 2 </ 리>
<LI> 항목 3 </ 리>
</ UL>
<script>
하자 document.getElementById를 I = ( "TEST2") ; CONSOLE.LOG (i.previousElementSibling);
</ script>
</ BODY>
效果:
<P 아이디 = 1, testl "클래스 ^ 'ABC'^ 로렘 입숨 슬픔 AMET 앉아 ·의 v / P>
?再来看一^ nextElementSibling属性的例子
<BODY>
<P 아이디 = "TEST1"클래스 = "ABC"> LOREM의 Ipsum 제품의 슬픔이 AMET 앉는다. </ p>
<p의 ID = "TEST2"> LOREM의 Ipsum 제품의 슬픔이 AMET 앉는다. </ p>
<a 열연 ef=""의 class="abc">链接1V / A>
<UL ID = "TEST3">
VLI> item1v / 리>
VLI> item2v / 리>
VLI> item3v / 리>
V / UL>
vscript>
하자 document.getElementById를 I = ( "TEST2"); CONSOLE.LOG (i.nextElementSibling); V / 스크립트>
V / body>
효과 :
노드 동작
생성 및에 노드를 추가
)합니다 (createElement와 방법에있어서 우리는 노드 소자 만들 수있는
노드 앞의 첨가에 insertbefore ()
(2) 삭제 노드
다음과 같이 구 삭제 노드되는
친 노드 .removeChild (하위 노드)
3 대신 노드
: 구문은 다음과
부모 .replaceChild (새로운 노드, 이전 노드)
4 복제 노드
만 cloneNode에 얕은 깊은 복제 클론을 실현 될 수있는 부울 값을 전달 () 메소드가 필요 얕은 깊은 복제에 복제 복제 노드입니다.
클론 노드 구문은 다음과 :
노드 .clone (부울 값)
얕은 클론
클론 노드 가리키는 얕은 클론 소위 노드가 단지 클론으로 거짓있어서 파라미터
의 깊은 클론
이른바 깊은 클론, 그 사본을 의미 노드와 노드의 자식 노드는 부울 값이 true 통과해야합니다.
5 개 문서 조각
이전에, 우리는 내부 문서에 노드를 추가 할 수 배웠습니다,하지만 문제가이 페이지를 새로 고침 노드를 추가하기 때문에, 당신은 많은 수의 노드를 추가 할 경우 즉, 다음,이 방법은 개별적으로 추가됩니다 비효율적 보인다 . 이번에는 () 메소드 내에 설치 CR eateElementF의 ragment의 DOM을 사용하여 내부 문서 조각의 첫 번째 노드를 추가하고, 최종적 내부 문서에 추가 한 시간 수
(6)는 주 노드 작성
은 DOM에 메모 노드를 생성하기 위해 제공 방법은 createComment (), 당신은 메모 만들려면이 방법을 사용할 수 있습니다
7 실시간 수집
정보 노드는 실시간으로 변경됩니다. 우리는 추가하거나 노드를 제거하면 우리가 부모 노드의 길이를 방문 할 때 예를 들어, 우리는 곧 변경해야합니다
요소의 실시간 수집에 도착하는 등 document.getElementsByTagName로 이전 DOM 방법을 사용하여, 구덩이가 및 HTMLCollection을 반환하고 다시 NodeList를로 설정되어 있지 않은 요소의 실시간 수집에 도착하는 새로운 가야 rySelecto 롤의를 사용, 길이는 실시간으로 업데이트되지 않습니다.
6 재빨리 노드의 콘텐츠에 액세스
한 innerText와 innerHTML을하고
innerText와 요소 노드를 얻기위한 텍스트 값, 그리고 H TML 라벨 포함한 사용자 소자 것들, 다음의 모든 노드 innerH TML 사용된다.
노드의 콘텐츠 내부 죽인다 y를 수정, 나는 근면 한 후, 기존 노드를 제거 새 노드에게 다음 단계를 만들 필요가 없습니다 그리고 난 캔에 매우 편리 몸, 간단한의 내용을 수정 nnerHTML
2는 TextContent (확장)를
관통 속성은, 우리는 요소 노드의 텍스트 내용을 직접 얻을 수 있습니다
둘의 차이점은 무엇인가, 또한 요소 노드의 텍스트 값을 얻을 듯 얼굴 innerText와?
주요 차이점은 다음과 같은 점에있다 :
•는 TextContent 텍스트에 스타일 = "displaymone11을 얻을 것이다,하지만 innerText와
•는 TextContent 텍스트 내부의 스타일 태그를 얻을 것이다,하지만 innerText와
• innerText와 더 나은 IE 호환성
•는 TextContent하지만 그러나 표준 방법으로 만 브라우저 위의 IE8의 + 지원
6. 빠른 액세스 노드의 컨텐츠를
(1) 및 innerHTML을 innerText와
노드 요소 값의 텍스트를 취득하기위한 innerText와
및 innerH TML은 H TML 태그를 포함 요소 일, 다음의 모든 사용자 단말에 사용되는
동작 특성과 제 클래스
1 개 동작 소자 특성 관련 메소드 (확장)
얻을 설정할 요소 속성
getAtt의 ribute () 이름에서 알 얻는는 요소 노드의 속성 값입니다
setAtt 리 뷰트 ()는 요소 노드의 속성 값을 설정하는
속성을 삭제하는 요소를
() 메소드가 삭제 removeAttribute DOM 안에 제공하여, 직접 삭제에 전달 속성 이름이 인수로서
속성을 제거 removeNamedItem () 메소드를 사용하여, 속성의 요소 노드 취득 속성들의 제 1 세트와 동일한
취득한 속성 인덱스
수신, 또한 특성의 세트에 기초하여 사용되는 아이템 () 메소드 매개 변수가 수, 이들의 특정한 속성에 배치 될 수있다,
클래스 2 요소와 관련된 동작 (확장)
는 DOM의이 요소 노드 모든 클래스를 얻을 classList 수
클래스 이름하여 속성 클래스를 DOM 소자를 얻기 위해, 그 값이 리턴 문자열입니다
클래스 추가
또한 새로운 추가 DOM은 빠르게 노드 클래스에 요소를 추가하는 () 메소드를 추가
클래스를 삭제
하는 클래스 삭제하여 요소 노드를 제거하는 () 메소드는 상기 classList 클래스 세트에 사용되는
스위칭 클래스
토글 ()에있어서 매우 유용한 방법이 클래스를 전환하는 데 사용될 수있다. 요소 노드 클래스를 제공하지 않은 경우, 그 클래스 경우, 클래스를 삭제 클래스를 추가 할 수 있습니다. 클래스가 추가되는 경우가 삭제 된 경우, false를 반환, true를 돌려줍니다.
요소 속성 일반 절차 3
점을 통해 속성과 클래스를 운영하는
우리는 DOM 요소의 포인트 속성에 의해 설정, 일반적으로,이 액세스하거나 속성을 설정하기 위해 권장되는 방법입니다. 그러나 때문에이 방법으로 몇 가지 예외는 만 설정하거나 값을 라벨의 고유 속성에 액세스하지만, 자기 정의 속성을 가져 오거나 설정할 수 없습니다입니다 수 있습니다. 의 <p> 요소 자체에 이름 속성이 없기 때문에 예를 들어, 성공할 수없는 <P> 요소에 이름 속성을 설정합니다. setAtt가 뷰트 RI 경우 방법은 행 수 있습니다.
또한 키워드라는 이름의 속성은 또한 클래스와 재산에 대한 특별한 치료를 필요로한다는 것입니다주의합니다.
이 키워드입니다, 그래서 클래스 이름 (위의 도입되었다)에 의해 운영 할 필요가 있기 때문에 클래스 속성 경우,이 핵심이기 때문에 속성은입니다, 그래서 그들은 htmlFor에 의해 운영 될 필요합니다.
4 개 지정 속성
지정 속성은 표준에 따른 H TML5 데이터 활용한다 - 접두어로서, 같은 <p> 요소에 첨가된다 - 전력 사용자 속성, 데이터 전력이 설정되어야
데이터 - 특성을 얻기는 DOM을 사용할 수있는 얻는다 getAtt의 ribute () 메소드
에서 태그의 데이터 세트 속성
test1.dataset.power는 = '고속',
이 데이터 세트의 각 요소의 노드의 모든 속성 데이터 세트의 선두를 가리키는 속성을 갖는다. 그러나 가져 오거나 접두사를 추가 할 필요가없는 시간을 설정합니다.
각 노드는 속성의 데이터 세트의 시작을 가리키는 모두, 데이터 집합 요소 특성을가집니다. 취득 또는 설정이 접두사 추가 할 필요가없는 경우에는,
데이터 - 속성은 하이픈이 들어 이름을, 당신은 낙타 명명법 사용해야
8. 작동 CSS
어떤 요소 노드 스타일 규칙을 수정할 수 있습니다이 속성에 의해 tylE 속성을
내부 CSS에 일부 속성은 예를 들어 사용하는 바, 이격 같다 : DOM 사용 스타일을 수정할 경우 필요 고비 명명법을 수정하는 반면 배경색을, 즉 backgroundColor로
제 테이블의 동작
1 열 및 획득 테이블의 행
에 의해 행 및 셀 목표 테이블의 행 및 열을 얻기 위해
재 할당 한 후 콘텐츠의 내부 테이블을 필요한 경우에만 특정 표적 세포, 및
이송 테이블 (2)의 콘텐츠
이중 루프를 이용하여 이송되는 테이블의 내용 왈시
의 행과 열로 3 새로운 테이블
다음 InsertRow를 () 및 insertCell () 메소드 테이블 다음 구문의 두 행과 열 삽입
inserRow (위치) 새로운 라인 오브젝트 ^의 표에 지정된 위치에 삽입한다.
insertCell (위치보다가) : 행의 컬렉션을 지정된 위치에 새로운 셀을 삽입합니다.
4 행 및 열 삭제
deleteRow를 (위치보다 일) : 테이블 오브젝트에 지정된 행 위치 삭제.
deleteCell (받은 위치가) 행 컬렉션의 셀에 지정된 위치를 삭제한다.
표 5는 다른 특성 및 방법
행동 양식의 속성이나 방법
자막 포인트 <자막> 엘리먼트 (존재하는 경우)
, 스레드 포인트 <THEAD> 요소는 (존재한다면)
tBodies는 (존재한다면) <TBODY> 요소를 가리
TFOOT은 <TFOOT> 엘리먼트 (존재하는 경우)를 가리킬 수
행의 모든 행들의 세트 형성
OK - 셀 모든 셀들의 집합 내부
createCaption. 은 <캡션> 요소를 작성하고 양식에 배치
<THEAD> 요소를 생성하고 폼에 배치 createTHeadO
createTFoot. 은 <TFOOT> 요소를 만들고 폼에 배치
deleteCaption. <자막> 요소를 삭제
deleteTHead ()은 <THEAD> 요소의 삭제
deleteTFoot한다. 삭제 <TFOOT> 요소
InsertRow를 새로운 행 삽입에 나타난 물체의 소정 위치 (위치보다)
deleteRow를 (위치보다) 삭제 표 객체의 위치를 지정 라인
insertCell (받은 위치가)의 행 컬렉션에 지정된 새로운 셀 위치 삽입
행 컬렉션에 특정 위치에서 셀을 삭제 deleteCell (위치보다)