JavaScript HTML DOM 학습 노트

HTML DOM 은 자바 스 크 립 트 로 하여 금 HTML 사건 에 반응 할 능력 을 가지 게 한다.
1. 사건 에 대한 반응 사용자 가 HTML 요소 에서 클릭 할 때 와 같은 이벤트 가 발생 할 때 자 바스 크 립 트 를 실행 할 수 있 습 니 다.사용자 가 어떤 요 소 를 클릭 할 때 코드 를 실행 하려 면 HTML 이벤트 속성 에 JavaScript 코드 를 추가 하 십시오.

onclick=JavaScript

HTML 이벤트 의 예: 사용자 가 마 우 스 를 눌 렀 을 때 웹 페이지 가 불 러 왔 을 때 그림 이 불 러 왔 을 때 마우스 가 요소 로 이동 할 때 입력 필드 가 바 뀌 었 을 때 HTML 폼 을 제출 할 때 사용자 가 버튼 을 눌 렀 을 때
다음 예 는 사용자 가 < h1 > 요소 에서 클릭 하면 내용 이 변 경 됩 니 다.

<h1 onclick="this.innerHTML='  !'">      </h1>

2. HTML 이벤트 속성 HTML 요소 에 이 벤트 를 할당 하려 면 이벤트 속성 을 사용 할 수 있 습 니 다.
button 요소 에 onclick 이벤트 할당:

<button onclick="displayDate()">    </button>

3. HTML DOM 으로 이벤트 할당 HTML DOM 은 자바 스 크 립 트 를 사용 하여 HTML 요소 에 이 벤트 를 할당 할 수 있 습 니 다.
button 요소 에 onclick 이 벤트 를 할당 합 니 다. 아래 의 예 에서 display Date 라 는 함 수 는 id = my Butn "의 HTML 요소 에 분 배 됩 니 다. 단 추 를 누 르 면 이 함 수 를 실행 합 니 다.:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

4. onload 와 onunload 이벤트 onload 와 onunload 이 벤트 는 사용자 가 페이지 에 들 어가 거나 떠 날 때 실 행 됩 니 다. onload 이 벤트 는 방문 자의 브 라 우 저 형식 과 브 라 우 저 버 전 을 검사 하고 이 정 보 를 바탕 으로 웹 페이지 의 정확 한 버 전 을 불 러 옵 니 다. onload 와 onunload 이 벤트 는 쿠키 를 처리 하 는 데 사 용 됩 니 다.

<body onload="checkCookies()">

5. onchange 이벤트 onchange 이 벤트 는 입력 필드 에 대한 검증 과 결합 하여 자주 사용 합 니 다.
다음은 onchange 를 어떻게 사용 하 는 지 예 입 니 다. 사용자 가 입력 필드 의 내용 을 바 꿀 때 uppercase () 함 수 를 호출 합 니 다.

<input type="text" id="fname" onchange="upperCase()">

6.   onmouseover 와 onmouseout 사건    onmouseover 와 onmouseout 이 벤트 는 사용자 의 마우스 가 HTML 요소 위로 이동 하거나 요 소 를 이동 할 때 함 수 를 촉발 할 수 있 습 니 다.
7.   onmousedown, onmouseup 및 onclick 이벤트    onmousedown, onmouseup 및 onclick 은 마우스 클릭 이벤트 의 모든 부분 을 구성 합 니 다. 우선 마우스 단 추 를 누 르 면 onmousedown 이벤트 가 발생 합 니 다. 마우스 단 추 를 누 르 면 onmouseup 이벤트 가 발생 합 니 다. 마지막 으로 마우스 클릭 이 완료 되면 onclick 이벤트 가 발생 합 니 다.
8.   HTML DOM 이벤트 대상 참조 매 뉴 얼    모든 HTML DOM 이벤트 의 전체 목록 이 필요 하 다 면 W3 School 이 제공 하 는 HTML DOM 이벤트 대상 참고 매 뉴 얼 을 참조 하 십시오.
노드 추가 및 삭제 (HTML 요소).
9.    새로운 HTML 요소 만 들 기      HTML DOM 에 새 요 소 를 추가 하려 면 먼저 이 요소 (요소 노드) 를 만 든 다음 존재 하 는 요소 에 이 요 소 를 추가 해 야 합 니 다.

<div id="div1">
<p id="p1">      </p>
<p id="p2">       </p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("     。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

예 해석:
이 코드 는 새로운 < p > 요 소 를 만 듭 니 다:

var para=document.createElement("p");

< p > 요소 에 텍스트 를 추가 하려 면 먼저 텍스트 노드 를 만들어 야 합 니 다. 이 코드 는 텍스트 노드 를 만 들 었 습 니 다.

var node=document.createTextNode("     。");

그리고 이 텍스트 노드 를 < p > 요소 에 추가 해 야 합 니 다:

para.appendChild(node);

마지막 으로 이 새 요 소 를 기 존 요소 에 추가 해 야 합 니 다. 이 코드 는 기 존 요 소 를 찾 습 니 다:

var element=document.getElementById("div1");

이 코드 는 기 존 요소 에 새로운 요 소 를 추가 합 니 다.

element.appendChild(para);

10. 기 존 HTML 요소 삭제 HTML 요 소 를 삭제 하려 면 먼저 이 요소 의 부모 요 소 를 가 져 와 야 합 니 다.

<div id="div1">
<p id="p1">      。</p>
<p id="p2">       。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

예 해석:
이 HTML 문 서 는 두 개의 키 노드 (두 개의 < p > 요소) 를 가 진 < div > 요 소 를 포함 하고 있 습 니 다.

<div id="div1">
<p id="p1">      。</p>
<p id="p2">       。</p>
</div>

id = "div 1" 요 소 를 찾 습 니 다:

var parent=document.getElementById("div1");

id = "p1" 의 < p > 요 소 를 찾 습 니 다:

var child=document.getElementById("p1");

부모 요소 에서 하위 요 소 를 삭제 합 니 다.

parent.removeChild(child);

알림: 부모 요 소 를 인용 하지 않 고 어떤 요 소 를 삭제 할 수 있다 면 다행 입 니 다.
안 타 깝 습 니 다. DOM 은 삭제 해 야 할 요소 와 부모 요 소 를 잘 알 아야 합 니 다. 이것 은 자주 사용 하 는 해결 방안 입 니 다. 삭제 하고 싶 은 하위 요 소 를 찾 은 다음 parentNode 속성 을 사용 하여 부모 요 소 를 찾 습 니 다.

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

저희 자 바스 크 립 트 튜 토리 얼 의 HTML DOM 부분 에서 배 웠 습 니 다.
HTML 요소 의 내용 을 어떻게 바 꿉 니까?
HTML 요소 의 스타일 을 바 꾸 는 방법 (CSS)
어떻게 HTML DOM 사건 에 반응 합 니까?
HTML 요 소 를 추가 하거나 삭제 하 는 방법
자바 스 크 립 트 를 사용 하여 HTML DOM 에 접근 하 는 지식 을 더 배우 고 싶다 면, 우리 의 완전한 HTML DOM 튜 토리 얼 을 방문 하 십시오.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScript HTML DOM 학습 노트

좋은 웹페이지 즐겨찾기