04_DOM

Lukaid·2023년 9월 14일
DOM부스트캠프
0

boostcamp

목록 보기
12/20

바닐라 html/css/js로 웹 페이지를 만든다는건 상당히 귀찮은 일이다... 그래도 꼭 필요한 일이라고 생각하며 하나씩 공부하면서 나중에 라이브러리나 프레임워크를 익혔을 때 어려움이 없도록 하자!

DOM이란?

우리가 보는 웹 페이지는 일종의 문서(Document)이다. 이 문서는 HTML이라는 언어로 작성되어 있고, 브라우저는 이 HTML 문서를 해석해서 우리가 볼 수 있는 형태로 보여준다. 그럼 DOM은 무엇일까? 다음은 MDN에 나온 소개이다.

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
(아무튼 공식문서는 어렵다...)

간단히 말해서, DOM은 웹 페이지를 프로그래밍적으로 조작하기 위한 방법을 제공하는 인터페이스라고 할 수 있다. 웹 개발에서는 JavaScript를 사용하여 DOM을 조작하여 동적인 웹 페이지를 생성하고 상호작용을 구현 할 수 있다.

DOM은 문서를 트리 구조로 표현한다. HTML 문서는 <html> 태그로 시작해서 </html> 태그로 끝나는데, 이 태그를 루트(root) 노드라고 한다. 그리고 <html> 태그 안에는 <head> 태그와 <body> 태그가 있고, <body> 태그 안에는 다시 다른 태그들이 들어가는 식으로 문서가 구성된다. 이렇게 문서를 트리 구조로 표현한 것을 DOM Tree라고 한다.

이렇듯, 우리가 보는 웹페이지 즉, 문서들은 트리구조로 되어있고, 웹 페이지의 구조를 표현하고 제어하기 위한 프로그래밍 인터페이스가 DOM이다. 각 HTML 요소(노드)는 DOM에서 객체로 표현되며, 이 객체들은 JavaScript를 사용하여 접근하고 조작할 수 있습니다.

다음은 DOM의 주요 개념이다.


트리 구조: DOM은 트리 구조로 표현된다. 웹 페이지의 시작은 <html> 요소로, 이 하위에 <head>와 <body>와 같은 요소가 있고, 다시 그 하위에 다른 요소들이 중첩된다. 이 트리 구조로 웹 페이지의 계층 구조를 나타낸다.

객체: 각 HTML 요소(예: <div>, <p>, <h1>, 등)는 DOM에서 객체로 표현된다. 이러한 객체들은 해당 요소의 속성과 내용을 포함하며, JavaScript를 사용하여 조작할 수 있다.

요소 선택: JavaScript를 사용하여 DOM에서 특정 요소를 선택할 수 있다. 예를 들어, 특정 ID를 가진 요소나 태그 이름으로 요소를 선택할 수 있다.

요소 조작: 선택한 요소를 수정하거나 새로운 요소를 생성하여 DOM을 변경할 수 있다. 이를 통해 웹 페이지의 내용이나 스타일을 동적으로 변경할 수 있다.

이벤트 처리: DOM은 사용자 상호작용에 응답하기 위한 이벤트 처리를 지원한다. 예를 들어, 버튼 클릭 또는 마우스 호버와 같은 이벤트를 감지하고 처리할 수 있다.





DOM API란?

앞서 서술했듯, DOM을 조작해서 웹 페이지를 생성/조작 할 수 있다. 이러한 기능을 제공해 주는 것이 DOM API다. DOM객체를 접근하기 위한 API 가 필요하며, 브라우저는 DOM 접근용 여러가지 API를 제공한다. DOM API는 DOM을 조작하기 위한 다양한 메소드와 프로퍼티를 제공한다. 이를 통해 DOM을 조작할 수 있다.

중요한 것은, DOM API는 JavaScript가 아니라 브라우저에서 제공한다. 그래서 브라우저마다 DOM API가 조금씩 다르다. 이를 통해 브라우저마다 다른 기능을 구현할 수 있다. 하지만, DOM API는 W3C에서 표준화하고 있어서, 브라우저마다 다른 기능을 구현하는 것을 방지하고 있다. (그러니까, Node.js에는 당연히 없다.)

다음은 DOM API의 주요 개념이다.


요소 선택: DOM API를 사용하여 웹 페이지의 특정 HTML 요소를 선택할 수 있다. 예를 들어, 웹 페이지에서 특정 ID, 클래스, 또는 태그 이름을 가진 요소를 선택할 수 있다.

속성 및 콘텐츠 접근: 선택한 요소의 속성(예: href, src) 및 텍스트 내용에 접근할 수 있다. 이를 통해 요소의 속성을 읽거나 수정할 수 있다.

