[웹 서비스 개발] HTML_DOM_2_Script

김광일·2024년 11월 15일

웹 서비스 개발

목록 보기

27/45

일자 : 11주차 1차시

[1] `onmousedown`, `onmouseup`, 그리고 `onclick` 이벤트

1) 특징

onmousedown, onmouseup, 그리고 onclick 이벤트는 마우스 클릭의 단계별 과정을 구성한다.

먼저, 마우스 버튼을 클릭하면 onmousedown 이벤트가 발생한다.
이후, 마우스 버튼을 놓으면 onmouseup 이벤트가 발생한다.
마지막으로 마우스 클릭 동작이 완료되면 onclick 이벤트가 발생한다.

2) 예시

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML 이벤트</h1>
<h2>onmousedown 속성</h2>

<!-- onmousedown, onmouseup 이벤트를 사용한 div 박스 -->
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>

<script>
// 사용자가 마우스 버튼을 누를 때 호출되는 함수
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5"; // 배경색을 변경
  obj.innerHTML = "Release Me"; // 텍스트를 변경
}

// 사용자가 마우스 버튼을 뗄 때 호출되는 함수
function mUp(obj) {
  obj.style.backgroundColor="#D94A38"; // 배경색을 원래대로 복원
  obj.innerHTML="Thank You"; // 텍스트를 변경
}
</script>

</body>
</html>

[2] 동일한 요소에 여러 이벤트 핸들러 추가하기

1) 특징

addEventListener() 메서드는 기존 이벤트를 덮어쓰지 않고 동일한 요소에 여러 개의 이벤트를 추가할 수 있게 해준다.
동일 이벤트도 여러 개 추가가 가능하다.

2) 종류

속성	역할
`mousedown`	마우스 버튼이 눌릴 때 발생
`mouseup`	마우스 버튼이 놓일 때 발생
`mouseover`	마우스 커서가 요소 위로 이동할 때 발생
`mouseout`	마우스 커서가 요소를 벗어날 때 발생
`mouseenter`	마우스 커서가 요소에 들어올 때 발생
`mouseleave`	마우스 커서가 요소에서 나갈 때 발생
`dblclick`	요소를 더블 클릭할 때 발생
`contextmenu`	마우스 오른쪽 버튼 클릭 시 발생
`focus`	요소가 포커스를 받을 때 발생
`blur`	요소에서 포커스가 벗어날 때 발생

[3] window 객체에 이벤트 핸들러 추가하기

1) 특징

addEventListener() 메서드는 HTML 요소, HTML 문서, window 객체와 같은 HTML DOM 객체나, xmlHttpRequest 객체와 같이 이벤트를 지원하는 다른 객체에도 이벤트 리스너를 추가할 수 있게 해준다.

[4] 매개변수 전달하기

1) 특징

매개변수 값을 전달할 때는 "익명 함수"를 사용하여 지정된 함수를 매개변수와 함께 호출한다.

[5] 이벤트 버블링 또는 이벤트 캡처링?

1) 종류

HTML DOM에서는 이벤트 전파 방식이 두 가지가 있다
- 버블링(bubbling)
- 캡처링(capturing).
이벤트 전파는 이벤트가 발생했을 때 요소의 처리 순서를 정의하는 방법이다. 예를 들어 <div> 요소 안에 <p> 요소가 있을 때, 사용자가 <p> 요소를 클릭하면, 어느 요소의 "click" 이벤트를 먼저 처리해야 할까?

버블링(bubbling)에서는 가장 안쪽에 있는 요소의 이벤트가 먼저 처리되고, 그 다음으로 바깥쪽 요소의 이벤트가 처리된다. 즉, <p> 요소의 click 이벤트가 먼저 처리되고, 그 다음에 <div> 요소의 click 이벤트가 처리된다.
캡처링(capturing)에서는 가장 바깥쪽에 있는 요소의 이벤트가 먼저 처리되고, 그 다음으로 안쪽 요소의 이벤트가 처리된다. 즉, <div> 요소의 click 이벤트가 먼저 처리되고, 그 다음에 <p> 요소의 click 이벤트가 처리된다.

