집 >웹 프론트엔드 >JS 튜토리얼 >js DOM 연구 노트_자바스크립트 기술

js DOM 연구 노트_자바스크립트 기술

WBOY원래의: 2016-05-16 17:57:551194검색

오늘은 DOM을 배우고 다음과 같은 기본 연습을 했습니다...
DOM은 Document Object Model의 약자로 DHTML 개발을 위해 DOM을 조작하기 위해 JavaScript를 사용합니다.
학습 목표: 일반적인 DHTML 효과를 얻기 위해 JavaScript를 사용하여 Dom을 작동할 수 있습니다.
참고 도서: Zhang Xiaoxiang의 "JavaScript 웹 개발 - 체험 학습 튜토리얼"
1. DOM 소개:
1. DOM은 HTML 페이지의 모델입니다. DOM의 속성과 메소드를 호출하여 웹페이지의 텍스트 상자, 레이어 및 기타 요소를 프로그래밍 방식으로 제어합니다. 예를 들어 텍스트 상자의 DOM 개체를 조작하여 텍스트 상자의 값을 읽고 설정할 수 있습니다.
2. DOM은 WinForm과 마찬가지로 이벤트, 속성, 메서드를 통해 프로그래밍할 수 있습니다.
3. CSS JavaScript DOM=DHTML(즉, HTML 언어의 확장입니다. 문서 및 개체의 표시 효과를 높일 수 있습니다.)
2. 이벤트: < body onmousedown="alert('haha')">onmousedown의 코드는 마우스를 클릭할 때 실행됩니다. 시간 이벤트에 응답하기에는 코드가 너무 많으면 별도의 함수에 넣으세요
:

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

참고: onmousedown 이벤트의 응답 함수가 bodymousedown이 아니라 bodymousedown 함수를 호출한다는 의미이므로 bodymousedown 뒤의 괄호는 손실될 수 없습니다.

2. 동적으로 설정된 이벤트:
이벤트 응답 기능은 .Net의 "btn.Click="처럼 코드에서 동적으로 설정할 수 있습니다.

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

.org/1999/xhtml">

< ;head>

type="button" onclick="document.ondblclick=f1" value="관련 이벤트 1" />

3. window 객체 현재 브라우저 창을 나타냅니다. window 객체의 경우 window를 생략할 수 있습니다. 예를 들어, window.alert('a')는 Alert('a')로 생략할 수 있습니다.
1) 경고 메서드는 메시지 대화 상자를 표시합니다
2) 확인 메소드는 "확인" 및 "취소" 대화 상자를 표시합니다. [확인] 버튼을 누르면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
if(confirm("계속하시겠습니까?"))

｛
alert("확인")
｝
else
{ Alert("취소");}
3) 지정된 주소로 다시 이동합니다: Navigate("http://www.microsoft.com/");
4) setInterval은 지정된 코드를 가끔씩 실행하며 첫 번째 매개변수는 code 에서 두 번째 매개변수는 간격 시간(단위: 밀리초)이고 반환 값은 타이머 ID입니다. 예: setInterval("alert('hello')",5000);

코드 복사

코드는 다음과 같습니다. 내 홈페이지에 오신 것을 환영합니다</title> ; </div><script type="text/javascript"> <div class="codebody" id="code96718">function scroll() { <br>var title = document.title <br>var firstch = title.charAt(0); var leftstr = title.substring(1, title.length); <br>document.title = leftstr firstch <br>} //웹페이지 제목을 스크롤하는 것이 목적입니다. <br>setInterval("scroll() ", 500); <br></script> <br></head> <br><body> <br></body> <br></html> <br><br><br>5) ClearInterval은 예약된 setInterval 실행을 취소합니다. 이는 Timer의 Enabled=False와 같습니다. setInterval은 여러 타이밍을 설정할 수 있으므로 ClearInterval은 삭제할 타이머의 식별자(setInterval의 반환 값)를 지정해야 합니다. var Intervalld= setInterval("alert('hello')",5000); <br>clearInterval(intervalld); <br>6) setTimeout도 정기적으로 실행되지만 setInterval처럼 정기적으로 실행되지는 않지만 설정된 시간 이후에 실행됩니다. 한 번만 실행되며,clearTimeout은 삭제 시간이기도 합니다. <br>구별하기 쉽습니다. 간격은 타이밍을 의미하고, 시간 초과는 시간 초과를 의미합니다. 예: var timeoutld=setTimeout("alert('hello')",2000); <br>사례: 제목 표시줄의 회전 효과, 즉 브라우저의 제목 텍스트가 500ms마다 오른쪽으로 스크롤되는 것을 실현하세요. 팁: 제목은 document.title 속성입니다. <br>4.1) onload: 웹 페이지가 로드될 때 발생합니다. 브라우저가 문서를 구문 분석하고 실행하는 동안 이 요소가 로드되지 않은 경우가 있습니다. 이 경우에는 반드시 본문의 onload 이벤트에 코드를 넣거나, 요소 뒤에 JavaScript를 넣을 수 있습니다. 요소의 onload 이벤트는 요소 자체가 로드될 때 발생하며, 본문의 onload는 모든 로드가 완료될 때 발생합니다. <br>2) onunload: 웹페이지가 닫힌 후(또는 떠난 후) 트리거됩니다. 이벤트(표시할 경고 메시지)에서 "Window.event.returnValue"에 값을 할당하여 창을 떠날 때(예: 앞으로, 뒤로, 닫힘) 확인 메시지가 팝업되도록 합니다. 예: <body onbeforeunload="Window.event.returnValue='정말로 포기하고 종료하시겠습니까?'"> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="36239" class="copybut" id="copybut36239" onclick="doCopy('code36239')"><u>코드 복사</u> </a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code36239"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><title>