DOM

oYJo·2024년 12월 27일
JavaScript

JavaScript

목록 보기
16/52
post-thumbnail

1️⃣ DOM(Document Object Model)

HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
→ HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다.

document : { 
	DOCTYPE : html,
    HTML : {
    HEAD : {
    	TITLE : { TEXT : "문서 제목" },
    	STYLE : {...},
    	META : {...}
    } ,
    BODY : {
    	H1 : { TEXT : "제목", ATTRIBUTE : "속성" },
    	COMMNET : {TEXT : "주석 내용"},
    	DIV : {...}
        }
    }
}

style 태그

<style>
  .area{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  }

  .area > div {
  width: 100%;
  height: 10%;
  box-sizing: border-box;
  border: 2px solid red;
  background-color: yellow;
  }
</style>

script 태그

외부 js 파일과 연결하는 태그

<script src="js/12_DOM.js"></script>
// Node 확인하기
document.getElementById("btn1").addEventListener("click", function(){
    
    // #test의 자식 노드를 모두 얻어오기
    // 원하는요소.childNodes : 요소의 자식 노드를 모두 반환
    const nodeList = document.getElementById("test").childNodes;

    console.log(nodeList);

    // 노드 탐색

    // 1) 부모 노드 탐색 : parentNode
    const li1 = document.getElementById("li1");
    console.log(li1.parentNode); // ul#test

    // 부모 노드의 배경색 변경
    li1.parentNode.style.backgroundColor = "orange";

    // 부모 노드 마지막에 새로운 노드 추가(append : (마지막에) 덧붙인다.)
    li1.parentNode.append("ABCD");

    // 2) 첫 번째 자식 노드 탐색 : firstChild
    console.log(document.getElementById("test").firstChild);

    // 3) 마지막 자식 노드 탐색 : lastChild
    console.log(document.getElementById("test").lastChild); // 추가된 ABCD

    // 4) 중간에 존재하는 자식 노드 탐색 : 부모요소.childNodes[인덱스]
    console.log(nodeList[11]);
    nodeList[11].append("1234");

    // 5) 이전 형제 노드 탐색 : previousSibling
    //    다음 형제 노드 탐색 : nextSibling

    console.log(nodeList[8].previousSibling);
    console.log(nodeList[8].nextSibling);

    // 노드 탐색을 위한 구문은 연달아서 사용 가능
    console.log(nodeList[8].previousSibling.previousSibling.previousSibling);
})

// Element 탐색 확인하기
document.getElementById("btn2").addEventListener("click", function(){

    // #test의 모든 자식 요소를 반환
    const list = document.getElementById("test").children;
    console.log(list);

    // #test의 첫 번째 자식 요소
    document.getElementById("test").firstElementChild.style.backgroundColor="red";

    // #test의 마지막 자식 요소
    document.getElementById("test").lastElementChild.style.backgroundColor="yellowgreen";

    // #test의 자식 중(list) 2번째 인덱스의 이전/다음 형제 요소
    list[2].previousElementSibling.addEventListener("click", function(){
        alert("2번 인덱스의 이전 형제 요소 클릭됨");
    })

    list[2].nextElementSibling.addEventListener("click", function(){
        alert("2번 인덱스의 다음 형제 요소 클릭됨");
    })

    console.log( prevEl(list[2]));
    console.log( prevEl(prevEl(list[2])));
    console.log( nextEl(list[2]));
})

// 이전 형제 요소 선택 함수
function prevEl(el){
    return el.previousElementSibling;
}

// 다음 형제 요소 선택 함수
function nextEl(el){
    return el.nextElementSibling;
}

let count = 1;
// innerHTML 버튼 클릭 시 
document.getElementById("btn3-1").addEventListener("click", function(){
    // 쌤 코드
    const div3 = document.getElementById("div3-1");

    if(count <= 10) {
        // 누적
        div3.innerHTML += "<div>" + count + "</div>";
        count++;
    }

})

let count2 = 1;
// createElement 버튼 클릭 시
document.getElementById("btn3-2").addEventListener("click", function(){
    const div = document.getElementById("div3-2"); // #div3-2 선택

    // createElement를 이용해서 div 요소 생성

    // document.createElement("태그명") : 해당 태그 요소를 생성하여 반환
    const child = document.createElement("div"); // div 생성 O, 화면 배치 X

    
    if(count2 <=10){
        // 만들어진 div(child)에 내용 추가(append)
        child.innerHTML = count2;
        count2++;
        // #div3-2 마지막 자식 요소로 추가하기
        div.append(child);
    }
})

document.getElementById("temp").addEventListener("click", function(){
    alert("temp");
})

2️⃣ Node 확인하기

<h1>Node 확인하기</h1>

