dom 객체 다루기
id 나 class 태그 사용 (id는 해당 객체의 고유한 속성 / 클래스는 비슷한 그룹끼리 묶을 수 있음)
> document.getElementById() / document.getElementByClassName()
innerHTML 프로퍼티
<>시작 태그 </ >종료 태그 사이에 들어있는 html 콘텐츠
수정 > 해당 태그의 아이디를 담은 변.innerHTML = 바꿀 내용
this
객체 자신을 가리키는 키워드
<div onclick = "this,style.backgroundColor = 'orange'">
document
html문서 전체를 대변하는 객체
프로퍼티 - html 문서의 전체적인 속성 내포
메소드 - dom 객체 검색, dom 객체 생성, html 문서 전반적 제어
dom 객체 접근하는 경로의 시작점, dom tree의 최상위 객체
html문서 로드 전 document 객체 먼저 생성 > document 객체를 기반으로 dom 트리 생성
접근
window.document // document 이름으로 접근
*document 객체는 dom 객체가 아님
HTML 페이지 로딩 과정
1. 브라우저는 HTML 페이지 로드 전 빈 상태 document 생성
2. 브라우저는 HTML 페이지를 위에서 아래로 해석
3. HTML 태그들을 document 객체에 담아간다(DOM 객체 생성).
4. </html> 태그를 만나면 document 객체를 완성하고 닫는다.
write()
✓ document 객체에 담긴 HTML 콘텐츠 마지막에 HTML 태그들을 추가
• 추가되는 HTML 태그들은 DOM 객체로 바뀌고 DOM 트리에 추가
• 삽입된 HTML 태그들이 브라우저 화면에 출력
writeln()
✓ HTML 텍스트에 '\n'을 덧붙여 출력하면 한 칸 띄는 효과
docuent.write("<br>");
document.open()
✓현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지
시작. 즉 document 객체에 담긴 DOM 트리를 지우고 새로 시작
document.close()
✓현재 브라우저에 출력된 HTML 페이지 완성
✓더 이상 document.write() 할 수 없음
동적 구성
dom 객체 동적 생성 - document.createElement("태그이름");
dom 트리에 삽입 - 부모.appendChild(dom객체);
dom 객체 삭제 - 부모.removeChild(dom객체);
>> var newDIV = document.createElement("div");
var p = document.getElementById("p");
p.appendChild(newDIV);
p.removeChild(mewDIV);
폼 요소에 접근하는 방법
✓Id 나 class 값을 사용해 폼 요소에 접근
• getElementById()
• querySelector()
✓Name 을 이용해 폼 요소에 접근
• <form name=“order”> ...
<input name=“item” ...>
• document.order.item
• document.forms[“order”].elements[“item”]
✓폼 배열을 사용해 폼 요소에 접근
• form이나 요소의 이름이 없더라도 index를 이용 가능
• document.forms[0].elements[0].value : 문서의 첫번째 form의 첫번째 요소의 값
폼 요소에서 입력값 검증하기
▪ 입력한 값의 글자 수나 유효한 값인지 여부를 확인할 수 있음
✓태그객체.onchange = 체크함수 ;
✓함수 안에서 input 태그의 value 이용해 유효값 체크 가능
▪ 사용자가 입력한 값에 오류가 있을 경우
✓Select() 함수 : 기본에 입력한 값을 선택
✓focus() 함수 : 입력한 값이 지워진 자리에 새로운 값을 입력하도록 커서를 다시 가져다 놓음
폼 요소에서 입력값 검증하기
▪ 입력한 값의 글자 수나 유효한 값인지 여부를 확인할 수 있음
✓태그객체.onchange = 체크함수 ;
✓함수 안에서 input 태그의 value 이용해 유효값 체크 가능
▪ 사용자가 입력한 값에 오류가 있을 경우
✓Select() 함수 : 기본에 입력한 값을 선택
✓focus() 함수 : 입력한 값이 지워진 자리에 새로운 값을 입력하도록 커
서를 다시 가져다 놓음
다양한 폼 요소 다루기
▪ 선택 목록 및 옵션 항목에 접근하기
✓ document.폼이름.셀렉트요소이름
• <select name=“sel” onchange =
“함수()”>
✓ document.폼이름.셀렉트요소이름.options : 배열
• 옵션 항목에 하나씩 접근하려면 배열의 반복문 활용
• document.폼이름.셀렉트요소이름.options[index].value : 서버 전달값
• document.폼이름.셀렉트요소이름.options[index].innerText : 화면 표시 내용
• document.폼이름.셀렉트요소이름.options.selectedIndex : 선택한 항목의 인덱스
라디오 버튼에 접근하기
✓ document.폼이름.라디오버튼이름 : 배열
• 라디오버튼의 name속성 값은 모두 동일함
• document.폼이름.라디오버튼이름[index] == true 이면 선택된 것을 의미
체크 상자에 접근하기
✓ document.폼이름.체크상자이름1
• 라디오버튼과 달리 체크상자의 name속성 값은 모두 다름
• document.폼이름.체크상자이름1 == true 이면 체크한 것을 의미
• document.폼이름.체크상자이름2 == true 이면 체크한 것을 의미(다중 선택 가능)
• document.폼이름.체크상자이름3 == false 이면 체크하지 않은 것을 의미
이벤트
✓마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타이머의 타임
아웃 등 사용자의 입력 행위나 문서나 브라우저의 상태 변화를 자바스
크립트 코드에게 알리는 통지(notification)
▪ 이벤트 리스너
✓발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
▪ 이벤트 종류
✓HTML5에서 이벤트 종류는 70여가지
✓이벤트 리스너 이름은 이벤트 이름 앞에 on을 덧붙임
✓예) onmousedown : mousedown 이벤트의 리스너
onkeydown : keydown 이벤트의 리스너
이벤트 리스너 생성
✓HTML 태그 내에 작성
✓DOM 객체의 이벤트 리스너 프로퍼티에 작성
✓DOM 객체의 addEventListener() 메소드 이용
✓익명 함수 이
addEventListener()
addEventListener(eventName, listener[,useCapture])
- eventName : 이벤트 타입 나타내는 문자열 (click, load, keydown등)
- listener : 이벤트 리스너로 등록할 함수 이름
- useCapture : true일 경우 이벤트 흐름 중 캡쳐 단계에서 실행될 리스너 등록
false일 경우 버블 단계에서 실행될 리스너 등록 (생략 가능 / 디폴트 false)
▪ 익명 함수(anonymous function)
✓함수 이름 없이 필요한 곳에 함수의 코드를 바로 작성
✓코드가 짧거나 한 곳에서만 사용하는 경우, 익명 함수 편리
p.onmouseover = function () { this.style.backgroundColor = "orchid"; }; // 익명 함수
▪ 이벤트 객체(event object)
✓DOM과 관련된 이벤트가 발생하면, 관련 정보는 모두 이벤트 객체에저장됨.
✓이벤트 발생요소, 이벤트타입,이벤트 관련데이터가 저장됨
✓예) mousedown 이벤트의 경우, 마우스 좌표와 버튼 번호 등
keydown 이벤트의 경우, 키 코드 값 등
✓이벤트가 처리되고 나면 이벤트 객체 소멸
이벤트 객체는 이벤트 리스너 함수의 첫 번째 매개변수에 전달
1. 이름을 가진 이벤트 리스너
function f(e) { // 매개변수 e에 이벤트 객체 전달받음
}
obj.onclick = f; // obj 객체의 onclick 리스너로 함수 f 등록
2. 익명 함수의 경우
obj.onclick = function(e) { // 매개변수 e에 이벤트 객체 전달받음
}
3. HTML 태그에 이벤트 리스너 : event 라는 이름으로 전달
function f(e) {
}
<button onclick=“f(event)”>버튼</button>
<div onclick=“alert(event.type)”>버튼</div>
▪ 이벤트 객체에 들어 있는 정보
✓현재 발생한 이벤트에 관한 다양한 정보
• 이벤트 객체의 프로퍼티와 메소드로 알 수 있음
✓이벤트의 종류마다 조금씩 다름
✓target 프로퍼티
• 이벤트 타겟 객체 가리킴
• 이벤트 타겟 : 이벤트를 유발시킨 DOM 객체
▪ 이벤트의 디폴트 행동이란?
✓ 특정 이벤트에 대한 HTML 태그의 기본 행동
✓ 사례
• <a>의 click 이벤트의 디폴트 행동 : 웹 페이지 이동
• Submit 버튼의 click 이벤트의 디폴트 행동 : 폼 데이터 전송
• <input type=“checkbox”>의 click 이벤트의 디폴트 행동 : 체크박스선택
▪ 이벤트의 디폴트 행동을 막는 방법
✓ 1. 이벤트 리스너에서 false 리턴
<a href="http://www.naver.com" onclick="return false">
이동 안되는 링크
</a>
✓ 2. 이벤트 객체의 preventDefault() 메소드 호출
<a href="http://www.naver.com" onclick="event.preventDefault();">
이동 안되는 링크
</a>
이벤트 객체의 cancelable 프로퍼티가 true인 경우만 취소 가능
이벤트 흐름이란?
✓ 이벤트가 발생하면 window 객체에 먼저 도달하고, DOM 트리를 따라 이벤트 타겟에 도착하고,
다시 반대 방향으로 흘러 window 객체에 도달한 다음 사라지는 과정
▪ 이벤트가 흘러가는 과정
✓ 캡쳐 단계(capturing phase)
• 이벤트가 window 객체에서 중간의 모든 DOM 객체를 거쳐 타겟 객체에 전달되는 과정
• 이벤트가 거쳐가는 모든 DOM 객체(window포함)의 이벤트 리스너 실행
✓ 버블 단계(bubbling phase)
• 이벤트가 타겟에서 중간의 모든 DOM 객체를 거쳐 window 객체에 전달되는 과정
• 이벤트가 거쳐가는 모든 DOM 객체(window포함)의 이벤트 리스너 실행
▪ DOM 객체에는 캡쳐 리스너와 버블 리스너 두 개 모두 작성할 수 있음
▪ DOM 객체의 이벤트 리스너
✓캡쳐 리스너와 버블 리스너를 모두 소유 가능
• 이벤트 리스너 등록 시, 캡쳐 리스너인지 버블 리스너인지 구분
▪ 캡쳐 리스너와 버블 리스너 등록
✓addEventListener()의 3 번째 매개 변수 이용
• true이면 캡쳐 리스너, false이면 버블 리스너
var b = document.getElementById("button");
b.addEventListener("click", capFunc, true); // 캡쳐 단계에서 capFunc() 실행
b.addEventListener("click", bubbleFunc, false); // 버블 단계에서 bubbleFunc() 실행
✓다른 방법의 이벤트 리스너 등록의 경우
• 버블 리스너로 자동 등록
• 예)
obj.onclick = function(e) { // 버블 리스너도 작동
}
이벤트 흐름 중단 - stopPropagation()
마우스 핸들링
onclick() - html 태그 클릭 시
ondbclick() - html태그 더블 클릭 시
✓마우스 관련 이벤트 리스너 호출 경우
• onmousedown : 마우스 버튼을 누르는 순간
• onmouseup : 눌러진 버튼이 놓여지는 순간
• onmouseover : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함
• onmouseout : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함
• onmouseenter : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음
• onmouseleave : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음
• onwheel : HTML 태그에 마우스 휠이 구르는 동안 계속 호출
• 위쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 양수(120)
• 아래쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 음수(-120)
HTML 태그 위에 마우스 오른쪽 버튼 클릭 금지 이벤
✓디폴트로 컨텍스트 메뉴(context menu) 출력
✓oncontextmenu 리스너가 먼저 호출
• false를 리턴하면 컨텍스트 메뉴를 출력하는 디폴트 행동 취소
document.oncontextmenu = function () {
return false; // 컨텍스트 메뉴 출력 금지
}
onload
✓window 객체에 발생
• 웹 페이지의 로딩 완료시 호출되는 이벤트 리스너
✓ onload 리스너 작성 방법
1. window.onload="alert('onload');";
2. <body onload="alert('onload');">
Image 객체
✓ <img> 태그에 의해 생성되는 DOM 객체
✓ new Image(); 자바스크립트 코드에 의해 생성되는 객체
▪ onload
✓ 이미지의 로딩이 완료되면 Image 객체에 발생하는 이벤트
새로운 이미지 로딩
var myImg = document.getElementById("myImg");
myImg.src = “banana.png";
주의할 점
잘못된 이미지 로딩 코드 > 이미지를 로딩하여 이미지 폭을 알아내는 코드
var myImg = document.getElementById("myImg");
myImg.src = "banana.png";
var width = myImg.width;
✓문제점
• myImg.src = "banana.png"; 실행 직후 이미지 로딩 완료되지 않음
• var width = myImg.width; 이미지 로딩 완료전이면, myImg.width=0
수정 > onload 리스너에서 이미지 폭을 알아내는 코드 작성
var myImg = document.getElementById("myImg");
myImg.onload = function () { // 이미지 로딩 완료 시 실행
var width = myImg.width; // 정확한 이미지 폭 읽기
}
myImg.src = “banana.png"; // 이미지 로딩 지시
new Image()로 이미지 로딩과 출력
동적 생성
new Image() - 이미지 객체가 생겼지만 화면에 출력되지 않음
var bananaImg = new Image(); // 이미지 객체 생성
bananaImg.src = "banana.png"; // 이미지 로딩
로딩된 이미지 출력
<img>태그에 할당된 브라우저 공간에 이미지 출력
myImg.src = bananaImg.src; // 이미지 출력
▪ 포커스
✓포커스는 현재 키 입력에 대한 독점권
✓브라우저는 포커스를 가지고 있는 HTML 태그 요소에 키 공급
▪ onblur
✓포커스를 잃을 때 발생하는 이벤트 리스너
• 예) 다른 HTML 요소를 클릭하면, 현재 HTML 요소는 포커스를 잃는다.
▪ onfocus
✓포커스를 잃을 때 발생하는 이벤트 리스너
• 예) 현재 HTML 요소를 클릭하면, 현재 HTML 요소가 포커스를 얻는다.
▪ 라디오버튼 객체
✓<input type="radio">로 만들어진 라디오 버튼 DOM 객체
<form>
<input type="radio" name="city" value="seoul">서울
<input type="radio" name="city" value="busan">부산
<input type="radio" name="city" value="chunchen">춘천
</form>
라디오 버튼 객체들 알아내기
var kcity = document.getElementsByName("city"); // kcity[0], kcity[1], kcity[2]
체크박스 객체
✓<input type="checkbox">로 만들어진 체크박스 DOM 객체
select 객체는 <select> 태그로 만들어진 콤보박스
✓ option 객체는 <option>태그로 표현되는 옵션 아이템
<select id="fruits">
<option value="1">딸기</option>
<option value="2" selected>바나나</option>
<option value="3">사과</option>
</select>
✓ 선택된 옵션 알아내기
var sel = document.getElementById("fruits");
var index = sel.selectedIndex; // index는 선택 상태의 옵션 인덱스
✓ 옵션 선택
sel.selectedIndex = 2; // 3번째 옵션 “사과” 선택
sel.options[2].selected = true; // 3번째 옵션 “사과” 선택
✓ select와 onchange 리스너
• 선택된 옵션이 변경되면 select 객체의 onchange 리스너 호출
<select id="fruits" onchange="drawImage()">...</select>
onkeydown, onkeypress, onkeyup
✓onkeydown
• 키가 눌러지는 순간 호출. 모든 키에 대해 작동
✓onkeypress
• 문자 키와 <Enter>, <Space>, <Esc> 키에 대해서만 눌러지는 순간에 추가 호출
• 문자 키가 아닌 경우(<F1>, <Shift>, <PgDn>, <Del>, <Ins> 등) 호출되지 않음
✓onkeyup
• 눌러진 키가 떼어지는 순간 호출
▪ 키 이벤트 객체의 프로퍼티
✓keyCode , altkey, ctrlKey, shiftKey
▪ onreset
✓reset 버튼(<input type="reset">) 클릭 시
✓false를 리턴하면 폼이 초기화되지 않음
▪ onsubmit
✓submit(<input type="submit">) 버튼 클릭 시
✓false를 리턴하면 폼 전송하지 않음
▪ 리스너 작성
• onreset과 onsubmit 리스너는 <form> 태그에 달아야 한다.
<form onreset="..." onsubmit="...">
'kosta_이론' 카테고리의 다른 글
| 25.04.15 react (1) | 2025.04.15 |
|---|---|
| 25.04.11 jquery + 애니메이션study (1) | 2025.04.11 |
| 25.04.09 자바스크립트 (1) | 2025.04.09 |
| 25.04.03 Mung 프로젝트 db 연결 (0) | 2025.04.03 |
| 25.04.02 트랜잭션 (0) | 2025.04.02 |