addEventListener() 메서드를 사용하면 "useCapture" 매개변수를 통해 전파 방식을 지정할 수 있다.

2) 예시

addEventListener(event, function, useCapture);

기본값은 false로, 이 경우 버블링 전파 방식이 사용된다. true로 설정하면 이벤트는 캡처링 전파 방식을 사용한다.

[6] removeEventListener() 메서드

removeEventListener() 메서드는 addEventListener()로 추가된 이벤트 핸들러를 제거한다.

[7] DOM 노드

HTML 문서의 모든 요소는 W3C HTML DOM 표준에 따르면 노드로 간주된다.

문서 전체는 문서 노드이다.
모든 HTML 요소는 요소 노드이다.
HTML 요소 안의 텍스트는 텍스트 노드이다.
모든 HTML 속성은 속성 노드이다. (현재는 사용되지 않음)
모든 주석은 주석 노드이다.

HTML DOM을 사용하면 노드 트리의 모든 노드에 JavaScript로 접근할 수 있다.
새로운 노드를 생성하거나 기존 노드를 수정 및 삭제할 수도 있다.

[8] 노드 관계

노드 트리의 노드들은 서로 계층적 관계를 가진다.
부모, 자식, 형제라는 용어가 관계를 설명하는 데 사용된다.

노드 트리의 최상단 노드는 루트(또는 루트 노드)라고 한다.
루트를 제외한 모든 노드는 하나의 부모를 가진다.
하나의 노드는 여러 자식을 가질 수 있다.
형제(형제 노드)는 동일한 부모를 가진 노드이다.

1) 위 HTML 구조에서 알 수 있는 점

<html>은 루트 노드이다.
<html>은 부모가 없다.
<html>은 <head>와 <body>의 부모이다.
<head>는 <html>의 첫 번째 자식이다.
<body>는 <html>의 마지막 자식이다.

그리고:

<head>는 하나의 자식을 가진다: <title>
<title>은 하나의 자식(텍스트 노드)을 가진다: "DOM Tutorial"
<body>는 두 개의 자식을 가진다: <h1>과 <p>
<h1>은 하나의 자식을 가진다: "DOM Lesson one"
<p>는 하나의 자식을 가진다: "Hello world!"
<h1>과 <p>는 형제이다.

[9] 노드 간 탐색

JavaScript를 사용하여 다음 노드 속성을 이용해 노드 간을 탐색할 수 있다.

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

[10] 자식 노드와 노드 값

DOM 처리를 할 때 요소 노드가 텍스트를 포함한다고 가정하는 것은 일반적인 실수이다.

<title id="demo">DOM Tutorial</title>

위 예제에서 <title> 요소 노드는 텍스트를 포함하지 않는다.
이 노드는 값이 "DOM Tutorial"인 텍스트 노드를 포함한다.
텍스트 노드의 값은 해당 노드의 innerHTML 속성을 통해 접근할 수 있다.

myTitle = document.getElementById("demo").innerHTML;

innerHTML 속성을 접근하는 것은 첫 번째 자식 노드의 nodeValue 속성을 접근하는 것과 동일하다.

myTitle = document.getElementById("demo").firstChild.nodeValue;

첫 번째 자식 노드에 접근하는 또 다른 방법은 다음과 같다.

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

다음의 세 가지 예제는 <h1> 요소의 텍스트를 가져와 <p> 요소에 복사한다.

[11] DOM 루트 노드

문서 전체에 접근할 수 있는 두 가지 특별한 속성이 있다.

document.body - 문서의 본문
document.documentElement - 문서 전체

[12] nodeName 속성

nodeName 속성은 노드의 이름을 나타낸다.

nodeName은 읽기 전용이다.
요소 노드의 nodeName은 태그 이름과 동일하다.
속성 노드의 nodeName은 속성 이름이다.
텍스트 노드의 nodeName은 항상 #text이다.
문서 노드의 nodeName은 항상 #document이다.

참고: nodeName은 HTML 요소의 태그 이름을 항상 대문자로 반환한다.

김광일

안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com

[웹 서비스 개발] HTML_DOM_2_Script