자바스크립트의 DOM_javascript 기술에 대한 간략한 분석

돔이란 무엇인가요?

1. 소개

DOM(문서 개체 모델)은 W3C 조직에서 권장하는 확장 가능한 마크업 언어를 처리하기 위한 표준 프로그래밍 인터페이스입니다. 문서 객체 모델의 역사는 1990년대 후반 Microsoft와 Netscape 사이의 "브라우저 전쟁"으로 거슬러 올라갑니다. JavaScript와 JScript의 생사를 놓고 경쟁하기 위해 양 당사자는 브라우저에 대규모로 강력한 기능을 부여했습니다. Microsoft는 VBScript, ActiveX 및 Microsoft 고유의 DHTML 형식을 포함하여 많은 독점 기능을 웹 기술에 추가했으며 이로 인해 많은 웹 페이지가 Microsoft가 아닌 플랫폼 및 브라우저를 사용하여 제대로 표시되지 않게 되었습니다. DOM은 당시 양조된 걸작이다.

DOM(Document Object Model)은 HTML과 XML의 API(애플리케이션 프로그래밍 인터페이스)입니다. DOM은 전체 페이지를 노드 수준으로 구성된 문서로 계획합니다.

소위 문서 개체 모델은 실제로 헤더, 단락, 목록, 스타일, ID 등과 같은 웹 페이지 HTML의 다양한 요소를 내부적으로 표현한 것입니다. HTML의 모든 요소에 액세스할 수 있습니다. DOM.

JavaScript는 궁극적으로 Html 페이지를 작동하여 Html을 DHtml로 변환해야 하며 Html 페이지를 작동하려면 DOM을 사용해야 합니다. DOM은 Html 페이지를 객체로 시뮬레이션합니다. JavaScript가 일부 계산, 루프 및 기타 작업만 수행하고 Html을 작동할 수 없으면 존재 의미를 잃게 됩니다.

DOM은 HTML 페이지의 모델입니다. 각 태그는 객체로 처리됩니다. JavaScript는 DOM의 속성과 메서드를 호출하여 웹 페이지의 텍스트 상자, 레이어 및 기타 요소를 프로그래밍 방식으로 제어할 수 있습니다. 예를 들어 텍스트 상자의 DOM 개체를 조작하여 텍스트 상자의 값을 읽고 설정할 수 있습니다.

2. 일러스트레이션

창에 관해서는 전체 페이지나 창이 창 개체입니다---------------창이 최상위 개체입니다

페이지에 정의된 변수와 메소드는 모두 윈도우

window.id

document.getElementById()

window 객체의 속성과 메소드를 사용할 때 Window를 생략할 수 있습니다.

예:

window.alert('안녕하세요');

alert('hello')로 생략 가능

window.document를 직접 작성할 수 있습니다

가능하면 창을 쓰지 마세요. 이렇게 하면 js 파일의 바이트 수가 줄어들 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.alert('안녕하세요 여러분!');//경고 대화 상자 팝업
window.confirm('삭제하시겠습니까?');//대화 상자를 확인하고 취소하고 true 또는 false를 반환합니다.
window.navigate(url);//웹페이지를 해당 URL로 다시 탐색하며 IE 및 Opera11.6을 지원합니다. 권장되지 않습니다. 일부 브라우저는 작동하지 않습니다.

window.location.href='url' 사용을 권장합니다.//대부분의 브라우저를 지원합니다

DOM 요소의 동적 조작

1. DOM 가져오기

getElementById()(매우 일반적으로 사용됨)는 요소의 ID를 기반으로 개체를 가져옵니다. ID는 웹 페이지에서 반복될 수 없습니다. ID로 요소를 직접 참조할 수도 있지만 유효한 범위인

이 있습니다.

getElementsByName()은 요소 이름을 기반으로 개체를 가져옵니다. 동일한 이름을 가진 여러 RadioButton과 같이 페이지의 요소 이름이 반복될 수 있으므로 getElementsByName의 반환 값은 개체 배열입니다.

