JavaScript DOM(2)
[이론내용 정리]
DOM 객체의 생성 메소드
DOM(Document Object Model)은 HTML 문서를 브라우저가 객체 형태로 변환한 것이다.
DOM 객체의 생성 메소드는 자바스크립트로 HTML 요소를 동적으로 생성할 때 사용된다.
즉, HTML에 미리 작성하지 않고 자바스크립트 실행 중에 태그를 만들어 화면에 추가할 수 있다.
DOM 객체 생성 관련 메소드
| 메소드 이름 | 설명 |
|---|---|
| createElement('태그명') | 지정한 태그 요소를 생성 |
| appendChild() | 생성한 요소를 부모 요소의 자식으로 추가 |
| innerHTML = '텍스트' | 요소 안에 내용 추가 |
예제 : h2 태그를 동적으로 생성
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
// h2 태그 생성
let n = document.createElement('h2');
// body에 h2 태그를 자식 요소로 추가
document.body.appendChild(n);
// h2 태그 안에 텍스트 삽입
n.innerHTML = "엘리먼트";
</script>
</body>
</html>DOM 객체의 속성 관련 메소드
HTML 태그는 여러 개의 속성(attribute)을 가진다.
DOM 속성 메소드를 사용하면 태그의 속성을 읽거나 변경할 수 있다.
속성 관련 메소드
| 메소드 이름 | 설명 |
|---|---|
| getAttribute('속성명') | 해당 태그의 속성 값 가져오기 |
| setAttribute('속성명', 값) | 해당 태그의 속성 값 변경 |
예시 설명
getAttribute()→ 현재 속성 값 확인setAttribute()→ 속성 추가 또는 수정
DOM 객체의 텍스트 관련 속성
HTML 요소 내부의 텍스트를 다루는 방법은 여러 가지가 있으며,
각 속성마다 태그를 해석하는 방식이 다르다.
텍스트 속성 비교
| 속성 | 설명 |
|---|---|
| innerHTML | 태그는 태그로 인식, 텍스트는 텍스트로 인식 |
| innerText | 태그를 문자로 인식, 화면에 보이는 텍스트만 처리 |
| textContent | 태그를 문자로 인식, script/style 포함 모든 텍스트 처리 |
차이점 정리
- innerHTML
→<b>글자</b>는 굵은 글자로 출력됨 - innerText
→<b>글자</b>그대로 문자로 출력 - textContent
→ 숨겨진 텍스트까지 포함하여 읽음
DOM 객체 이벤트
이벤트(Event)는 사용자의 동작(클릭, 키 입력 등)에 반응하여 실행되는 코드의 시점을 의미한다.
1. 고전 이벤트 방식
문서 객체의 이벤트 속성에 직접 함수를 연결하는 방식이다.
문서객체.on이벤트타입 = 이벤트핸들러;예시
document.onclick = function() {
console.log("클릭됨");
};2. 이벤트 메소드 방식 (표준 방식)
addEventListener를 사용하여 이벤트를 등록하는 방식이다.
현재 가장 많이 사용하는 방식이다.
문서객체.addEventListener('이벤트타입', 콜백함수);예시
document.addEventListener('click', function() {
console.log("클릭 이벤트 발생");
});3. 이벤트 제거
등록된 이벤트를 제거할 때 사용한다.
문서객체.removeEventListener('이벤트타입', 콜백함수);4. 인라인 이벤트
HTML 태그 안에서 직접 이벤트를 작성하는 방식이다.
<button onclick="alert('클릭')">버튼</button>DOM 객체 이벤트 종류 및 이벤트 객체
1. 이벤트 종류
마우스 이벤트
- click
- dblclick
- mouseover
- mouseout
- mousedown
- mouseup
- mousemove
키보드 이벤트
- keydown
- keyup
- keypress
폼 이벤트
- focus
- blur
- change
- submit
- reset
- select
로드 이벤트
- load
- abort
- unload
- resize
- scroll
2. 이벤트 객체의 공통 속성과 메소드
이벤트가 발생하면 브라우저는 이벤트 객체(event object) 를 자동으로 생성한다.
이 객체를 통해 이벤트에 대한 상세 정보를 알 수 있다.
주요 메소드
-
stopPropagation()
→ 이벤트 버블링(상위 요소 전파)과 캡처링(하위 요소 전파) 방지 -
preventDefault()
→ 태그가 가진 기본 동작 제거
(예: 링크 클릭 시 페이지 이동 방지)
주요 속성
-
pageX, pageY
→ 문서(body) 기준 마우스 좌표 -
offsetX, offsetY
→ 이벤트 대상 요소 기준 마우스 좌표 -
keyCode
→ 키보드 입력 시 해당 키의 유니코드 값 반환
Note.
- DOM 생성 메소드 → 요소를 동적으로 생성
- 속성 메소드 → 태그 속성 제어
- 이벤트 → 사용자 동작 처리
- 이벤트 객체 → 이벤트 상세 정보 확인
# [실습내용 정리]
DOM객체 생성 메서드
createElement("tag")
appendChild(자식노드)
replaceChild(새 노드, 기존 노드)
DOM 객체 이벤트
- 고전 이벤트 방식
- 이벤트 메서드
- 이벤트 리스너 함수등록
텍스트 클릭 후
+form 객체
DOM 객체 동적 생성 + 이벤트 함수 예제
각 버튼 클릭 후
