자바스크립트 기본!(문서객체모델, DOM - 2) - Java Script

2022.12.19 - [JAVA SCRIPT] - 자바스크립트 기본!(문서객체모델, DOM) - Java Script

자바스크립트 기본!(문서객체모델, DOM) - Java Script

이전 글과 이어서 작성해보겠습니당..

 

---

getAttribute()메서드

• getAttribute() 메서드 : 속성 노드의 값을 가져옴

기본형)
    getAttribute("속성명")

 

코드로 예시를 들자면

<div id="container">
		<h1 id="heading">에디오피아 게뎁</h1>
		<div id="prod-pic">
			<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
				<div id="small-pic"> 
					<img src="images/coffee-pink.jpg" class="small">
					<img src="images/coffee-blue.jpg" class="small">
					<img src="images/coffee-gray.jpg" class="small">
				</div>
		</div>
        .
        .
        .
        	<script>
		function displaySrc(){
			var cup = document.querySelector("#cup");
			cup.getAttribute("src");
			alert("이미지 소스 : " + cup.getAttribute("src"));
		}
	</script>

 

setAttribute() 메서드

• setAtrribute() 메서드 : 속성 노드의 값을 바꿈

기본형)
   setAttribute("속성명", "값")

 

코드로 예시를 들어보자면

 

		<div id="prod-pic">
			<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
			<div id="small-pic"> 
				<img src="images/coffee-pink.jpg" class="small">
				<img src="images/coffee-blue.jpg" class="small">
				<img src="images/coffee-gray.jpg" class="small">
	 	  </div>
          .
          .
          .
          	<script>
		var cup = document.querySelector("#cup");									
        // 큰 이미지
		var smallPics = document.querySelectorAll(".small");			
        // 작은 이미지 (동일한 클래스라 배열로 저장)

		for(let i = 0; i<smallPics.length; i++){
			smallPics[i]. addEventListener("mouseover", changePic);		
            // 작은 이미지 마우스오버 할때 이벤트 추가
		}

		function changePic(){
			var newPic = this.src;																	
            // 작은 이미지의 src 값을 저장(newPic)
			cup.setAttribute("src", newPic);												
            // 큰 이미지의 src 값을 newPic으로 바꾸기
		}
	</script>

---

 

DOM 요소에 함수 직접 연결하기

DOM 요소에 이벤트 처리기 함수를 직접 연결합니다.

(...생략...)
<img src="images/cup-1.png" id="cup">
....
<script>
	var cup = document.querySelector("#cup");
    cup.onclick = function(){	// 이미지를 클릭하면 알림창이 뜹니다
    	alert("이미지를 클릭했습니다.");
    }
</script>

 

---

함수 이름을 사용해 연결하기

• 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결
• 이 때 함수 이름 다음에 괄호를 추가하지 않음

<img src="images/cup-1.png" id="cup">
.
.
.
<script>
	var cup = documnet.querySelector("#cup");
    // id = cup 요소를 가져옵니다
    
    cup.onclick = chagePic;
    // cup을 클릭하면 changePic 함수를 실행합니다.
    cup.onmouseover = chagePic2;
    // cup에 마우스를 올려놓으면 changePic2 함수를 실행합니다.
    cup.onmouseout = chagePic3;
    // cup에 마우스를 올렸다가 나오면 changePic3 함수를 실행합니다.
    
    function changPic() {
    	cup.src = "images/cup-2.png";
        // cup 요소의 경로를 다른 이미지 경로로 바꿉니다.
    }
    function chagePic2(){	
    	cup.src = "images/cup-3.png";
        // cup 요소의 경로를 다른 이미지로 바꿉니다.
    }
    function chagePic3(){
    	cup.src = "images/cup-1.png";
        // cup 요소의 경로를 다른 이미지로 바꿉니다.
    }
    
    
</script>

 

---

자바 스크립트의 이벤트 종류

UI 이벤트

Event	Description
load	웹 페이지나 스크립트의 로드가 완료 되었을때
unload	웹 페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우)
error	브라우저가 자바 스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위 아래로 스크롤 할 때
select	텍스트를 선택 했을 때

 

키보드 이벤트

Event	Description
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 땔 때
keypress	키를 누르고 땟을 때
keyCode	키 코드값

 

마우스 이벤트

Event	Description
click	마우스 버튼을 클릭했을 때
dblclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 땔 때
mousemove	마우스를 움직일 때 (터치 스크린에서 동작 하지 않습니다.)
mouseover	마우스를 요소 위로 움직였을때 (터치 스크린에서 동작 하지 않습니다.)
mouseout	마우스를 요소 밖으로 움직였을 때 (터치 스크린에서 동작 하지 않습니다.)
mouseenter	해당 요소에 마우스 커서를 올려다 놓았을 때
mouseleave	해당 요소에 마우스 커서를 빼낼 때

 

포커스 이벤트

Event	Description
focus/focusin	요소가 포커스를 얻었을 때
blur/focusout	요소가 포커스를 잃었을 때

 

Form 이벤트

Event	Description
input	input 또는 textarea 요소의 값이 변경되었을 때 contenteditable 어트리뷰트를 가진 요소의 값이 변경 되었을 때
change	select box, checkbox, radio button의 상태가 변경 되었을때.
submit	form을 submit 할때 (버튼 또는 키)
reset	reset 버튼을 클릭 할때

 

Clipboard 이벤트

Event	Description
cut	콘텐츠를 잘라내기 할 때
copy	콘텐츠를 복사할 때
paste	콘텐츠를 붙여넣기 할 때