js DOM 연구 노트_자바스크립트 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:57 PM

dom 공부 노트

오늘은 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>

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7441

Cakephp 튜토리얼

1371

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

PHP 연구 노트: 데이터 구조 및 알고리즘 Oct 09, 2023 pm 11:54 PM

PHP 연구 노트: 데이터 구조 및 알고리즘 개요: 데이터 구조와 알고리즘은 컴퓨터 과학에서 매우 중요한 두 가지 개념으로, 문제를 해결하고 코드 성능을 최적화하는 데 핵심입니다. PHP 프로그래밍에서는 데이터를 저장하고 조작하기 위해 다양한 데이터 구조를 사용해야 하는 경우가 많고, 다양한 기능을 구현하기 위해 알고리즘을 사용해야 하는 경우도 있습니다. 이 기사에서는 일반적으로 사용되는 데이터 구조와 알고리즘을 소개하고 해당 PHP 코드 예제를 제공합니다. 1. 선형 구조 배열(Array) 배열은 가장 일반적으로 사용되는 데이터 구조 중 하나이며 정렬된 데이터를 저장하는 데 사용할 수 있습니다.

Vue3에서 DOM 노드를 얻는 방법은 무엇입니까? May 11, 2023 pm 04:55 PM

1. 기본 js는 DOM 노드를 가져옵니다. document.querySelector(선택기) document.getElementById(id 선택기) document.getElementsByClassName(클래스 선택기).... 2. vue2에서 현재 구성 요소의 인스턴스 객체를 가져옵니다. 각 vue Each 구성 요소 인스턴스에는 해당 DOM 요소 또는 구성 요소에 대한 참조를 저장하는 $refs 개체가 포함되어 있습니다. 따라서 기본적으로 구성 요소의 $refs는 빈 개체를 가리킵니다. 먼저 구성 요소에 ref="name"을 추가한 다음 this.$refs를 전달할 수 있습니다.

PHP의 DOM 조작 가이드 May 21, 2023 pm 04:01 PM

웹 개발에 있어서 DOM(DocumentObjectModel)은 매우 중요한 개념입니다. 이를 통해 개발자는 웹페이지의 HTML이나 XML 문서에 요소 추가, 삭제, 수정 등을 쉽게 수정하고 운영할 수 있습니다. PHP에 내장된 DOM 작업 라이브러리는 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 PHP의 DOM 작업 가이드를 소개합니다. DOM DOM의 기본 개념은 크로스 플랫폼이며 언어 독립적인 API입니다.

vue3에서 DOM 또는 컴포넌트에 대한 참조 바인딩이 실패하는 이유는 무엇이며 해결 방법은 무엇입니까? May 12, 2023 pm 01:28 PM

Vue3ref 바인딩 DOM 또는 컴포넌트 실패 이유 분석 시나리오 설명 Vue3에서는 컴포넌트 또는 DOM 요소를 바인딩하기 위해 ref를 사용하는 경우가 많습니다. ref는 관련 컴포넌트를 바인딩하는 데 명확하게 사용되지만 ref 바인딩은 종종 실패합니다. 참조 바인딩 실패 상황의 예 참조 바인딩이 실패하는 대부분의 경우는 참조가 구성 요소에 바인딩될 때 구성 요소가 아직 렌더링되지 않아 바인딩이 실패하는 것입니다. 또는 컴포넌트가 처음에 렌더링되지 않고 ref가 바인딩되지 않은 경우 컴포넌트가 렌더링되기 시작하면 ref도 바인딩되기 시작하지만 이때 ref와 컴포넌트 간의 바인딩이 완료되지 않는 문제가 발생합니다. 구성 요소 관련 방법을 사용할 때. ref에 바인딩된 구성 요소는 v-if를 사용하거나 상위 구성 요소는 v-if를 사용하여 페이지를

vue dom은 무슨 뜻인가요? Dec 20, 2022 pm 08:41 PM

DOM은 문서 객체 모델이며 HTML 프로그래밍을 위한 인터페이스입니다. 페이지의 요소는 DOM을 통해 조작됩니다. DOM은 HTML 문서의 메모리 내 개체 표현이며 JavaScript를 사용하여 웹 페이지와 상호 작용하는 방법을 제공합니다. DOM은 문서 노드를 루트로 하는 노드의 계층 구조(또는 트리)입니다.

dom 및 bom 객체는 무엇입니까? Nov 13, 2023 am 10:52 AM

"문서", "요소", "노드", "이벤트" 및 "창"을 포함한 5개의 DOM 개체가 있습니다. 2. "창", "네비게이터", "위치" 및 "역사" 및 "화면" 및 기타 5개; BOM 객체의 유형.

봄과 돔의 차이점은 무엇인가요? Nov 13, 2023 pm 03:23 PM

BOM과 DOM은 역할과 기능, JavaScript와의 관계, 상호의존성, 다양한 브라우저의 호환성, 보안 고려사항 측면에서 다릅니다. 세부 소개: 1. 역할 및 기능 BOM의 주요 기능은 브라우저 창에 대한 직접 액세스 및 제어를 제공하는 반면, DOM의 주요 기능은 웹 문서를 개체 트리로 변환하는 것입니다. 개발자는 이 개체 트리를 사용하여 웹 페이지의 요소와 콘텐츠를 얻고 수정합니다. 2. JavaScript와의 관계

PHP 연구 노트: 포럼 및 블로그 시스템 개발 Oct 09, 2023 am 10:57 AM

PHP 연구 노트: 포럼 및 블로그 시스템 개발 웹 개발 분야에서 포럼과 블로그 시스템은 매우 일반적인 응용 프로그램입니다. 이는 사용자가 정보를 교환하고 공유할 수 있는 플랫폼을 제공합니다. 이 기사에서는 PHP를 사용하여 간단한 포럼 및 블로그 시스템을 개발하는 방법에 대해 설명하고 구체적인 코드 예제를 첨부합니다. 환경 설정 먼저 PHP 개발에 적합한 개발 환경을 설정해야 합니다. XAMPP 또는 WAM과 같은 AMP(Apache, MySQL 및 PHP) 패키지를 사용할 수 있습니다.

See all articles