JS 구성
우리는 javascript 에 ECMAScript , DOM 및 BOM 세 부분이 있다는 것을 알고 있습니다. 호스트 (브라우저)에 따라 특정 증상도 다르며 IE와 다른 브라우저는 매우 다른 스타일을 가지고 있습니다.
1. Dom은 W3C 표준입니다. [모든 브라우저가 공개적으로 준수하는 표준]
2. BOM은 다양한 브라우저 제조업체의 DOM을 기반으로합니다.
각 브라우저에서 구현; [다른 브라우저의 다른 정의로 나타나며 구현 방법이 다릅니다.]
3. 창은 JS 객체가 아닌 BOM 객체입니다.
DOM (Document Object Model)은 HTML 및 XML 에 대한 응용 프로그램 프로그램 인터페이스 ( API )입니다.
BOM 주로 브라우저 Windows 및 프레임 워크를 다루지 만 브라우저 별 JavaScript 확장은 일반적으로 BOM의 일부로 간주됩니다. 이러한 확장에는 다음이 포함됩니다.
새로운 브라우저 창 팝업 이동, 브라우저 창을 닫고 창을 크기 조정하십시오. 웹 브라우저 세부 정보를 제공하는 위치를 포지셔닝합니다. 사용자 화면 해상도 세부 사항을 제공하는 화면 객체. 쿠키 지원. IE는 BOM을 확장하고 ActiveXobject 클래스를 추가했습니다. ActiveX 객체는 JavaScript를 통해 인스턴스화 할 수 있습니다.
javacsript BOM (Browser Object Model) 객체에 액세스하여 클라이언트 (브라우저)에 액세스, 컨트롤 및 수정합니다. BOM 의 window 에는 document 포함되어 있으므로 윈도우 객체의 속성과 방법을 직접 사용하고 인식 할 수 있습니다. 따라서 window 객체의 document 속성을 직접 사용할 수 있으며 XHTML 문서의 내용과 구조에 액세스, 검색 및 document 속성을 통해 수정할 수 있습니다. document 객체는 DOM (Document Object Model) 모델의 루트 노드이기 때문입니다. BOM에는 DOM (Object)이 포함되어 있으며 브라우저는 BOM 객체에 대한 액세스를 제공 한 다음 DOM 객체에 액세스하여 JS가 브라우저를 작동하고 브라우저에서 읽은 문서를 작동시킬 수 있습니다. ~에
DOM은 다음을 포함합니다 : window
창 객체는 속성이 포함되어 있습니다 : 문서, 위치, 탐색, 화면, 기록, 프레임 소지서 루트 노드는 자식 노드가 포함되어 있습니다 : 양식, 위치, 앵커, 이미지, 링크
Dom의 가장 근본적인 대상은 BOM의 창문 개체의 자식 대상이라는 점에서 window.document 에서 볼 수 있습니다.
차이 : DOM은 웹 페이지 컨텐츠를 처리하기위한 방법과 인터페이스를 설명하고 BOM은 브라우저와 상호 작용하기위한 방법과 인터페이스를 설명합니다.
DOM을 만나십시오
다음 코드를 살펴 보겠습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"xml : lang = "en"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> dom </head> <h2> <h2> <a body> href = "http://www.baidu.com"> javaScript dom </a> </h2> <p> HTML 요소를 작동, CSS 스타일 등을 추가, 변경 또는 제거합니다.
HTML 코드를 DOM 노드 계층 구조 다이어그램으로 분해합니다.
** HTML 문서는 노드 모음이라고 할 수 있습니다. DOM 노드에는 다음이 포함됩니다. ** 1. 요소 노드 : 위 그림에서 <html>, <body>, <p> 등은 모두 요소 노드, 즉 태그입니다. 2. 텍스트 노드 : <li> ... </li>의 JavaScript, DOM, CSS 및 기타 텍스트와 같은 사용자에게 표시되는 컨텐츠. 3. 속성 노드 : <a> 태그의 링크 속성 href = "http://www.baidu.com"과 같은 요소 속성.
노드 속성 노드 속성 Nodename은 내용이 Node Nodetype의 이름 인 문자열을 반환합니다. 이 값은 주어진 노드 nodevalue의 유형을 나타냅니다. 주어진 노드의 현재 값을 반환합니다.
Traversal Node Tree Traversal Node Tree Childnodes는 배열을 반환합니다.이 배열은 주어진 요소의 어린이로 구성됩니다. 첫 번째 차일드 Childs Ode를 반환합니다. 마지막 자식 노드를 반환합니다. 마지막 어린이 Node 부모 Node Node Node를 반환합니다. 주어진 노드의 다음 중독 노드를 반환합니다.
DOM Operation Operation CreateElement (요소) 생성 새 요소 Node CreateTextNode () 주어진 텍스트가 포함 된 새 텍스트 노드 생성 주어진 텍스트 부록 () 지정된 노드의 마지막 노드 목록 후에 새 하위 섹션 추가 () 주어진 요소의 주어진 자식 노드의 전면에 주어진 하위 노드를 삽입 한 자식 노드에서 주어진 하위 노드를 제거합니다. 다른 노드로
DOM은 트리를 만들어 웹 컨텐츠를 처리하기위한 방법과 인터페이스를 설명함으로써 문서를 나타내어 개발자가 문서의 내용과 구조를 전례없는 제어 할 수 있도록 문서를 나타냅니다. DOM API를 사용하면 노드를 쉽게 삭제, 추가 및 교체 할 수 있습니다.
1. 액세스 노드
`varohtml = document.documentElement;`// XML 및 HTML 문서에 존재하는 문서 루트 노드를 반환합니다. OHTML은 <html/> //을 나타내는 htmlelement 객체`document. 또한 지정된 Id.getElementByName ( "name")`이름으로 이름을 지정된 ID // 지정된 값과 동일한 이름 속성의 모든 요소를 가져옵니다. 그러나 IE6 및 Opera7.5에서는 주어진 이름으로 ID를 가진 요소를 반환하고 <input/> 및 <img/>`var x = document.getElementsByTagName ( "p");`// 지정된 태그 이름을 사용하여 모든 요소 목록을 반환하기 위해 지정된 태그 이름을 사용하여 인덱스 번호가 0부터 시작될 때, 모든 요소가 반환되지 않아야합니다.
2. 노드 노드의 특성과 방법
firstchild // 노드, ChildNodes 목록의 첫 번째 노드를 가리키고 LastChild // Node, ChildNodes 목록의 마지막 노드를 가리키고 ParentNodes List ParentNode // node를 가리 킵니다. Childnodes 목록에있는 Childnodes // 노드를 가리키고, 부모 노드를 가리키고, node hildnodes를 가리키고, nodelist, 이전의 모든 어린이 목록, 이전 형제 노드를 가리키고, 이전 형제 노드를 가리 킵니다. `haschildnodes ()`// 부울, 어린이에 하나 이상의 노드가 포함되면 실제 값이 반환됩니다.
3. 돔 이벤트
DOM은 동시에 두 가지 이벤트 모델이 있습니다. 버블 이벤트 및 캡처 이벤트 버블 이벤트 : 이벤트는 가장 구체적인 이벤트 대상에서 가장 구체적인 이벤트 대상에서 <body onclick = "handleclick ()"> <div onclick = "handleclick ()"> 클릭 </div> </body> 트리거의 순서가 : html (ie 6.0 및 mozilla, mozilla, html)을 클릭합니다. (모질라 1.0). 캡처 된 이벤트 : 반대 프로세스와 버블 이벤트에서 이벤트는 가장 부정확 한 객체에서 시작한 다음 위의 예를 트리거하는 가장 정확한 순서로 시작합니다. Document, Div. DOM 이벤트 모델의 가장 독특한 속성은 텍스트 노드도 이벤트 (IE가 아님)를 트리거한다는 것입니다.
4. 이벤트 처리 기능/청취 기능
** javaScript의 이벤트 핸들러 기능/리스너기 함수 ** : var Odiv = document.getElementById ( "div1"); odiv.onclick = function () {// onclick은 소문자에서만 사용할 수 있으며 기본값은 버블 이벤트 알림입니다 ( "Clicked!"); } in html : <div onclick = "javaScript : alert ("clicked! ")"> </div> // onclick은 경우에 따라 임의적입니다.IE 이벤트 핸들러 autdachevent () 및 detachevent ()
즉, 각 요소와 창 객체는 두 가지 메소드가 있습니다 : attachEvent()和detachEvent()
[object] .attachevent ( "name_of_event_handler", "function_to_attach") [object] .detachevent ( "name_of_event_handler", "function_to_remove") var fnclick = function () {alert ( "clicked!"); } odiv.attachevent ( "onclick", fnclick); // 이벤트 처리 기능 추가 ODIV.ATTACHEVENT ( "onclick", fnclickanother); // 여러 이벤트 처리 기능을 추가 할 수 있습니다. ODIV.DETECHEVENT ( "OnClick", fnclick); // 이벤트 처리 기능 제거 ODIV.DETACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.DETACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.ATTACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.ATTACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.DETACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.ATTACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능 제거 ODIV.ATTACHEVENT ( "onclick", fnclick); // 이벤트 처리 기능을 제거합니다 attachEvent()
크로스 브라우저 이벤트 핸들러
addHandler()和removeHandler() addHandler() 메소드는 eventuntil ()이라는 객체에 속합니다. 두 방법 모두 3 개의 동일한 매개 변수, 작동 할 요소, 이벤트 이름 및 이벤트 처리기 기능을 허용합니다.
이벤트 유형
** 이벤트 유형 ** 마우스 이벤트 : 클릭, DBCLICK, 마우스 own, 마우스 업, 마우스 오버, 마우스 아웃, 마우스 미 키 보드 이벤트 : 키 다운, 키 프레스, 키프 HTML 이벤트 :로드, 언로드, 중단, 오류, 선택, 제출, 재설정, 크기, 스크롤, 블루
이벤트 핸들러
JavaScript 코드를 실행하는 프로그램은 이벤트가 발생할 때 이벤트에 응답합니다. 특정 이벤트에 대한 응답으로
실행 된 코드를 이벤트 프로세서라고합니다.
HTML 태그에서 이벤트 처리기를 사용하기위한 구문은 다음과 같습니다.
<HTML标签事件处理器="JavaScript代码''>이벤트 핸들러
이벤트는 사용자 또는 브라우저 자체가 수행하는 특정 작업입니다. 예를 들어 click,mouseup,keydown,mouseover 등은 모든 이벤트 이름입니다. 특정 이벤트에 응답하는 기능을 이벤트 핸들러 (이벤트 리스너)라고합니다. 이벤트 핸들러는 on 으로 시작하므로 click 의 이벤트 핸들러가 onclick 입니다.
DOM 레벨 0 이벤트 핸들러
Dom Level 0 이벤트 핸들러 : 이벤트의 핸들러 속성에 함수 할당
<입력 유형 = "버튼"value = "버튼 2"id = "Ben2"/> var btn2 = document.getElementById ( 'btn2'); btn2 버튼 객체 btn2.onclick // btn2에 on click 속성을 추가하고 속성은 이벤트 핸들러를 트리거합니다. btn2.onclick = function () {} // 익명 함수 추가 btn2.onclick = null // onclick 속성 삭제거품을 막는 방법?
버블 링을 방지하는 다음과 같은 방법이 있습니다.
e.cancelBubble=true;e.stopPropagation();return false;InnerText, InnerHtml, Outerhtml, outertext
InnerText, InnerHtml, Outerhtml, Outertext InnerText : 시작 태그와 엔드 태그 InnerHtml 사이의 텍스트를 나타냅니다. 노드가 교체되고 문제는 내부 텍스트 OUTERHTML과 동일한 내용을 반환합니다. 전자의 차이점은 전체 대상 노드가 바뀌고 요소 자체를 포함하여 요소의 전체 HTML 코드가 반환된다는 것입니다.
DOM 레벨 2 이벤트 핸들러
DOM 레벨 2 이벤트는 이벤트 핸들러의 작동을 지정하고 삭제하는 두 가지 방법을 정의합니다. addEventListener() 및 removeEventListener()
addeventListener () 및 removeEventListener ()
DOM에서 addeventListener () 및 removeEventListener ()는 이벤트 처리기를 할당하고 제거하는 데 사용됩니다. IE와 달리 이러한 방법에는 세 가지 매개 변수가 필요합니다. 이벤트 이름, 할당 할 함수와 처리 함수가 기포 단계 (False) 또는 캡처 스테이지 (True)에 사용되는지 여부. 기본값은 버블 스테이지 False [object] .adeventListener ( "name_of_event", fnhander, bcapture) [object] .removeeventListener ( "name_of_event", fnhander, bcapture) var fnclick = function () {alert ( "clicked!")입니다. } odiv.adeventListener ( "onclick", fnclick, false); // 이벤트 처리 기능 추가 ODIV.ADDEVENTLISTERE ( "onclick", fnclickanother, false); // 즉, 여러 이벤트 처리 기능을 추가 할 수 있습니다. // 이벤트 처리 기능 제거 addeventListener ()를 사용하여 이벤트 처리 기능을 캡처 스테이지에 추가하는 경우 캡처 스테이지로 removeEventListener () 에이 이벤트 처리 기능 ODIV.onclick = fnclick을 올바르게 삭제하려면 캡처 스테이지로 지정해야합니다. odiv.onclick = fnclick; // 직접 할당을 사용하면 후속 이벤트 처리 기능이 이전 처리 함수 ODIV.onclick = fnclick; odiv.addeventListener ( "onclick", fnclickanother, false); // 전화가 순서대로 호출되며 덮어 쓰지 않습니다.outhtml, 내부 텍스트, innerhtml을 이해하는 사진 :
DOM BASIC OPERTION 마인드 맵
자세한 내용 XML DOM- 요소 객체의 속성 및 방법은 W3CShool을 방문하십시오.
BOM 부분
BOM 의 핵심은 window 이고 window 객체는 이중 역할을합니다. JS를 통해 브라우저 창에 액세스하는 것은 인터페이스와 Global 객체입니다. 이는 웹 페이지에 정의 된 모든 객체, 가변 및 기능이 Window가 global 객체로 사용한다는 것을 의미합니다.
Window.Close (); // 창 창을 닫습니다 .Alert ( "메시지"); // OK 버튼으로 시스템 메시지 상자를 팝업하여 지정된 텍스트 창을 표시합니다. // OK 및 취소 버튼으로 쿼리 대화 상자를 팝업하고 부울 값 창을 반환합니다. // 사용자에게 정보를 입력하고 두 개의 매개 변수, 즉 사용자에게 표시 할 텍스트와 텍스트 상자의 기본값을 수락하라는 메시지를 표시하고 텍스트 상자의 값을 함수 값으로 반환합니다. // 상태 표시 줄의 텍스트를 일시적으로 변경할 수 있습니다 .DefaultStatus // 기본 상태 표시 줄 정보는 사용자가 현재 페이지 Window를 떠나기 전에 텍스트를 변경할 수 있습니다. // 지정된 밀리 초 후 지정된 코드를 설정하고 2 개의 매개 변수, 실행중인 코드 및 Window.clearTimeout ( "id")을 기다릴 밀리 초 수를 수락합니다. // 실행되지 않은 일시 정지를 취소하고 일시 정지 ID를 window에 전달합니다. // 지정된 코드를 무한히 지정된 지정된 기간 동안 반복하면 매개 변수는 settimeout () window.clearInterVal ( "id")과 동일합니다. // 시간 간격을 취소하고 간격 ID를 window.history.go (-1)로 전달합니다. // 브라우저 창의 기록에 액세스하십시오. 음수는 뒤로이고 양수는 앞으로 Window.history.back (); // 위의 Window.history.forward ()와 동일합니다. // 위의 창과 동일합니다.
문서 개체
문서 개체 : 실제로 창 객체의 속성입니다. Document == Window.document는 true입니다. BOM 및 dom 문서에 속하는 유일한 객체입니다. lastModified // 문서를 나타내는 문자열을 가져옵니다. referrer // 사용자가 문서에 링크하는 위치를 추적하는 데 사용되었습니다 .Title // 현재 페이지의 제목을 읽고 쓰기 및 쓰기 문서를 읽고 쓰기 [0] 또는 쓰기. 페이지 document.forms [0] 또는 document.forms [ "formname"] // 모든 양식 문서에 액세스하십시오. document.embeds [ "embedname"] // 모든 임베디드 객체에 액세스하십시오. 또는 document.writeln (); // 문자열이 호출되는 위치에 삽입합니다
위치 개체
위치 개체 : 로딩 창의 URL을 나타내며 Window.location location.href // http://www.some.com/pictures/index.htm location.htm 위치와 같은 현재로드 된 페이지의 전체 URL로 참조 할 수 있습니다. Portocol // Double Slash 이전의 부품은 http 위치와 같은 PROTOCH입니다. www.wrox.com location.hostname // 일반적으로 호스트와 동일하며 때로는 이전 www 위치와 같습니다. 포트 // URL에 의해 요청 된 포트. 기본적으로 대부분의 URL에는 8080 location.pathname // url의 호스트 이름 뒤의 부분과 같은 포트 정보가 없습니다. /pictures/index.htm location.search.search.search.search.search // get 요청을 실행하는 URL의 질문 마크 다음 부분과 같은 부분은? location.assign ( "http : www.baidu.com"); // 동일한 위치 .href, 새 주소는 브라우저의 히스토리 스택 위치에 추가됩니다 .replace ( "http : www.baidu.com"); // 동일한 할당 ()이지만 새 주소는 브라우저의 히스토리 스택에 추가되지 않습니다. // 현재 페이지를 다시로드하면, False 인 경우 브라우저 캐시에서 과부하가 걸리며 사실이면 서버 측에서 오버로드되고 기본값은 False입니다.
네비게이터 개체
`Navigator '객체 : 브라우저 및 운영 체제를 탐지하는 데 매우 유용한 웹 브라우저에 대한 많은 정보가 포함되어 있습니다. 또한 wind 활성화, return true, 그렇지 않으면 false navigator.platform // 브라우저가 위치한 컴퓨터 플랫폼의 문자열은 navigator.plugins를 나타냅니다.
화면 객체
화면 개체 : 사용자의 화면에 대한 정보를 얻는 데 사용됩니다. 또한 window.screen.width/height // 화면의 너비와 높이, 픽셀, 스크린, 화면의 너비와 높이 // 창이 사용할 수있는 화면의 너비와 높이, 픽셀, screen.colordepth // 대부분의 시스템은 32- 비트 윈도우를 사용합니다. window.resizeto (screen.availwidth, screen.availheight); // 사용자의 화면을 채우십시오
창 객체 메소드
BOM과 DOM의 구조적 관계에 대한 개략도
Windows Object Mind Map