지식보부상님의 공부 일지

웹 표준 HTML, CSS, JS [10] 문서 객체 모델 본문

KB IT's Your Life

웹 표준 HTML, CSS, JS [10] 문서 객체 모델

지식보부상님 2025. 3. 12. 17:35

[10] 문서 객체 모델

(1) 문서 객체 모델의 기본 용어와 개념

◈ 문서 객체 모델 기본 용어

- 문서 객체(Document Object): Html 태그를 JS에서 사용할 수 있는 객체로 만든 것

- DOM(Document Object Model): HTML 문서 요소 태그 간 부모-자식 관계를 tree로 나타낸 구조

 

◈ 실행 순서에 따른 문서 객체 사용 

- 위에서 아래 방향으로 읽어나가므로 <head>에 JS 사용하면 <body>의 내용은 수정이 안됨.

=> 해결방법 1) <script> 태그를 뒤로 보냄 (비권장)

=> 해결방법 2) 이벤트 활용

<script>
window.onload = function (){ 
// JS 코드 작성
};
</script>

 

(2) 문서 객체 선택

◈ 문서 객체 선택

- HTML 태그를 JS에서 문서 객체로 변환하여 선택할 수 있게 하는 메서드

구분 메서드 설명
1개 선택 document.getElementById('아이디') 아이디를 이용하여 1개 선택 
document.querySelector('선택자') CSS 선택자를 이용하여 1개 선택 /
여러개라면 가장 처음의 요소 반환
여러개 선택 document.getElementsByName('이름') name 속성으로 여러개 선택
document.getElementsByClassName('클래스명') class 속성으로 여러개 선택
document.querySelectorAll('선택자') CSS 선택자를 이용하여 여러개 선택

- 여러개 선택의 메서드로 나온 결과는 배열과 유사하지만 배열은 아닌 객체 => 유사 배열 객체

   - ex)

const headers = document.querySelectorAll('h1');
/*
   headers = { '0': h1, '1': h1, '2': h1, 'length' : 3 }로 결과는 객체가 됨
*/

- for ( in ) / for ( of ) 사용 x ( 객체이므로 length 까지 포함되어 for loop 돌게됨)

- 배열이 아니므로 배열의 메서드 사용 x => headers[0] 과 같이 접근 가능함

 

cf)

- .innerHTML: html 문서에 접근하여 텍스트를 바꾸는 메서드

- .style: 문서 객체의 색 등의 스타일 요소들 조작하는 메서드

 

(3) 문서 객체 조작

◈ 글자 조작

- 글자 속성

속성 설명 예시 - <h1> 의 경우
textContent 문서 객체 내부 글자 순수 텍스트 형식으로 인식 문자열 '<h1>' 으로 처리됨
innerHTML 문서 객체 내부 글자 HTML 태그 반영해 인식 헤더 <h1> 으로 처리됨

 

◈ 스타일 조작

- 자바스크립트로 CSS 속성 값 추가/제거/변경 가능 / .style 객체 내 메서드

CSS 스타일 속성 JS 스타일 식별자
background-image backgroundImage
background-color backgroundColor
box-sizing boxSizing
list-style listStyle

- 보통 Cammel case 로 바꾸면 됨 / 대신 문자열로 값을 주어야 함

const image = document.getElementById('image');
image.width = 300; // 속성값을 숫자로 줘도 됨
image.style.height = '2px' // 문자열+단위로 작성해야

 

◈ 속성 조작

- 문서 객체의 속성 수정을 위한 메서드 / 주로 사용자 지정 속성(data-~ 로 시작하는 속성)에 접근할 때 사용

메서드 설명
.setAttribute('속성 명', '속성 값') 속성 지정
.getAttribute('속성 명') 속성 추출

- ex) document.body.setAttribute('data-custom', 'value');

- 문서 객체 속성 조작 예제

더보기

 

<!-- 문서 객체 속성 조작 예제 (chap10_pg18) -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clock</title>
    <script>
      // 이벤트 연결
      window.onload = function () {
        // 문서 객체 선택
        let clock = document.getElementById('clock');

        // 1초마다 함수 실행
        setInterval(() => {
          const now = new Date();
          clock.innerHTML = now.toString();
        }, 1000);
      };
    </script>
  </head>
  <body>
    <h1 id="clock"></h1>
  </body>
</html>

- setInterval( 함수, 시간단위(ms) ) : 지정된 시간 간격마다 반복실행

- setTimeout( 함수, 시간단위(ms) ): 지정된 시간 동안 한번만 실행

- clearInterval(timer id) / clearTimeout(timer id) : 실행 종료

 

◈ 클래스 조작

