DOM은 무엇입니까?
DOM 표준 (월드 와이드 웹 컨소시엄), 문서 객체 모델 (문서 객체 모델)의 약자 W3C의입니다.
DOM 문서에 액세스하기위한 표준을 정의한다 :
"W3C 문서 객체 모델 (DOM)은 문서 구조와 스타일의 내용을 업데이트, 프로그램 및 스크립트에 동적으로 액세스 할 수있는 플랫폼과 언어 중립적 인 인터페이스입니다."
W3C의 DOM을 표준은 세 가지 부분으로 나누어 져 있습니다 :
핵심 DOM - 모든 문서 유형에 대한 표준 모델
의 XML DOM - XML 문서에 대한 표준 모델
HTML 문서에 대한 표준 모델 - HTML DOM
HTML DOM은 무엇인가?
HTML HTML DOM 표준 개체 모델 및 프로그래밍 인터페이스입니다. 그것은 정의
HTML 요소를 객체로
모든 HTML 요소의 특성
의 모든 HTML 요소에 액세스하는 방법을
모든 HTML 요소 경우
즉를 : HTML DOM은 얻을 변경, 추가 또는 표준 HTML 요소를 삭제하는 방법에 관한 것입니다.
HTML DOM 문서 객체
문서 객체는 페이지를 나타냅니다. 당신이 HTML 페이지에있는 모든 요소에 액세스하려면, 당신은 항상 문서 객체를 액세스 시작합니다.
방법
document.getElementById를 (이름) (ID는 고유 ID의 번호와 오류, 그것은 첫 번째를 반환하는 경우, 하나 개의 요소를 반환) 선택기 아이디 CSS로 요소를 찾을 수 있습니다.
document.getElementsByTagName (이름) 태그 이름으로 요소를 찾기 위해은 (는 null를 찾을 수없는 노드 요소 태그 이름의 모든 자손을 반환)
document.getElementsByClassName (이름) 클래스 이름 (기준 요소를 찾을 노드의 모든 자손을 반환 는 null없는 요소의 클래스 이름)
element.attribute = "속성 값"속성 값 변경 HTML 요소
element.setAttribute (속성, 값)은 HTML 요소 값 속성 변경
element.style.property = '속성 값' 는 CSS 스타일 값을 (따옴표주의) 변경
document.createElement HTML 요소를 만들 수있는 (요소)
HTML 요소를 삭제 document.removeChild (요소)
document.appendChild를 (요소) HTML 요소 추가
HTML 요소 교체 document.replaceChild (요소)
document.write를 ( HTML 출력 스트림에 기록 된 텍스트) () 전체 페이지를 다시 수출
이 요소에 텍스트를 추가 할 때, 텍스트 노드를 만들 document.createTextNode (텍스트)을 먼저 텍스트 노드를 작성해야합니다.
element.insertBefore (파라, 아이)의 노드 앞의 파라 자식 노드를 첨가 하였다.
HTMLCollection하지 배열!
그것은 document.getElementsByTagName (이름)과 document.getElementsByClassName (이름) 반환 값입니다.
HTMLCollection의 길이 속성은 요소의 수를 정의
합니다 (다만, 배열과 같은) 디지털을 통해 목록과 참조 요소를 통해 갈 수
그러나, 당신은 valueOf (), 팝업 ()와 같은 메소드 HTMLCollection의 배열을 사용할 수 없습니다 푸시 () () 또는 조인 .
재산
document.innerHTML, 또는 대안 적으로는 HTML 요소의 콘텐츠를 획득하기 위해 사용될 수있다.
절대 기준 URI로 문서를 반환 document.baseURI
기저 URI 것은 현재 노드 문서의베이스 URI 대신에, 인 DOMString이다. 당신이 얻을 수없는 경우는 null을 반환 할 수 있습니다. 이 값은 읽기 전용이며, 시간이 지남에.
는 document.body 반환 <BODY> 요소의
document.cookie를 반환 쿠키 문서
document.doctype 문서의 DOCTYPE의 반환
<HTML> 요소 document.documentElement 수익을
브라우저 사용 모드로 document.documentMode 반환
의 문서 URI를 반환는 Document.documentURI
document.domain을 반환 도메인 이름 서버의 문서
document.embeds 모든 <삽입> 요소를 반환
요소는 모든 <형식> 반환하는 경우 - document.forms를
<head> 요소 반환 document.head
모든 <IMG> 요소를 반환 document.images를
DOM 구현 반환 document.implementation
document.inputEncoding 반환 문서를 인코딩 (문자 집합)
날짜와 시간을 업데이트 document.lastModified 문서를 반환
document.links 모든 <지역>은 href 속성을 가지고 반환
문서 (부하) 상태의 document.readyState 반환
URI를 (링크 된 문서)에 대한 참조를 반환 document.referrer는
반환 모든 <script> 요소 document.scripts
시행 오류 검사의 경우 document.strictErrorChecking 반환
document.title이 반환 <제목> 요소
document.URL를 문서의 전체 URL을 반환
CSS 선택기를 통해 HTML 요소를 찾기
document.querySelectorAll ( "p.intro")는 모든 클래스를 반환 = "소개"페이지 요소는 CSS 선택기의 포함 (ID, 클래스 이름, 유형, 등 속성 값을 속성)는
인터넷 익스플로러 8 이전 버전에 적용되지 않습니다 버전.
document.querySelector (선택기) 제 매칭 소자로 복귀한다. 하나 이상의 선택기를 포함하는 문자열 선택 DOM의 DOMString하였습니다. 문자열은 유효한 CSS 선택기 문자열이어야합니다.
그러나 의사 요소 의사 클래스와 일치하지 않습니다. 사용하는 경우, 그것은 아무것도 반환하지 않습니다.
당신이 구문을 준수하지 않는 ID 또는 CSS 선택자와 일치 할 경우 (예 : 콜론이나 공간의 부적절한 사용으로), 이러한 문자는 백 슬래시로 이스케이프해야합니다.
자바 스크립트 때문에 백 슬래시는 이스케이프 문자, 그래서 당신은 텍스트 문자열을 입력 할 때, 당신은 (자바 스크립트 문자열 탈출 한 번 querySelector 또 다른 탈출을) 두 번을 탈출해야합니다
을 console.log ( '# foo는 \\ 바') // "#foo \ 줄"
을 console.log ( '# foo는 바 \\\\') // "#foo \\ 바"
document.querySelector ( '# foo는 \\\\ 바 ') // DIV 첫 번째 요소와 일치
document.querySelector ( '# foo는 : 바' ) // 모든 요소와 일치하지 않는
document.querySelector ( '# foo는을 \\ : 바 ') // 두 번째 DIV 일치
선택기는 다음과 같은 예로서, 매우 강력한 될 수 있습니다.
여기서 "사용자 패널 메인"div 요소 <div> (<div 클래스 = "사용자 패널 메인">) 이름 속성은이 "로그인"입력 요소 <input> (<input 이름의 class 속성을 포함 다음과 같이 = />), 방법을 선택하기 위해 "로그인"
VAR EL = document.querySelector ( "div.user-panel.main 입력 [이름 ="로그인 "]");
자바 스크립트를 사용하여 간단한 애니메이션 :
<script>
함수 myMove () {
VAR은 ELEM = document.getElementById를 ( "애니메이션");
VAR은 POS 0 =;
VAR =하여 setInterval ID (프레임 ,. 5); // 간헐 호, 그것은로 지정된 것 통화가 취소 또는 간헐적 페이지 언로드까지 코드 구간이 반복 실행된다.
@ 타임 아웃 콜의 setTimeout은 (프레임, 5) 함수 호출은 지정된 시간 후에는 ID 값을 초과 통화가 됨 clearInterval (ID) 호를 취소 할 수를 반환한다.
프레임 함수 () {
IF (POS의 == 350) {
위해 clearInterval (ID); // 호출 간헐 취소
다른} {
POS ++;
elem.style.top = + POS "PX"을;
elem.style.left = + POS "PX ";
}
}
}
</ SCRIPT>
간단한 HTML 속성 값 변경
<DIV
스타일 = "x 150 픽셀, 높이 : 폭 : :; 없음 배경 색 빨간색 테두리 x 60 픽셀; 부동는 : 왼쪽으로 패딩 : 20 픽셀; 글꼴 크기 : 25 픽셀; 색상 : #fff를,"
onMouseover와를 = "this.innerHTML = '감사합니다!'"
= "this.innerHTML = '마우스 이동!'"onmouseout
> 마우스 이동!
</ DIV>
style.display를 = "없음"; 반환; } } </ script>
행사
document.getElementById를 ( "myBtn")의 onclick = 함수 () {} ;. 경우, 나중에 수행되는 기능을 클릭.
온로드 및으로 onUnload 이벤트
는 사용자가 페이지를 떠나 트리거 온로드 및으로 onUnload 이벤트를 입력 할 때.
온로드 이벤트는 페이지를로드하기 위해이 정보를 해당 버전에 따라 다음 브라우저 종류와 버전 감지 방문자의 브라우저를 사용 할 수 있습니다.
온로드 및으로 onUnload 이벤트 쿠키를 처리하는 데 사용할 수 있습니다.
onchange를 이벤트는
종종 입력란 검증과 관련하여 사용된다.
<input 타입 = "텍스트"ID = "FNAME은"의 onchange = "대문자 ()"> 는 사용자가 입력 필드의 내용을 변경하는 경우, 자로 () 함수를 호출한다.
onMouseover와 및 이벤트 onmouseout
사용자가 기능을 트리거 또는 HTML 요소에서 마우스를 이동할 때 사용할 수 있습니다.
마우스 버튼을 클릭하면 첫째,하면 onMouseDown 이벤트가 트리거됩니다;
마우스 버튼을 놓으면 다음, onMouseUp에 이벤트가 트리거,
그리고 마지막으로, 마우스 마침을 클릭하면, 온 클릭 이벤트가 트리거됩니다.
onfocus 및이
입력 필드에 포커스가 놓여 졌을 때 발생합니다.
addEventListener () 메서드
element.addEventListener (이벤트, 함수에 useCapture) ,
이벤트 (예를 들면 "다음"또는 "mousedown")을 제 1 타입 파라미터.
두 번째 매개 변수는 이벤트가 우리가 호출 할 필요가 발생할 때의 함수이다.
세번째 매개 변수는 이벤트 캡처 또는 이벤트 버블의 사용을 지정하는 부울 값이다. 이 매개 변수는 선택 사항입니다.
(참고 : 이벤트에 접두사 "의"사용하지 마십시오하며 대신 "onclick을"의 "클릭"사용하십시오.)
자바 스크립트 HTML DOM 탐색
인 parentNode 상위 노드
[NODENUMBER] 여러 하위 노드의 childNodes에는
첫 번째 자식 노드가 firstChild
a의 마지막 자식 노드 lastChild
로 nextSibling 다음 형제 노드
형제 노드의 previousSibling은을
firstChild는 lastChild는,로 nextSibling은 previousSibling은은 대신 속성, 공간 또는 노드 처리와 같은 새로운 줄 것입니다
정확하게 대응하는 요소를 찾기 위해, 사용할 수 있도록
자바 스크립트 자신의 속성입니다 문구와 호환 previousElementSibling, firstElementChild, lastElementChild, nextElementSibling을.
텍스트 노드의 값이 액세스 노드 innerHTML 속성에 의해 수행 될 수
myTitle이라는 VAR = document.getElementById를 ( "데모") innerHTML을;.
액세스 nodeValue를 innerHTML 속성 당량 제 자식 노드에 액세스 할 :
VAR을 = myTitle이라는 document.getElementById를 ( "데모") .firstChild.nodeValue는,
제 자식 노드에 액세스 할 수있다 예 :
. myTitle이라는의 VAR = document.getElementById를 ( "데모")는 childNodes에 [0] .NodeValue 그러면 단계;
여기서 nodeName 속성은 노드의 이름을 지정합니다.
여기서 nodeName은 읽기 전용이며
여기서 nodeName 요소 노드가 레이블 이름과 동일하다 (대문자)
프로퍼티 노드 노드 이름은 속성의 이름입니다
노드 명 텍스트 노드는하는 #text 항상
노드 명 문서 항상 노드 #document
소정 노드의 nodeValue를 속성 값.
이 NodeValue 요소 노드는 정의되지
nodeValue를 텍스트 노드가 텍스트의 본문 인
nodeValue를 속성 노드는 속성 값
가장 중요한 속성은 nodeType에 있습니다 :
노드 유형의 예는
ELEMENT_NODE 1 <H1 클래스 = "제목 "> W3School </ H1> ( 요소)
= (속성) "제목"2 개 클래스 (.XML DOM에서 HTML DOM에서 더 이상 사용되지 ATTRIBUTE_NODE ) 포기하지.
있는 text_node W3 스쿨 3 (텍스트).
COMMENT_NODE 8. <! -이 주석입니다 -> (주)
HTML 문서 자체를 DOCUMENT_NODE 9 (<HTML> 부모 문서의 요소).
DOCUMENT_TYPE_NODE 10 (문서 유형 <DOCTYPE의 HTML을!> )