getElementsByTagName()은 지정된 태그 이름의 요소 배열을 가져옵니다. 예를 들어 getElementsByTagName("input")은 모든 태그를 가져올 수 있습니다. *는 모든 태그를 의미합니다

2. 추가, 제거, 교체

document.write는 페이지 로딩 중에만 동적으로 생성될 수 있습니다.

문서의 createElement 메소드를 호출하여 지정된 태그로 DOM 객체를 생성한 다음, 요소의appendChild() 메소드를 호출하여 해당 요소에 새로 생성된 요소를 추가할 수 있습니다. //상위 요소 object.removeChild (하위 요소 객체); 요소를 삭제합니다.

createElement('element');노드 생성

appendChild(node) 노드 추가

removeChild(node) 노드 제거

replaceChild(new,old); 노드 교체

insertBefore(new, reference); 노드를 앞에 추가합니다(노드 앞에 삽입)

방법:

속성:

첫번째 아이

마지막 자식

3. innerHTML 또는 createElement(), AppendChild() 및 RemoveChild()를 사용하시겠습니까?

페이지의 요소를 조작할 때 innerHTML을 사용해야 하나요, 아니면 createElement(),appendChild(),removeChild()를 사용해야 하나요?

1. 다수의 노드 작업의 경우 자주 사용하는 Dom 작업보다 innerHTML을 사용하는 성능이 더 좋습니다(C 또는 C로 특별히 작성된 html 파서가 있습니다.). 페이지의 HTML 코드를 먼저 작성한 후 innerHTML을 반복해서 호출하는 대신 innerHTML을 한 번만 호출하세요.

2. innerHTML=''을 사용하여 노드를 삭제하는 경우 경우에 따라 메모리 문제가 발생할 수 있습니다. 예를 들어 div 아래에는 다른 많은 요소가 있으며 각 요소는 이벤트 핸들러에 바인딩됩니다. 이 시점에서 innerHTML은 노드 트리에서 현재 요소를 제거하지만 해당 이벤트 핸들러는 여전히 메모리를 차지합니다.

js 작업 스타일

className 속성을 사용하여 요소의 스타일을 수정합니다.

(class는 자바스크립트의 예약어, 속성은 키워드나 예약어를 사용할 수 없으므로 className이 됩니다.) 웹페이지에 불을 켜고 끄는 효과.

this.style="Background-color:Red" 요소의 스타일은 수정할 수 없습니다.

스타일 속성을 개별적으로 수정하려면 "style.property 이름"을 사용하세요. CSS의 속성 이름은 JavaScript에서 작동할 때 다를 수 있습니다. 주요 초점은 속성 이름에 -가 포함된 속성입니다. 왜냐하면 -는 JavaScript에서 속성 또는 클래스 이름으로 사용할 수 없기 때문입니다.

Float 방식으로 동작할 때

IE:obj.style.styleFloat='오른쪽';

기타 브라우저: obj.style.cssFloat='right';

양식 개체

일반적으로 사용됨: click(), focus(), Blur(); // 프로그램을 통해 요소의 클릭, 포커스 및 포커스 상실 이벤트를 트리거하는 것과 동일합니다.

양식 객체는 양식의 Dom 객체입니다.

메서드: submit()이 양식을 제출하지만 onsubmit 이벤트가 트리거되지 않습니다.

자동 게시를 구현합니다. 즉, 제출 버튼이 제출된 후에만 제출하는 대신 포커스가 컨트롤을 떠난 직후에 페이지가 제출됩니다. 커서가 떠나면 onblur 이벤트가 트리거되고 양식의 제출 방법이 변경됩니다. onblur에서 호출됩니다.

제출을 클릭하면 양식의 onsubmit 이벤트가 발생합니다. 데이터에 문제가 있는 경우 false를 반환하여 제출을 취소할 수 있습니다.

위 내용은 JavaScript DOM에 대한 개인적인 이해입니다. 여러분 모두 마음에 드셨으면 좋겠습니다.