요소 생성 및 제거: DOM API를 사용하여 새로운 HTML 요소를 동적으로 생성하거나 기존 요소를 삭제할 수 있다. 이로써 새로운 콘텐츠를 추가하거나 페이지의 구조를 변경할 수 있다.

이벤트 처리: DOM API를 사용하여 이벤트 처리기를 등록하고 웹 페이지의 이벤트(예: 클릭, 마우스 오버)를 감지할 수 있다. 이를 통해 사용자와 상호작용하고 웹 애플리케이션의 동작을 제어할 수 있다.

스타일 조작: 요소의 스타일(예: 색상, 크기, 위치)을 동적으로 변경할 수 있다. 이를 통해 웹 페이지의 디자인을 조작할 수 있다.

문서 구조 탐색: DOM API를 사용하여 문서 객체 모델의 트리 구조를 탐색하고 부모, 자식, 형제 요소를 찾을 수 있다.


예시)

탐색

  • querySelector ()

노드 이동

  • children, childNodes, parentElement...

노드 생성

  • createElement..

노드 추가

  • innerHTML (함수방식으로 동작하지 않는다)
  • insertBefore




DOM APIs와 렌더링

프론트 작업의 대부분은 유저가 보는 화면을 변경하는 일이고, 화면을 변경한다는 것은 HTML구조와 각 Node가 가지고 있는 스타일의 변경하는 것을 의미한다. 이를 위해 DOM API를 사용하고, 우리는 이것을 JavaScript를 통해 조작 할 수 있다.

그럼, JavaScript로 내가 원하는 노드를 어떻게 선택할까? CSS Selector를 통해 선택할 수 있다.

const loginBtn = document.querySelector(".login");
const categoryBtns = document.getElementsByClassName("category");

이렇게 선택한 노드를 조작하면, 브라우저는 화면을 다시 그린다. 이를 렌더링이라고 한다. 브라우저는 HTML을 해석해서 DOM Tree를 만들고, 브라우저는 화면을 그린다.

nodeType

DOM Tree의 각 노드는 nodeType이라는 프로퍼티를 가지고 있다. 이 프로퍼티는 노드의 타입을 나타내는 정수값을 가진다. 다음은 nodeType의 종류이다.

nodeTypevaluedescription
ELEMENT_NODE1요소 노드
TEXT_NODE3텍스트 노드
COMMENT_NODE8주석 노드
DOCUMENT_NODE9document 노드
DOCUMENT_FRAGMENT_NODE11document fragment 노드

element node와 text node는 알아두는 것이 좋다고 함





DOM Documents vs DOM Elements

document 와 Element 객체에 따라 좀 다르다.

document

w3school에서는 다음과 같이 정의한다.

When an HTML document is loaded into a web browser, it becomes a document object.
The document object is the root node of the HTML document.
The document object is a property of the window object.
The document object is accessed with:
window.document or just document

HTML 문서가 웹 브라우저에 로드되면 그 자체가 문서 객체가 된다.
문서 객체는 HTML 문서의 루트 노드입니다.
문서 개체는 window object의 속성입니다.
그래서 window.document 또는 document로 액세스된다.

document 객체는 웹 페이지 전체를 나타낸다고 생각하자. 이 객체는 HTML 문서 자체를 표현하며, 웹 페이지의 모든 내용과 구조에 대한 접근을 제공한다.

주요 프로퍼티 및 메서드:

  • document.getElementById(id): 지정된 ID를 가진 요소를 찾아 반환
  • document.getElementsByClassName(className): 지정된 클래스 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환
  • document.getElementsByTagName(tagName): 지정된 태그 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환
  • document.querySelector(selector): 지정된 CSS 선택자에 해당하는 첫 번째 요소를 반환
  • document.querySelectorAll(selector): 지정된 CSS 선택자에 해당하는 모든 요소를 NodeList로 반환
  • document.createElement(tagName): 새로운 HTML 요소를 생성
  • document.createTextNode(text): 텍스트 노드를 생성
  • document.body: <body> 요소에 대한 참조를 제공
  • document.title: 웹 페이지의 제목을 가져오거나 설정
let url = window.document.URL;

// or

let url = document.URL;

ex)

// 웹 페이지의 제목 변경하기
document.title = "새로운 제목";

// 웹 페이지의 내용에 새로운 요소 추가하기
var newElement = document.createElement("p");
newElement.textContent = "새로운 단락입니다.";
document.body.appendChild(newElement);

// 특정 ID를 가진 요소 선택하기
var myElement = document.getElementById("myId");

