JavaScript #13 (DOM 이벤트)

DOM(Document Object Model) : HTML 문서를 트리 구조로 표현한 객체 모델

- 웹 페이지의 요소를 실시간으로 제어할 수 있음.

 

• DOM은 HTML 문서를 노드(Node) 트리로 표현한 구조
• 각 요소는 객체처럼 접근 가능
• 자바스크립트로 DOM을 조작하면 실시간으로 웹 화면이 변경됨

 

 

예문 - querySelector를 이용하여 img 태그의 src 추가

let img = document.querySelector("img");
img.src = "new-image.jpg";

 

 

 

속성 조작

• .innerText, .innerHTML로 텍스트/HTML 변경
• .src, .href, .value 등 속성에 접근
• .setAttribute(), .getAttribute(), .removeAttribute()

예문 - innerText를 이용하여 greeting id의 text를 변경

<p id="greeting">안녕하세요</p>
<script>
  let text = document.getElementById("greeting");
  text.innerText = "Hello, JavaScript!";
</script>

 

 

이벤트 연결

• 요소에 이벤트를 연결하여 사용자 상호작용 처리
• 다양한 이벤트 종류: click, mouseover, change, keydown 등
• 여러 개의 이벤트를 연결할 땐 addEventListener() 사용

예문 - addEventListner를 이용해 버튼에 alert 기능 추가

let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  alert("버튼 클릭됨!");
});

 

 

 

스타일 변경

• .style 속성으로 CSS 조작 가능
• .classList.add/remove/toggle()로 클래스 조작

예시 - classList를 이용하여 box 클래스에 .active 라는 클래스를 add(추가) 해주기 

let box = document.getElementById("box");
box.style.backgroundColor = "skyblue";
box.classList.add("active");

 

 

요소 추가

• createElement() → 새 요소 생성
• appendChild() 또는 prepend() → 요소 삽입

예문 - createElemet로 li를 새로 만들고, li에 innerText로 새 항목을 추가해서, appendChild를 이용하여 새로 만든 li를 ul에 마지막 자식으로 추가.

let ul = document.querySelector("ul");
let li = document.createElement("li");
li.innerText = "새 항목";
ul.appendChild(li);

 

 

요소 삭제 및 이동

• removeChild(), parentNode, replaceChild() 등을 활용해 DOM 구조 변경

예시 - item을 querySelector로 li를 선택해서 지정하고, parentNode를 통해 부모 노드를 선택하고, item의 (li 요소) "첫번째" 자식을 remove 함.

let item = document.querySelector("li");
item.parentNode.removeChild(item); // 삭제

※ id로 선택한 게 아닌 li 태그를 선택한 경우, li의 맨 처음 요소가 선택됨.

 

 

요약

 

 

 

 

실습

 

See the Pen DOM Event Basic by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

연습 문제 - 버튼 눌러서 인삿말 변경 & 텍스트를 입력 후 버튼을 눌러 리스트에 추가

See the Pen DOM Event exercise by Cheolho Jang (@chiro-J) on CodePen.

※ 모를만 한 것 체크

input.value : .value 속성으로 input에 입력된 값을 선택

 

 

연습 문제 - 키보드 방향키를 눌러 필드 위에서 상하좌우 이동하는 박스 만들기

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

※ 모를만 한 것 체크

변수.id = "-" : 변수에 "-"라는 id 속성을 추가.
event : 객체이며, 웹페이지 안에서 일어나는 모든 정보 (키보드 누르기, 마우스 클릭, 화면 터치 등등)
event.key : event 객체 안에 있는 key 속성, 키보드 입력 정보
function (event) / function (e) : 이벤트 핸들러, 이벤트가 발생했을 때 실행되는 함수.
keydown : 키가 눌릴 때 실행, keyup : 키가 눌렸다 올라올 때 실행.
offsetTop : 음수로 갈수록 위로, 양수로 갈수록 아래로
offsetLeft : 음수로 갈수록 왼쪽으로, 양수로 갈수록 오른쪽으로

 

※ function (e) 에 대한 설명은 아래 페이지 참고

https://velog.io/@ssarr_i/js-functione%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

[JavaScript] function(e)에 대하여