[JS] DOM

1. DOM 개요

1.1 DOM의 개념

JAVASCIRPT는 왜 생겼을까?

브라우저에서 사용하려고 만들어졌다.

즉, 웹 페이지를 동적으로 만들기 위해 만들어진 것이다.

웹 페이지가 로드되는 과정

사용자(= 브라우저, 클라이언트)가 브라우저에 ‘www.naver.com’ 주소를 입력한다.

🔖웹브라우저 작동 원리

DOM (Document Object Model)

① HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조이다.

② 브라우저에 기본적으로 내장되어 있는 🔖API 중 하나이다.

③ DOM은 아래 그림과 같이 HTML 문서의 구조를 “DOM 트리”로 표현하며, 이 트리의 각 요소들을 ‘노드’라고 부른다.

④ DOM이 브라우저에 내장되어있기 때문에 HTML의 내용을 접근 및 제어할 수 있다.

⑤ 모든 DOM의 node들은 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다.

• 메서드 vs 속성
  → 아래 코드에서 getElementById이 메서드, innerHTML 이 속성이다.

  document.getElementById("demo").innerHTML = "Hello World!";
  

• 메서드 vs 함수
  → person.getName();은 메서드 testLogging();은 함수이다.

1.2 노드 리스트

DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 여러 개의 노드를 함께 가져올 수 있는데, 이렇게 가져온 노드 정보를 저장한 것을 노드 리스트라고 한다.

문서에 있는 모든 p요소를 가져와보자

<div class="container">
  <h1>노드 리스트 살펴보기</h1>
  <p>one</p>
  <p>two</p>
  <p>three</p>
</div>

노드리스트는 마치 배열과 비슷하게 생겼지만 배열은 아니라는 것을 알 수 있다.

노드 리스트를 펼쳐보면 p 요소 노드가 3개 저장된 것을 확인할 수 있다.
이렇게 여러 개의 노드를 저장한 데이터가 노드 리스트인 것이다.

노드 리스트는 배열과 비슷하게 인덱스를 사용하여 노드 리스트에서 특정 위치의 노드에 접근이 가능하다.
p 요소 노드들을 저장한 노드리스트 중에서 두 번째 노드를 가져와보자

2. DOM에 접근 및 제어

2.1 접근

문서 내 특정 요소를 선택한다.

document.querySelector("#test");
document.getElementsByTagName("li"); /

2.2 제어

HTML 문서에 새로운 <div> 요소를 생성하고, 해당 요소를 문서의 body에 추가한다.

const newDiv = document.createElement("div");
document.body.append(newDiv);

선택한 <ul> 요소의 innerText` 속성을 변경하여 텍스트 내용을 “텍스트 변경”으로 설정한다.

document.querySelector("ul").innerText = "텍스트 변경";

선택한 <ul> 요소에 대해 setAttribute` 메서드를 사용하여 style 속성을 변경한다.

document.querySelector("ul").setAttribute("style", "background-color: red");

JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이다!

DOM이 브라우저에 내장되어있기 때문에 javascript HTML의 내용에 접근과 제어가 가능하다.

이것 외에 훨씬 더 많은 Document 관련 API가 존재하니 필요할 때 검색하거나 [DOM 포스팅]을 참고하자!

3. 참조

1. 『 Doit! 모던 자바스크립트 프로그래밍의 정석 』
2. 문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법
3. DOM (Document object Model) 완벽 정복하기