수달이네 기술 블로그

2. Javascript(DOM - Document Object Model) 본문

웹/HTML, CSS, JavaScript

2. Javascript(DOM - Document Object Model)

슬픈 수달이 2025. 11. 29. 10:11

DOM(Document Object Model)

html태그를 하나씩 객체화 한것을 의미한다.

html 페이지 내용과 모양을 제어하기 위해 사용하는 객체로 html태그당 DOM객체가 하나씩 생성된다.

html태그의 포함관계에 따라 부모, 자식, 형제관계로 구성된다.

html요소들은 모두 (Node)라는 객체로 구조화된다.

DOM API

DOM을 다루기 위한 프로그래밍 인터페이스(메소드, 속성)

브라우저가 제공하는 JavaScript 객체.메소드 집합

  • document.getElementById(), document.querySelect(), element.innterHTML등

DOM Tree구조

문서 순서를 트리 형태로 표현

최상위노드: document

주요노드

요소노드(Element Node) -HTML태그

속성노드(Attribute Node) -태그 속성

텍스트노드(textNode)-택스트컨텐츠

<div id = "box">div box</div>
<!-- Document        브라우저가 제공하는 최상위 객체
    ┗ html          요소노드
    ┗ body          요소노드
      ┗ div(id = "box") div요소, id = "box" div 요소의 속성 노드로 존재하지만 일반적으로 div노드의 속성처럼 표현
        ┗div box        div 텍스트노드  -->

<body>
   <ul id="menu">
     <li class="item">home</li>
     <li class="item">about</li>
   </ul>
</body>

<!--
  document
  ┗  html
      ┗ body
      ┗ ul(id="menu")
         ┗  li(class="item")
         ┗  "home" 텍스트 노드
         ┗  li(class="item")
         ┗  "about" 텍스트 노드 -->

DOM 요소 선택(Selector 종류)

1. 메소드

메소드명 반환형태 의미
getElementById("id명") 단일 요소 객체 id명으로 선택
getElementsByClassName("class명") HTMLCollection 클래스명으로 여러 요소 선택
getElementsByTagName("tag명") HTMLCollection 특정 태그명으로 모든 요소 선택
getElementsByName("name명") NodeList name 속성 기준으로 선택(주로 form 요소에서 사용)
querySelector("선택자") 첫번째 일치 요소 CSS 선택자를 이용하여 가장 먼저 일치하는 요소 선택
querySelectorAll("선택자") NodeList CSS 선택자를 이용하여 일치하는 모든 요소 선택

2. HTML Collection과 NodeList 비교

구분 HTMLCollection NodeList
업데이트 실시간 반영(Live) - DOM이 바뀌면 자동 업데이트 정적(Static) 스냅샷 - 생성 시점 기준으로 고정
포함 노드 요소 노드만(Element) 포함 요소+텍스트 노드, 주석 노드도 포함 가능
배열 메소드 배열 메소드(forEach, map 등) 사용 불가 일부 배열 메소드(forEach) 사용 가능
인덱스 접근 가능(배열처럼 [idx]) 가능
반복문 사용 for, for...of 가능 for, for...of, forEach 가능
변경 감지 DOM 변경 시 자동 반영 변경사항이 반영되지 않음

3. CSS 선택자

  • 기본 선택자
    • 태그명
    • #아이디명
    • .클래스명
  • 조합 선택자
    • 태그명.클래스명
    • 태그명#ID명
  • 자식 선택자
    • 태그 태그
  • 후손 선택자
    • 태그 &gt; 태그
  • 형제 선택자
    • 태그 + 태그 (인접 형제 선택자)
    • 태그 ~ 태그 (일반 형제 선택자)
  • 속성 선택자
    • 태그명[속성명]
    • 태그명[속성명=값]
  • 가상 클래스/가상 요소 선택자
    • 태그:hover - 마우스를 올렸을 때
    • input:focus - 포커스된 입력 요소
    • li:first-child - 첫번째 자식
    • li:last-child - 마지막 자식
    • li:nth-child(2) - 2번째 자식만

js에서 객체 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 테스트</title>
</head>
<body>
    <h1>DOM 조작 테스트 페이지</h1>
    <script src="./../js/dom-test.js"></script>
</body>
</html>
  1. html을 js파일과 연결해둔다.
// div 생성
const box = document.createElement("div");
box.id="box";
box.className="container";
box.innerText="DIV BOX";
document.body.appendChild(box);
  1. 이후 해당 파일에서 document.createElement함수를 이용하면 요소를 생성할 수 있다.
  2. .id = id 설정
  3. .className = 클래스 설정
  4. innerText = 내부 텍스트노드의 값 설정(html태그를 고려하지 않고 텍스트 내용만 조작
    • innerHTML: 요소의 내부 HTML을 나타내는 속성(HTML 태그를 포함한 요소의 내용을 변경할 수 있다)
  5. body의 자식노드로 box를 넣어줌

이와 마찬가지로 list도 만들어줄 수 있다.

// ul 생성
const ul = document.createElement("ul");
ul.id="menu";
document.body.appendChild(ul);

// li 3개 생성
["Home", "About", "Contact"].forEach(text => {
  const li = document.createElement("li");
  li.className="item";
  li.innerText=text;
  ul.appendChild(li);
});

속성조작

setAttribute("속성명", "값"); 속성을 설정할 때 사용 getAttribute("속성명"); 속성을 가져올 때 사용 removeAttribute("속성명"); 속성을 삭제할 때 사용

스타일 조작

element.style.속성명 = "값"; 속성명을 카멜표기법으로 사용해야한다 ex) background-color => backgroundColor element.style.backgroundColor = "색상";

