2024-10-15

 

 

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

        /*
        - DOM
            웹에서 자바스크립트를 사용하는 가장 큰 이유는 어떤 조건에 맞거나 사용자 동작이 있을 때 웹 
            문서 전체 또는 일부분이 동적으로 반응하기 때문임. 이렇게 하려면 웹 문서에 담겨 있는 모든 요
            소를 따로 제어할 수 있어야 함. 예를 든다면 텍스트와 이미지가 있는 웹 문서이면 ‘하나의 텍스트 
            단락이 있고 내용은 무엇이다’, ‘하나의 이미지가 포함되어 있고 이미지의 크기와 경로는 이렇다’ 
            등을 웹 브라우저에서 기본적으로 알고 있어야 함. 그리고 텍스트 요소와 이미지 요소를 각각 제
            어하기 위해 따로 구별해서 인식해야 함. 여러 개의 요소를 사용한 웹 문서라면 요소 사이의 포함 
            관계도 알고 있어야 함. 이런 정보를 자바스크립트로 가져와서 프로그램에 사용해야 하는데 이 
            때 DOM이 사용됨.

        - DOM이란 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서
            를 체계적으로 정리하는 방법을 말함. DOM 에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 
            이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의함. 예를 들어 웹 문서 전체는 
            document 객체로, 웹 문서에 삽입된 이미지는 image 객체로 나타남. 이렇게 웹 문서와 그 안의 
            요소들을 객체로 인식하고 조절하므로 ‘문서 객체 모델’ 이라고 함. 웹 문서의 객체들도 객체이므
            로 속성(property)과 메서드(method)를 가지고 있음.

        - DOM 트리
            웹 문서는 여러 가지 태그가 서로 포함 관계를 가지고 있음. 예를 든다면 <head> 태그 안에 
            <title> 태그가 들어 있는 것처럼… 이런 포함 관계 때문에 각 태그 간에는 ‘부모’와 ‘자식’ 관계가 
            생기게 됨. 이 때 밖에 있는 요소는 부모 요소, 안에 있는 요소는 자식 요소라고 생각하면 됨.
            DOM에서 웹 문서를 구조화하려면 먼저 웹 문서 구조를 부모 요소와 자식 요소로 구분해서 포함 
            관계를 나타내야 함.  
            html 요소는 head 요소와 body 요소의 부모 요소가 되고, body요소는 다시 h1 요소와 img 요소
            의 부모 요소가 됩니다. 따라서 h1 요소와 img 요소의 입장에서 보면 body 요소는 부모 요소가 
            되겠죠? 

            DOM은 여기에서 한 단계 더 나아가 문서의 요소뿐만 아니라 각 요소에서 사용한 속성과 내용도 
            각 요소의 자식으로 표시를 함. 예를 들어 h1 요소의 내용인 text 는 h1 요소의 자식이 되는 것임. 
            이렇게 DOM을 활용해 웹 문서의 요소를 부모와 자식으로 구분해서 표시하다 보면 마치 나무처
            럼 모양이 나타나서 이것을 DOM 트리(tree) 라고 부름. 그리고 DOM 트리에서 가지가 갈라져 나
            가는 부분은 노드(node), DOM 트리의 시작 부분인 html 노드는 나무 뿌리에 해당하는 루트(root) 
            노드 라고 부름. 루트 노드를 시작으로 웹 문서에서 사용된 각 요소들은 계층 구조를 이루고 있어
            서 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있음. 부모 노드에는 자식 노드가 
            있고, 같은 부모를 가진 노드들을 형제 노드라고 부름. DOM에서 이런 구조로 웹 문서를 해석한다
            는 것을 기억해야 자바스크립트를 사용해 어떻게 접근하고, 원하는 부분을 어떤 방식으로 수정할
            지를 이해 할 수 있음.  

        - 자바스크립트에서 웹 문서에 있는 이미지나 텍스트, 표 등 특정 요소를 찾아가는 것을 “웹 요소에
            접근한다” 라고 함. 이렇게 웹 요소에 접근하면 해당 요소의 내용이나 값을 가져오거나 수정할 수 
            있음.

        - 웹 요소에 접근하는 방법 5가지
            ① getElementById(id 이름) : id 선택자를 기준으로 접근함. 
            ② getElementsByClassName(class 이름) : class 선택자를 기준으로 접근함. 
            ③ getElementsByTagName(tag 이름) : tag 이름을 기준으로 접근함. 
            ④ querySelector(선택자) : 지정한 선택자를 사용한 요소 중에서 첫 번째 요소에 접근함. 
            ⑤ querySelectorAll(선택자) : 지정한 선택자를 사용한 요소 모두를 가져와서 접근함.
            ==> 위 접근 방법 중 ④, ⑤번은 최근에 웹 요소에 접근하는 방법임. 
                접근 시에는 모든 내용 앞에 document라는 키워드가 들어감. 
                    예) document.querySelector(선택자)
        */

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

 

'JavaScript > 기초 내용 정리' 카테고리의 다른 글

JavaScript(DOM)_03  (0) 2024.10.15
JavaScript(DOM)_02  (0) 2024.10.15
JavaScript(BOM)_03  (0) 2024.10.15
JavaScript(BOM)_02  (0) 2024.10.15
JavaScript(BOM)_01  (0) 2024.10.15

티스토리툴바