// CSS 선택자를 사용하여 요소 선택하기
var selectedElement = document.querySelector(".myClass");

element

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.

HTML DOM에서 요소 객체는 P, DIV, A, TABLE 또는 기타 HTML 요소와 같은 HTML 요소를 나타낸다.

element 객체는 웹 페이지의 HTML 요소를 나타낸다. 이 객체는 특정 요소 하나를 대표하며, 해당 요소의 속성, 스타일, 내용 등을 조작할 수 있다.

주요 프로퍼티 및 메서드:

  • element.innerHTML: 요소의 HTML 내용을 가져오거나 설정
  • element.innerText: 요소의 텍스트 내용을 가져오거나 설정
  • element.getAttribute(name): 지정된 속성의 값을 가져옴
  • element.setAttribute(name, value): 지정된 속성의 값을 설정
  • element.style.property: 요소의 스타일 속성을 가져오거나 설정
    • 예: element.style.color, element.style.fontSize.
  • element.classList: 요소의 클래스를 관리하는 메서드를 포함한 DOMTokenList를 반환

ex)

// 요소의 내용 변경하기

var myElement = document.getElementById("myId");
myElement.innerHTML = "새로운 내용";

// 요소의 스타일 변경하기
var myElement = document.getElementById("myId");
myElement.style.color = "blue";
myElement.style.fontSize = "16px";

// 요소의 속성 값 가져오기 및 설정하기
var myElement = document.getElementById("myId");
var attributeValue = myElement.getAttribute("data-custom");
myElement.setAttribute("title", "새로운 타이틀");

// 클래스 추가 및 제거하기
var myElement = document.getElementById("myId");
myElement.classList.add("active");
myElement.classList.remove("inactive");

차이점

차이점을 다시 한번 비교해보자. 아직 명확하지 않은 것 같다.

document 객체:

  • document는 웹 페이지 전체를 대표하는 객체로, 웹 문서(Document) 그 자체를 나타냄
  • 이 객체는 웹 페이지의 전체 구조에 접근하고 조작하는 데 사용됨
  • document는 문서(Document) 객체 모델(DOM)의 일부로 브라우저에 의해 자동으로 생성되며, 그 내용을 조작할 수 있음

element 객체:

  • element는 특정 HTML 요소(예: <div>, <p>, <h1> 등)를 나타내는 객체이다.
  • element 객체는 웹 페이지의 특정 요소에 접근하고, 해당 요소의 내용, 스타일, 속성 등을 조작하는 데 사용된다.
  • element 객체는 document 객체 내부에 포함되며, document 객체에서 특정 요소를 선택하거나 참조할 때 생성된다.

그러니까, document는 브라우저가 자동으로 생성해주고, element는 document의 부분집합으로 document에서 특정 요소를 선택하거나 참조할 때 생성된다. 따라서, document는 문서 전체에 대한 접근을 제공하므로 웹 페이지 내의 모든 요소를 조작할 수 있다. 하지만 element는 특정 요소에 대한 접근만을 제공한다. document의 메서드와 속성은 웹 페이지의 전역 범위에서 작동하지만, element의 메서드와 속성은 특정 요소에 대해서만 작동한다. document와 element는 웹 개발에서 중요한 개념으로, 웹 페이지를 동적으로 조작하고 상호작용을 구현하는 데 필수적이다.





문자열 기반 DOM조작방법

DOM에 node를 추가할때는 문자열 기반의 작업이 편리하다.
가급적 아래 방법을 해서 좀더 쉬운 DOM 조작을 한다.

  • innerText //getter, setter 역할을 모두 한다
  • innerHTML //getter, setter 역할을 모두 한다
  • insertAdjacentHTML
const data = {
  hour: new Date().getHours(),
  name: "codesquad",
};

const template = `<div><span>hello! ${data.name}</span></div>`;
console.log(template); //<div><span>hello! codesquad</span></div>


정리

바닐라 스펙으로 작성하면서 어떤 방법이 맞는 것인지 몰라 이것저것 찾아가며 공부했다. 근데 너무 다양한 방법들이 있고, 정답은 없는 것 같다는 느낌을 많이 받았다. Dom을 정말 잘 쓰는것은 매우 어렵다고 한다. 나같은 초보는 100점 만점에 30점이나 받을 수 있을지 모르겠는데, react같은 라이브러리를 쓰면 거의 80점 정도로 수렴한다고 한다. 공부할건 정말 많다.

profile
Lukaid
풀스택 지향 웹개발자 이성우입니다.
이전 포스트

03_ejs

다음 포스트

05_event

0개의 댓글