<ul id="test">
  <!-- Node 확인 테스트 주석입니다. -->

  <li id="li1">1번</li>
  <li class="cls">2번</li>
  <!-- 중간 주석 -->
  <li style="background-color: yellow;">3번</li>
  <li>
    <a href="#">4번</a>
  </li>
</ul>

<button id="btn1">확인하기</button>

3️⃣ Node와 Element의 차이

Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현
Element : Node의 하위 개념으로 요소 노드만을 표현

[Element만 탐색하는 방법]

  • children : 자식 요소만 모두 선택
  • parentElement : 부모 요소 선택
  • firstElementChild : 첫 번째 자식 요소 선택
  • lastElementChild : 마지막 자식 요소 선택
  • previousElementSibling : 이전 형제 요소 선택
  • nextElementSibling : 다음 형제 요소 선택
<h1>Node와 Element의 차이</h1>

<button id="btn2">Element 확인하기</button>

innerHTML / DOM 요소 생성(createElement) 차이점

innerHTML을 이용한 요소 생성 원리

  • (1) 특정요소 내부의 내용을 모두 삭제

  • (2) 특정요소.innerHTML = "태그가 포함된 문자열";
    특정 요소 내부에 일단은 문자열 형태 내용 추가

  • (3) HTMLParser를 이용해서 태그를 해석
    (내부 내용을 다 지우고 새로운 내용을 추가해서 처음부터 다시 해석)

문제점
(1) 해석 속도가 느림
(2) 기존 요소에 존재하던 효과/이벤트가 모두 사라져 버리는 문제가 있음

<h2>innerHTML / DOM 요소 생성(createElement) 차이점</h2>
<button id="btn3-1">innerHTML</button>

<div class="area" id="div3-1">
  <!-- <div id="temp">temp</div> -->
</div>

<button id="btn3-2">createElement</button>

<div class="area" id="div3-2">
  <div id="temp">temp</div>
</div>

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>

    <style>
        .area{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

        .area > div {
            width: 100%;
            height: 10%;
            box-sizing: border-box;
            border: 2px solid red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>DOM(Document Object Model)</h1>

    <pre>
        HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
        -> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때
           각각의 태그, TEXT, COMMENT 등을 Node라고 한다.

        document : { 
            DOCTYPE : html,
            HTML : {
                HEAD : {
                    TITLE : { TEXT : "문서 제목" },
                    STYLE : {...},
                    META : {...}
                } ,
                BODY : {
                    H1 : { TEXT : "제목", ATTRIBUTE : "속성" },
                    COMMNET : {TEXT : "주석 내용"},
                    DIV : {...}
                }
            }
        }
    </pre>

    <hr>

    <h1>Node 확인하기</h1>

    <ul id="test">
        <!-- Node 확인 테스트 주석입니다. -->

        <li id="li1">1번</li>
        <li class="cls">2번</li>
        <!-- 중간 주석 -->
        <li style="background-color: yellow;">3번</li>
        <li>
            <a href="#">4번</a>
        </li>
    </ul>

    <button id="btn1">확인하기</button>

    <hr>

    <h1>Node와 Element의 차이</h1>

    <pre>
        Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현

        Element : Node의 하위 개념으로 요소 노드만을 표현

        [Element만 탐색하는 방법]

        children : 자식 요소만 모두 선택
        parentElement : 부모 요소 선택

        firstElementChild : 첫 번째 자식 요소 선택
        lastElementChild  : 마지막 자식 요소 선택

        previousElementSibling : 이전 형제 요소 선택
        nextElementSibling     : 다음 형제 요소 선택
    </pre>

    <button id="btn2">Element 확인하기</button>

    <hr>

    <h2>innerHTML / DOM 요소 생성(createElement) 차이점</h2>

    <pre>
        - innerHTML을 이용한 요소 생성 원리
        1) 특정요소 내부의 내용을 모두 삭제

        2) 특정요소.innerHTML = "태그가 포함된 문자열";
           특정 요소 내부에 일단은 문자열 형태 내용 추가

        3) HTMLParser를 이용해서 태그를 해석

        (내부 내용을 다 지우고 새로운 내용을 추가해서 처음부터 다시 해석)

        -> 문제점
        1) 해석 속도가 느림
        2) 기존 요소에 존재하던 효과/이벤트가 모두 사라져 버리는 문제가 있음

    </pre>

    <button id="btn3-1">innerHTML</button>

    <div class="area" id="div3-1">
        <!-- <div id="temp">temp</div> -->
    </div>

    <hr>

    <button id="btn3-2">createElement</button>

    <div class="area" id="div3-2">
        <div id="temp">temp</div>
    </div>


    <script src="js/12_DOM.js"></script>
</body>
</html>
profile
oYJo
Hello! My Name is oYJo
이전 포스트

객체

다음 포스트

요소 추가, 제거

0개의 댓글