LGHV_3기_문서 객체 모델(DOM)_JavaScript(5)

Pepzera·2025년 3월 17일

LG 헬로비전 DX DATA SCHOOL 3기 공부 정리 웹 개발

LGHV3기_공부정리

목록 보기

30/34

Chap 05 문서 객체 모델(DOM)

문서 객체 모델(DOM)

1. 문서 객체 모델

문서 객체 모델이란? 🧐

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

웹 문서와 그 안의 모든 요소를 ‘객체’로 인식하고 처리함
요소의 계층 관계
예 )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM Tree 알아보기</title>
</head>
<!-- head -> meta, title -->
<body>
  <h1>DOM Tree!</h1>
  <img src="images/kitty-1.png" alt="공부하는 이미지">
</body>
<!-- body -> h1, img -->
</html>

DOM 트리

웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것!
나무 형태가 되기 때문에 “DOM 트리”라고 함
노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
루트 노트(root node) : DOM 트리의 시작 부분(html)

DOM을 구성하는 원칙

모든 HTML 태그는 요소(element)노드
웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text)노드
태그의 속성은 요소 노드의 자식 노드인 속성(attribute)노드
주석은 주석(comment)노드

예 )

2. DOM 요소에 접근하고 내용 수정하기

DOM 요소에 접근하기

웹 문서에 원하는 요소를 찾아가는 것을 “접근한다(access)”고 함!
getElement-* 함수 사용하기
- getElementsByClassName()과 getElementsByTagName()은 반환값이 2개 이상 일수있음
  → HTMLCollection 객체에 저장됨

<!-- 기본형 -->
document.getElementById("id명")
document.getElementsByClassName("class명")
document.getElementByTagName("태그명")

querySelector( ) 함수 사용하기
- 한 개의 값만 반환
- id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용
- querySelectorAll( ) 메서드는 반환 값이 여러 개일 때 모두 반환
  → 노드 리스트로 저장됨

<!-- 기본형 -->
document.querySelector(선택자)

텍스트 내용에 접근하기 및 수정하기

innerText : 웹 브라우저 창에 보이는 텍스트 내용
innerHTML : 화면에 보이는 것과 상관없이 HTML 태그까지 포함한 텍스트 내용
textContent : 화면에 보이는 것과 상관없이 텍스트 내용

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #detail {
      border: 1px solid #000;
      padding: 30px;
      margin: 10px;
    }
    #detail h2 {
      font-size: 1.5em;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="detail">
    <ul>
      <li>원산지 : 에디오피아</li>
      <li style="display: none">지 역 : 이르가체프 코체레</li>
      <li style="display: none">농 장 : 게뎁</li>
    </ul>
  </div>

  <script>
    // DOM을 사용해 텍스트에 접근하기
    let detail = document.querySelector('#detail > ul');
    console.log(detail.innerText);
    // innerText -> 첫번째 만나는 항목만 출력을 해준다.
    console.log(detail.innerHTML);
    console.log(detail.textContent);
  </script>
</body>
</html>

결과 )

텍스트 내용에 접근하기 및 수정하기

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      width: 400px;
      border: 1px dotted #ccc;
      padding: 30px;
      text-align: center;
    }
    h1 {
      margin-bottom: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
	<div class="container">
		<h1 id="heading">에디오피아 게뎁</h1>
		<img src="images/coffee-pink.jpg" alt="커피잔" id="cup" width="200" height="200">
  </div>

  <script>
    // DOM을 사용해 텍스트와 이미지 수정하기
    let heading = document.querySelector('#heading');
    let cup = document.querySelector('#cup');
    // heading 클릭 했을 때, 추천! 오늘의 커피로 문구가 바뀜
    heading.onclick = () => heading.innerText = '추천! 오늘의 커피';
    // cup 클릭 했을 때, coffee-blue.jpg로 이미지가 바뀜
    cup.onclick = () => cup.src = "images/coffee-blue.jpg";
  </script>
</body>
</html>

결과 )

3. DOM에서 이벤트 처리하기

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

DOM 요소에 이벤트 처리기 함수를 직접 연결
코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="images/cat.jpg" id="cat">
  </div>

	<script>
    // DOM을 사용해 이벤트 처리하기 
		let cat = document.querySelector("#cat");  // id = cat인 요소를 가져옴
    cat.onclick = () => alert("이미지를 클릭했습니다");
	</script>
</body>
</html>

결과 )

함수 이름을 사용해 연결

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

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="images/kitty-1.png" id="cat">		
  </div>

	<script>
    // DOM을 사용해 이벤트 처리하기
		let cat = document.querySelector("#cat");  // id = cat인 요소를 가져옴
    cat.onclick = changePic;  // cat을 클릭하면 changePic 함수 실행
    
		// 함수 정의
    function changePic() {
      cat.src = "images/kitty-2.png";  // cat의 src 속성을 변경
		}
	</script>
</body>
</html>

결과 )

DOM의 event 객체

프로퍼티와 메서드

