Scenario: JAVA SCRIPT의 DOM 객체를 활용하여 mouse over, out에 따라 움직임는 그림을 표현하고자 하였으나, 

마우스를 올리면, H1의 텍스트나 모두 변했지만, 이상하게 그림만 변하지 않는 것이었다.  firstChild의 개념이 이해가 잘 가지 않았던 

나는, 삽질을 많이하다가, 답을 발견했다.


Solutions : 선생님 왈 "DOM객체를 이용할땐 항상 트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨"


ex) 마우스 over out의 따라 동적으로 변하는 버튼 만들기. 예제 소스

HTML 5 1.10 KB
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM 객체</title>
  6. </head>
  7. <body>
  8.     <h1 id="title">마우스 아웃</h1>
  9.     <a onmouseover="mOver()" onmouseout="mOut()" href="#" id="btn"><img src="https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110"alt="버튼"/></a>
  10. //항상  트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨
  11.     <p id="img_src"></p>
  12.    
  13. <script>
  14.     //<![CDATA[
  15.  
  16.     var theBtn = document.getElementById("btn");
  17.     var s = document.getElementById("img_src");
  18.  
  19.     //버튼위에 mouseover 되었을때
  20.     function mOver() {
  21.         title.innerHTML = "마우스 오버";
  22.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/247FA346589C1B311E";
  23.         s.innerHTML = theBtn.firstChild.src;
  24.     }
  25.  
  26.     function mOut() {
  27.         title.innerHTML = "마우스 아웃";
  28.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110";
  29.         s.innerHTML = theBtn.firstChild.src;
  30.  
  31.     }
  32.  
  33.     //버튼위에 mouseout 되었을때(default상태), 추가적으로 버튼주소 추가하여 출력하기
  34.  
  35.     //]]>
  36. </script>
  37. </body>
  38. </html>

ps.실행 결과 (링크로 들어가서 run을 눌러주면 됩니다.)



저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07
[JavaScript]자바스크립트로 간단한 계산기 만들기.  (0) 2017.02.07
[JavaScript]Form태그와 자바스크립트 함수 사용 시 반응 없음 문제관련  (1) 2017.02.07

+ Recent posts

티스토리툴바