this.setAttribute('style', "background-color":'색상');

DOM으로 HTML 파일 내 객체에 Javascript로 이벤트 처리하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM을 활용한 이벤트 처리</title>
    <link rel = "stylesheet" href="./../dom2.css">

</head>
<body>
    <!-- div.box#*5 -->
    <div class="box" id="click"></div>
    <div class="box" id="over"></div>
    <div class="box" id="out"></div>
    <div class="box" id="out-over"></div>
    <div class="box" id="click2"></div>
    <script src = "./../js/dom2.js"></script>
</body>
</html>
.box {
    width:120px;
    height: 120px;
    border : 2px solid black;
    cursor:pointer;
    margin:20px;
  }

위 html 파일과 css로 만든 5개의 박스 객체

위와 같이 html에 박스 5개의 객체가 존재할때

클릭 이벤트

const clickBox = document.getElementById("click");

console.log(clickBox);  

//공통함수: 배경을 green으로 변경
function changeBgGreen(){
    this.style.backgroundColor = "green";    //카멜로
    console.log(this,"녹색으로 변경");
}

clickBox.addEventListener("click", changeBgGreen);

1. getElementById함수를 통해 click id를 가진 박스 객체를 담아온다.

2. function객체를 만들어 css속성에서 색깔을 녹색으로 바꾸는 함수를 만들어주었다.

3. 이걸 addEventListener로 해당 객체가 "click" 했을때 해당 함수를 시작하도록 만든다.

클릭하면 녹색으로 바뀌는 모습

마우스 오버 + 익명함수

const overBox = document.getElementById("over");

console.log(overBox);

overBox.addEventListener("mouseover", function(){
    this.style.backgroundColor = "yellow";
    console.log(this, "노랑으로 변경");
})

1. 마찬가지로 getElementById로 over박스 객체를 불러온다.

2. 해당 객체에 addEventListener함수를 이용해 "mouseover"이벤트를 넣어주고, 익명함수로 옆 함수에 넣을 내용을 구성해주면

마우스를 올리는 것으로 노란색으로 변하는 모습

마우스 아웃 + 익명함수

const outBox = document.getElementById("out");

console.log(outBox);

outBox.addEventListener("mouseout", function(){
    this.style.backgroundColor = "lightblue";
    console.log(this, "하늘색으로 변경");
})

1. 마찬가지로 getElementById로 out박스 객체를 불러온다.

2. 해당 객체에 addEventListener함수를 이용해 "mouseover"이벤트를 넣어주고, 익명함수로 옆 함수에 넣을 내용을 구성해주면

마우스가 박스 밖으로 나오면 색이 변하는 모습

마우스 오버 아웃

const overOutBox = document.getElementById("out-over");

console.log(overOutBox);

//공통함수: 배경을 green으로 변경
function changeBgGreen(){
    this.style.backgroundColor = "green";    //카멜로
    console.log(this,"녹색으로 변경");
}

//공통함수 배경을 pink로 변경
function changeBgPink(){
    this.style.backgroundColor = "pink";
    console.log(this,"핑크로 변경");
}

//이벤트 적용법

let flag = false; //토글 상태 저장 변수
clickBox2.addEventListener("click", function(){
    flag = !flag;
    if(flag){
        this.style.backgroundColor = "purple";
        console.log(this,"보라색으로 변경");
    }
    else{
        this.style.backgroundColor = "lightgray" ;
        console.log(this, '회색으로 변경');
    }
})

1. 마찬가지로 getElementById로 out-over박스 객체를 불러온다.

2. 플래그 변수를 만들어 플래그에 따라 객체가 변하도록 코드를 짜준다.

마우스를 올리면 녹색 빼면 분홍색으로 변하는 모습

더블클릭 + addEventListener의 원소

const clickBox2 = document.getElementById("click2");

console.log(clickBox2);

clickBox2.addEventListener("dblclick", function(e) {    //클릭한 위치 마우스 버튼 정보, 쉬프트, 컨트롤이 눌렸는지, 타겟요소 등의 다양한 것들이 들어있음
    this.style.backgroundColor = "yellow";
    console.log("더블클릭 좌표:", e.clientX, e.clientY);
    const dot = document.createElement("div");
    dot.style.position = "absolute";
    dot.style.width = "10px";
    dot.style.height = "10px";
    dot.style.backgroundColor = "red";
    dot.style.borderRadius = "50%";
    dot.style.left = e.clientX + "px";
    dot.style.top = e.clientY + "px";
    document.body.appendChild(dot);
})

1. click2객체를 불러온 것을

2. eventListener를 통해 가져온 후 dblclick으로 더블클릭으로 이벤트를 발생시킨다.

3. function(e): 익명함수에 e매개변수를 넣어주면 해당 객체를 사용할 수 있는데, 

  • 매개변수로 얻을 수 있는 내용: 마우스 버튼(어떤걸 눌렀는지), 마우스 위치, 쉬프트or컨트롤이 눌렸는지 등등...

4. 해당 객체를 통해 x포지션과 y포지션을 얻은 내용을 기준으로 점 객체를 해당위치에0 appendchild를 통해 만들어준다.

더블클릭을 하면 점이 생기는 모습

 

'웹 > HTML, CSS, JavaScript' 카테고리의 다른 글

Vive Coding으로 웹페이지 만들기 + GitHubPage  (0) 2025.12.03
1. 자바스크립트기초  (0) 2025.11.25
2. CSS추가 내용  (0) 2025.11.21
1. HTML기본기  (0) 2025.11.21
'웹/HTML, CSS, JavaScript' Related Articles more