구분	종류	설명
프로퍼티	`altKey`	이벤트가 발생할 때 `Alt`를 눌렀는지 여부를 boolean 값으로 반환
	`button`	마우스에서 누른 버튼의 키값을 반환
	`charCode`	`keypress` 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환
	`clientX`	이벤트가 발생한 가로 위치를 반환
	`clientY`	이벤트가 발생한 세로 위치를 반환
	`ctrlKey`	이벤트가 발생했을 때 `Ctrl`을 눌렀는지 여부를 boolean 값으로 반환
	`pageX`	현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환
	`pageY`	현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환
	`screenX`	현재 화면을 기준으로 이벤트가 발생한 가로 위치를 반환
	`screenY`	현재 화면을 기준으로 이벤트가 발생한 세로 위치를 반환
	`shiftKey`	이벤트가 발생할 때 `Shift`를 눌렀는지 여부를 boolean 값으로 반환
	`target`	이벤트가 최초로 발생한 대상을 반환
	`timeStamp`	이벤트가 발생한 시간을 반환
	`type`	발생한 이벤트 이름을 반환
	`which`	키보드와 관련된 이벤트 발생할 때 키의 유니코드 값을 반환
메서드	`preventDefault()`	이벤트를 취소할 수 있는 경우에 취소

코드 예시 ) - pageX, pageY 사용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
	<style>
		* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
		.container {
			width: 500px;
			height: 300px;
			border: 1px solid #222;
		}
  </style>
</head>
<body>
	<div class="container"></div>	

	<script>
		// event의 pageX, Y 객체 사용하기
		let container = document.querySelector(".container");
		container.onclick = (event) => {
			alert(`이벤트 발생 위치 : ${event.pageX}, ${event.pageY}`);	
		}
	</script>
</body>
</html>

결과 )
상자 내, 한 곳을 클릭하면 해당 X, Y 좌표의 값이 나온다

This 예약어 사용하기

이벤트가 발생한 대상에 접근할 때 사용하는 예약어
화살표 함수에서는 사용할 수 없음!

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }		
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
	<div class="container">
		<img src="images/cat.jpg" id="cat">	
	</div>
  
	<script>
		// 이벤트 대상에 접근하기 - this 예약어 사용
		let cat = document.querySelector("#cat");
		cat.onclick = function(event) {
			alert(`이미지 파일 : ${this.src}`);  // 이미지 파일 경로 출력
      // 내 이미지 파일은 chap19/images/cat.jpg 이다.
		}
	</script>
</body>
</html>

결과 )

addEventListener( ) 메서드 사용하기

이벤트 객체를 사용해 이벤트 처리기 연결

<!-- 기본형 -->
요소.addEventListener(이벤트, 함수, 캡처 여부);

이벤트 : 이벤트 유형을 지정. 단, on을 붙이지 않고 쓴다.
함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정
캡처 여부 : 이벤트를 캡처하는지 여부를 지정함. 기본값은 false(버블링)

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM - addEventListener</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    img {
      padding: 20px;
      height: 250px;
      border: 1px solid #eee;
      border-radius: 10px;
      box-shadow: 2px 2px 5px #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="images/kitty-1.png" id="cat">		
  </div>
  
	<script>
    // 이벤트 리스너로 이벤트 처리하기
		let cat = document.querySelector("#cat");
    
    // 마우스를 올리면 kitty-2.png로 변경
		cat.addEventListener("mouseover", changePic, false);
    // 마우스를 다시 이미지 밖으로 옮기면, kitty-1.png로 변경
    cat.addEventListener("mouseout", originPic, false);
    
    function changePic() {
      cat.src = "images/kitty-2.png";
    } 

    function originPic() {
      cat.src = "images/kitty-1.png";
    }
	</script>
</body>
</html>

결과 )

CSS 속성에 접근하기

자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있음

<!-- 기본형 -->
요소.addEventListener(이벤트, 함수, 캡처 여부);

만약, id가 messi인 요소의 글자를 파란색으로 변경하려면 아래 코드와 같이 하면 된다

document.querySelector("#messi").style.color = "blue";

color처럼 한 단어인 속성명은 그대로 사용!
but, background-color처럼 중간에 하이픈이 있는 속성은 backgroundColor처럼 두 단어를 합쳐서 사용!
- 이 때, 두 번째 단어의 첫 글자는 대문자로 표시

코드 예시 )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM CSS</title>
	<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
		#rect {
			width:100px;
			height:100px;			
			border:1px solid #222;
			margin:30px auto;
			transition: 1s;
		}
	</style>
</head>
<body>
	<div id="container">
		<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
		<div id="rect"></div>
	</div>	
	
	<script>
		// DOM에서 스타일 수정하기
		let rect = document.querySelector("#rect");
    
		rect.addEventListener("mouseover", () => {
			rect.style.backgroundColor = "green";  // rect 요소의 배경색
			rect.style.borderRadius = "50%";  // rect 요소의 테두리 둥글게 처리
		});
		rect.addEventListener("mouseout", () => {
			rect.style.backgroundColor = "";  // rect 요소의 배경색 지우기
			rect.style.borderRadius = "";  // rect 요소의 테두리 둥글게 처리 안 함
		});
	</script>
</body>
</html>