[JavaScript] 문서 객체 모델 이해하기 (document편-1)

웹 브라우저는 생성한 문서 객체 모델을 통해 HTML 문서의 구성 요소를 객체로 인식할 수 있다.

자바스크립트는 웹 브라우저의 문서 객체 모델을 조작해 웹 브라우저에 표시되는 HTML 문서 구조를 변경하거나 새로운 구성 요소를 추가하는 등의 작업을 할 수 있다.

1) 문서 객체 모델이 생성되는 방식

1. 문서 객체 모델은 웹 브라우저가 HTML 문서를 해석

2. 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성

3. 생성한 문서 객체 모델을 웹 브라우저에 표시

=> 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 된다.

문서 객체 모델은 tree 구조를 가지며, DOM 트리라고 불린다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document Object Model</title>
</head>
<body>
	<h1>header</h1>
    <a href="#">link</a>
</body>
</html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document Object Model</title></head><body><h1>header</h1><a href="#">link</a></body></html>

위의 코드를 DOM 트리로 변환하면 아래와 같다. (enter를 치면 공백도 노드가 되므로 DOM을 이해하기 어려워 줄 바꿈이 되지 않음!)

노드 (node) : document 객체 하위에 HTML 태그요소, 속성, 텍스트 주석등이 트리형태로 구성되는 각각의 것.

루트 노드(root node) : DOM 트리의 가장 꼭대기에 있는 노드 (html이 루트 노드가 됨. 객체는 포함X)

각 노드는 부모,자식,형제 관계가 형성된다.

노드 타입.

CSS 노드는 없다.

노드 선택하기

노드 탐색 속성 (주로 요소 노드로 탐색함)

document.firstChilld;
document.firtstElementChild;

// 노드 탐색 속성 연속으로 사용
document.childNodes[1].firstElementChild.firstElementChild.nextElementSibling;

(여긴 조금 이해가 잘 안되었다. 해도,,,)

메서드로 노드 선택하기

1. 속성값과 태그명 사용하기 (get 메소드)

<body>
    <h1 id="title">title</h1>
    <p class="text">text-1</p>
    <p class="text">text-2</p>
    <script>
      // id 속성값이 title인 요소 노드 1개 선택하기
      const el = document.getElementById("title");
      console.log(el); 
      
      // class 속성값이 text인 요소 노드 모두 선택하기
      const classEl = document.getElementsByClassName("text");
      console.log(classEl);
      
      // p 태그에 해당하는 요소 노드 모두 선택하기
      const tagEls = document.getElementsByTagName("p");
      console.log(tagEls);
    </script>
  </body>

HTMLCollection 객체나 NodeList 객체 등에 담겨 반환되며 배열과 비슷하게 보인다고 해서 유사배열이며, 그래서 아래와 같이 배열의 인덱스로 요소에 하나씩 접근할 수 있다.

<body>
    <h1 id="title">title</h1>
    <p class="text">text-1</p>
    <p class="text">text-2</p>
    <script>
      const text = document.getElementsByClassName("text");
      console.log(text[0]);
      console.log(text[1]);
      const tag = document.getElementsByTagName("p");
      console.log(tag[0]);
      console.log(tag[1]);
    </script>
  </body>

CSS 선택자

메서드 형식	설명
querySelector(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택한다.
querySelectorAll(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택한다.

CSS 선택자에는 태그 선택자, 클래스 선택자, 아이디 선택자. 가능

그리고 .box1 > p 처럼도 표현 가능

<body>
    <div class="box-1">
      <p class="text">text-1</p>
      <p class="text">text-2</p>
    </div>
    <div class="box-2">
      <p class="text">text-3</p>
      <p class="text">text-4</p>
    </div>
    <div>
        <p id = "box">text-id</p>
    </div>

    <script>
        const text = document.querySelector(".box-1");
        const textID = document.querySelector("#box");
        console.log(text);
        console.log(textID);
    </script>
  </body>

querySelector로 class 선택자는 .클래스명, id 선택자는 #아이디명으로 지정할 수 있다.

<body>
    <div class="box-1">
      <p class="text">text-1</p>
      <p class="text">text-2</p>
    </div>
    <div class="box-2">
      <p class="text">text-3</p>
      <p class="text">text-4</p>
    </div>
    <div>
        <p id = "box">text-id</p>
    </div>

    <script>
        const text = document.querySelector(".box-1");
        const textCd = document.querySelectorAll(".box-1 .text");
        const textID = document.querySelector("#box");
        console.log(text);
        console.log(textCd);
        console.log(textID);
    </script>
  </body>

querySelectorAll은 NodeList객체에 담아 반환한다.

'Frontend > JavaScript' 카테고리의 다른 글

[JavaScript] 폼 조작하기 (0)	2023.07.31
[JavaScript] document-2 (노드 조작/추가,삭제) (0)	2023.07.30
[JavaScript] 브라우저 객체 모델 사용하기 (Window편) (1)	2023.07.29
[JavaScript] 표준 내장 객체 사용하기 (1)	2023.07.29
[JavaScript] 자바스크립트 객체 다루기 (0)	2023.07.26