- 선택 요소에 class를 더함 / 뺌 / 클래스 존재하는지 확인하는 메서드

- classList.add / classList.remove / classList.contain

 

◈ html 요소 조작

- document.createElement('요소명') : html 의 DOM 요소 만드는 메서드

const li = document.createElement("li"); // li 태그 생성

- DOM 요소에 다른 요소를 자식으로 추가하는 메소드 : 

  - DOM요소.append('추가할 내용'): Node, String 모두 추가 가능 / 여러가지 값 한번에 추가 가능 / 리턴 값 없음

  - DOM요소.appendChild('추가할 요소'): Node만 추가 가능 / 한번에 하나만 추가 가능 / 추가한 Node 리턴 (더 추천)

- crateElement 로 요소 만들고 -> textContent로 요소 텍스트 추가 -> appendChild로 자식으로 추가

- 선택한 DOM 지우는 메소드: DOM요소.remove()

(4) 이벤트

◈ 이벤트 연결

- 특정 이벤트 발생했을 때 실행되도록 함

- DOM 레벨 0 : 인라인 이벤트 모델 / 고전 이벤트 모델

- DOM 레벨 2 : 마이크로소프트 인터넷 익스플로러 이벤트 모델 / 표준 이벤트 모델 문서 객체 모델

- 인라인 이벤트 모델: HTML 태그 내부에 JS 코드 넣어 이벤트 연결 

  - <태그 on이벤트 = "자바스크립트코드"> ... </태그> / ex) <button onclick="alert('click')"></button>

  - 자바스크립트코드 내는 자바 문법으로 작성 / 가독성이 떨어지므로 권장하는 방식은 아님

- 고전 이벤트 모델: 간결하나 이벤트 핸들러 하나만 포함가능하므로 DOM 레벨2의 표준이벤트 모델 이용 권장

// 문서 객체 선택
let button = document.getElementById('button');
// 이벤트 연결
button.onclick = function(){
	alert('click');
};

- 표준 이벤트 모델: addEventListener( '이벤트명', 핸들러 함수)

  - 이벤트 종류

이벤트 명 설명
Click 클릭
Mouseover 요소에 커서를 올렸을 때
Mouseout 마우스가 요소 벗어날 때
Mousedown 마우스 버튼 누르고 있을 때
Mouseup 마우스 버튼 떼는 순간
Focus  포커스 갔을 때
Blur 포커스 벗어나는 순간
Keypress 키 누르는 순간부터 누르고 있는 동안 지속
Keydown 키 누르는 순간에만
Keyup 키 눌렀다 떼는 순간
Load 웹페이지에 필요한 모든 파일(html, css, js등) 다운로드가 완료됐을 때
Resize 브라우저 창 크기 변경됐을 때
Scroll 스크롤이 발생했을 때
Unload 링크 타고 이동하거나 브라우저 닫을 때
Change 폼 필드의 상태가 변경 됐을 때

 

◈ 예제 

- Todo List 만들기

  - 사용자의 할일을 입력받아 리스트에 추가 

  - 할일을 입력하지 않고 제출하면 경고창 띄움

  - 할일을 클릭하면 목록에서 삭제 

<!-- 실습 간단한 TodoList 만들기 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <input type = "text" id="userInput" placeholder=" 할 일을 입력하세요 ">
    <button id="btn">할 일 추가</button>

    <ul id="todolist"></ul>

    <script>
      const list = document.querySelector('#todolist');
      const btn = document.querySelector('#btn');
      const userInput = document.querySelector('#userInput');
      btn.addEventListener('click', () => {
        // user의 입력이 없으면 alert 
        if (userInput.value == ""){
            return alert("할 일을 입력하세요.");
        }

        // <ul>에 붙일 자식 만들기
        const liEl = document.createElement('li');
        liEl.textContent = userInput.value;
        
        // 클릭하면 todo list 에서 삭제하도록 
        liEl.addEventListener('click', (e)=>{
            e.target.remove();}
        );

        // <ul> 에 자식 추가
        list.appendChild(liEl);

        // userInput 초기화
        userInput.value = '';
      });


    </script>
  </body>
</html>

'KB IT's Your Life' 카테고리의 다른 글

Git 사용하기  (0) 2025.03.17
Dolt Node.js [02] 자바스크립트 기초 문법과 모듈  (1) 2025.03.17
Dolt Node.js [01] 노드 환경 설정  (1) 2025.03.13
웹 표준 HTML, CSS, JS [09] 자바스크립트 기본 문법  (1) 2025.03.12
[KB IT's Your Life] 6기 대면 전공반 합격 후기  (2) 2025.03.05
'KB IT's Your Life' Related Articles more