DOM은 무엇입니까?
1. 소개
문서 개체 모델 (DOM)은 확장 가능한 로고 언어를 처리하기 위해 W3C 조직이 권장하는 표준 프로그래밍 인터페이스입니다. 문서 개체 모델은 1990 년대 후반 Microsoft와 Netscape 간의 "브라우저 전투"로 거슬러 올라갈 수 있습니다. JavaScript의 JScript로 삶과 죽음과 싸우기 위해 양측은 브라우저에 대규모로 강력한 기능을 제공했습니다. Microsoft는 VBScript, ActiveX 및 Microsoft의 자체 DHTML 형식을 포함하여 웹 페이지 기술에 많은 독점적 인 것들을 추가하여 많은 웹 페이지가 비 미생물 플랫폼 및 브라우저를 사용하여 정상적으로 표시 할 수 없습니다. Dom은 당시 양조 된 걸작입니다.
DOM (Document Object Model)은 HTML 및 XML에 대한 응용 프로그램 프로그램 인터페이스 (API)입니다. DOM은 전체 페이지를 노드 레벨로 구성된 문서로 계획합니다.
소위 문서 개체 모델은 실제로 HTML의 헤더, 단락, 목록, 스타일, ID 등과 같은 웹 페이지 HTML의 다양한 요소를 내부 표현합니다. 모든 요소는 DOM을 통해 액세스 할 수 있습니다.
JavaScript는 궁극적으로 HTML 페이지를 작동하고 HTML을 DHTML로 전환해야하며 DOM은 HTML 페이지를 작동해야합니다. DOM은 HTML 페이지를 객체로 시뮬레이션하는 것입니다. JavaScript가 일부 계산, 루프 및 기타 작업 만 수행하고 HTML을 작동 할 수없는 경우 의미를 잃게됩니다.
DOM은 HTML 페이지의 모델입니다. 각 태그는 물체로 사용됩니다. JavaScript는 DOM에서 속성 및 메소드를 호출하여 웹 페이지의 텍스트 상자, 레이어 및 기타 요소를 프로그래밍 방식으로 제어 할 수 있습니다. 예를 들어, 텍스트 상자의 dom 객체를 작동하면 텍스트 상자의 값을 읽고 텍스트 상자에 값을 설정할 수 있습니다.
2. 그림
창 정보 전체 페이지 또는 창은 창입니다. 물체------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
페이지에 정의 된 변수 및 메소드는 창입니다.
Window.id
document.getElementByid ()
창 객체의 속성 및 메소드를 사용하면 창을 생략 할 수 있습니다.
예를 들어:
window.alert ( 'hello');
경고하기 위해 생략 할 수 있습니다 ( 'Hello');
Window.document는 문서와 함께 직접 쓸 수 있습니다
창을 쓸 수없는 경우 Window를 작성하지 마십시오. JS 파일의 바이트 수를 줄일 수 있으므로 작성하지 마십시오.
코드 사본은 다음과 같습니다.
window.alert ( '안녕하세요 여러분!'); // 경고 대화 상자가 나타납니다
wind
window.navigate (url); // 웹 페이지를 URL로 다시 표시하여 IE 및 Opera11.6을 지원합니다. 권장하지 않으면 일부 브라우저는 작동하지 않으며
Window.location.href = 'url'; // 대부분의 브라우저를 지원하는 것이 좋습니다
DOM 요소를 동적으로 작동합니다
1. DOM을 얻으십시오
getElementById () (매우 일반적으로 사용)는 요소의 ID에 따라 객체를 얻고 웹 페이지의 ID를 반복 할 수 없습니다. 요소의 ID를 통해 직접 요소를 참조 할 수도 있지만 유효한 범위가 있습니다.
getElementsByName (), 요소 이름에 따라 개체를 가져옵니다. 여러 radiobuttons의 이름과 같이 페이지의 요소 이름을 반복 할 수 있으므로 GetElementsByName의 리턴 값은 객체 배열입니다.
getElementsByTagName (), 지정된 태그 이름의 요소 배열을 가져옵니다. 예를 들어, getElementsByTagName ( "Input")은 모든 <input> 태그를 얻을 수 있습니다. *모든 레이블을 나타냅니다
2. 추가, 제거, 교체
Document.Write는 페이지로드 중에만 동적으로 만 만들 수 있습니다.
문서의 CreateElement 메소드를 호출하여 지정된 태그로 DOM 객체를 작성한 다음 부록 ()을 호출하여 새로 생성 된 요소를 해당 요소에 추가 할 수 있습니다. 특정 요소의 방법. // parent element object.removeChild (child element object); 요소 삭제.
CreateElement ( '요소'); 노드를 만듭니다
AppendChild (노드); 노드를 추가하십시오
removeChild (노드); removeChild (노드); 노드를 제거하십시오
RelfaceChild (신규, 오래된); 노드를 교체하십시오
insertbefore (신규, 참조); 전면에 노드를 추가합니다 (노드 앞면에 삽입)
방법:
재산:
자녀
마지막 차일
3. InnerHTML 또는 CreateElement (), AppendChild () 및 removeChild ()를 사용하십시오.
페이지의 요소를 조작 할 때 InnerHtml, createElement (), AppendChild () 및 removeChild ()를 사용해야합니까?
1. 많은 노드 작업을 수행 할 때 InnerHTML을 사용하는 성능이 빈번한 DOM 작업보다 낫습니다 (C 또는 C ++로 특별히 작성된 HTML 파서가 있습니다). 먼저 페이지의 HTML 코드를 작성한 다음 InnerHTML을 반복적으로 호출하는 대신 InnerHTML을 한 번 호출하십시오.
2. innerhtml = ''를 사용하여 노드를 삭제하려면 경우에 따라 메모리 문제가 발생합니다. 예를 들어, DIV에는 다른 많은 요소가 있으며 각 요소는 이벤트 핸들러에 바인딩됩니다. 현재 InnerHTML은 노드 트리에서 현재 요소를 제거하지만 해당 이벤트 핸들러는 여전히 메모리를 차지합니다.
JS 운영 스타일
요소의 스타일은 클래스 이름 속성입니다.
(클래스는 JavaScript의 예약 된 단어입니다. 속성은 키워드 나 예약 된 단어를 사용할 수 없으므로 클래스 이름이됩니다) 웹 페이지 전환 조명의 효과.
요소의 스타일을 수정하면 this.style = "Background-Color : Red"가 될 수 없습니다.
"스타일. 속성 이름"을 사용하여 스타일의 속성을 개별적으로 수정하십시오. 속성 이름이 CSS의 javaScript에서 작동하는 경우 속성 이름은 다를 수 있으며, 주로 속성에서 속성에 중점을 둡니다.
플로트 스타일을 작동 할 때
즉 : obj.style.stylefloat = 'right';
기타 브라우저 : obj.style.cssfloat = '오른쪽';
객체를 형성하십시오
일반적으로 사용 : 클릭 (), focus (), blur (); // 장비는 요소의 클릭을 트리거하고 초점을 얻고 프로그램을 통해 초점을 잃는 이벤트입니다.
양식 객체는 양식의 dom 객체입니다.
방법 : 제출 ()은 양식을 제출하지만 onsubmit 이벤트는 트리거되지 않습니다.
Autopost 구현, 즉, 제출 버튼이 제출 된 후에 만 제출하는 대신 포커스가 제어를 떠난 직후 페이지가 제출됩니다. 커서가 떠나면 Onblur 이벤트가 트리거되고 양식 제출 방법이 Onblur에서 호출됩니다.
제출을 클릭 한 후 OnSubmit 이벤트 이벤트가 트리거됩니다. 데이터 검증은 OnSubmit에서 수행 할 수 있습니다. 데이터에 문제가있는 경우 제출을 취소하려면 False를 반환하십시오.
위의 것은 JavaScript의 DOM에 대한 개인적인 이해이며 모든 사람들이 그것을 좋아할 수 있기를 바랍니다.