[Javascript] 문서 객체 모델 (DOM)

Language/JavaScript

[Javascript] 문서 객체 모델 (DOM)

gangintheremark 2023. 7. 11. 19:34

728x90

문서객체모델 DOM (Document Object Model) 은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다

DOM 트리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 알아보기</title>
</head>
<body>
    <h1>DOM 이란?</h1>
    <p><strong>Document Object Model</strong>의 줄임말입니다.</p>
</body>
</html>

DOM은 문서 요소 집합을 트리 형태의 계층 구조로, 웹 브라우저가 HTML 문서를 읽으면 아래 그림처럼 document 객체로 시작하는 DOM 트리가 만들어진다.

DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며, DOM트리의 시작 부분인 html 노드를 루트 노드라고 한다. 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다. 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있다. 부모 노드에는 자식 노드가 있고, 부모 노드가 같은 형제 노드가 있다.

DOM을 구성하는 기본원칙은 다음과 같다.

💡 DOM을 구성하는 기본원칙 💡

모든 HTML 태그는 요소(element) 노드

HTML 태그에서 사용하는 텍스트 내용은 텍스트(text) 노드

HTML 태그에 있는 속성은 속성(attribute) 노드

주석은 주석(comment) 노드

문서의 객체

✅ 객체 만들기

createElement(tagName) : element 노드를 생성
createTextNode(text) : text 노드를 생성
appendChild(node) : 객체에 자식 노드를 추가

✅ 객체의 속성 설정

setAttribute(name, value) : 객체의 속성을 지정
getAttribute(name) : 객체의 속성 값을 가져옴

✅ 객체의 값 설정

innerHTML : 문자열을 HTML태그로 삽입
innerText : 문자열을 text노드로 삽입

✅ 객체 가져오기

getElementById(id): 태그의 id 속성이 일치하는 요소 객체 반환
getElemetsByclassName(className): 태그의 class 속성이 일치하는 요소 배열 반환
getElementsByTagName(tagName): 태그이름이 일치하는 요소 배열 반환
getElementsByName(name): 태그의 name 속성이 일치하는 요소 배열 반환
querySelector(selector): selector에 일치하는 첫번째 요소 객체 반환
querySelectorAll(selector) : selector에 일치하는 모든 요소 배열 반환

반환된 객체의 property와 method를 사용하여 화면을 동적으로 처리하는 것이 가능하다.

✅ 객체 제거하기

removeChild(childNode) : 객체의 자식노드 제거

🔉 주의) head 태그 안에서 DOM 객체에 접근하려면 반드시 DOM 트리가 생성된 후에 접근이 가능 주로 ➜ onload 이용

#innerText를 이용한 코드 예시

<head>
    <script>
      // 버튼을 누르면 Hello 에서 World 로 바뀌는 기능
        function btn_change() {
            var p = document.getElementById("xxx");
            var p = document.querySelector("#xxx");

            p.innerText="World"; // innerText 사용 
        }
    </script>
</head>

<body>
       <p id="xxx"><span>Hello</span></p>
    <button onclick="btn_change()">변경</button>
</body>

✅ 사용자 입력 tag

tag.value : 주로 input 태그, select태그, textarea 값을 가져올 때

#.value를 이용한 코드 예시

<head>
    <script>
        function get_age() {
            var age_input = document.querySelector("#age");
            var result = document.querySelector("#result");
            result.innerText = age_input.value;
        }
    </script>
</head>
<body>
    나이 : <input type="text" id="age"> <br>
    <button onclick="get_age()">나이 출력</button> <br>
     입력 나이 출력: <div id="result">0</div>
 </body>

# input type이 checkbox일 때,체크 여부에 따라 동작하기 ➜ checked

<head>
    <script>
        // checkbox에서 체크 여부는 checked 가 알려준다.
        function isCheck() {
            var check = document.querySelector("#same_address");

            if (check.checked) {
                document.querySelector("#address2").value = document.querySelector("#address").value;
            } else {
                document.querySelector("#address2").value = "";
            }
        }
    </script>
</head>

<body>
    회원주소: <input type="text" value="부산광역시 대연동" id="address"><br>
    배송지주소와 동일하면 체크하시오.
    <input type="checkbox" id="same_address" onclick="isCheck()">
    <hr>
    배송지 주소: <input type="text" id="address2">
</body>

# 이미지 변경 버튼 클릭 시, 크기 및 사진 변경

<head>
    <script>
        function img_change() {
            var img = document.querySelector("#img");
            console.dir(img);
            img.src = "../images/002.png";
            img.width = "200";
            img.height = "200";
        }
    </script>
</head>

<body>
    <img src="../images/001.png" width="100" height="100" id = "img">
    <button onclick="img_change()">이미지 변경</button>
</body>

728x90