[Javascript] DOM이란 무엇인가?

728x90

# 모던자바스크립트_딥다이브_DOM 정리 내용

Javascript DOM

DOM은 (Document Object Model)의 약자로, 문서 객체 모델을 나타낸다.

웹 페이지의 구조를 프로그래밍적으로 조작하고 접근할 수 있도록 하는 인터페이스이며, 문서를 트리 구조로 표현하여

이를 통해 각 요소(태그), 속성, 텍스트 등을 노드로 나타낸다.

사용자가 웹페이지에 접속하면 브라우저는 해당 페이지에 대한 요청을 서버에 보내게 된다.

서버는 요청을 받아 작성된 HTML, CSS, Javascript 등의 리소스를 포함한 응답을 브라우저에게 보낸다.

브라우저는 서버에서 받은 HTML문서를 파싱 하여 DOM트리를 생성하게 된다.

DOM TREE

HTML문서를 파싱 한다 : HTML문서를 분석하여 컴퓨터가 이해할 수 있는 데이터 구조로 변환하는 과정을 나타낸다.

이처럼 DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다.

노드 객체는 총 12개의 종류(노드 타입)가 있다. 이중 중요한 노드타입은 다음과 같이 4가지다.

(1) 문서노드 :

문서 노드는 DOM 트리의 최상위에 존재하는 루트로 document 객체를 가리킨다 document 객체는 브라우저가 렌더링 한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티(속성)에 바인딩되어 있으므로

문서 노드는 window.document 또는 document로 참조할 수 있다..

문서노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다. 요소, 어트리뷰트, 텍스트노드에 접근하려면 문서 노드를 통해야 접근이 가능하다.

(2) 요소 노드 :

요소 노드는 HTML 요소를 가리키는 객체다. 요소 노드는 TML 요소 간의 중첩에 의해 부자 관계를 가지며

이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

<a href="https://www.example.com" target="_blank">Example Link</a>

(3) 어트리뷰트 노드 :

어트리뷰트 노드는 HTML 요소의 어트리뷰트(속성)를 가리키는 객체다. 위 <a> 요소의 'href', 'target'은 어트리뷰트이다.

href, target 어트리뷰트 노드에 접근하고 조작하는 javascript의 예시

// <a> 요소 가져오기
var linkElement = document.querySelector('a');

// href 어트리뷰트 값 읽기
var hrefAttributeValue = linkElement.getAttribute('href');
console.log(hrefAttributeValue); // 'https://www.example.com'

// target 어트리뷰트 값 변경
linkElement.setAttribute('target', '_self');

'getAttribut'메서드를 사용해서 특정 어트리뷰트의 값을 읽고, 'setAttribute'의 메서드를 사용하여 어트리뷰트의

값을 변경할 수 있다. 이렇게 DOM을 통해 어트리뷰트 노드에 접근하고 조작할 수 있다.

(4) 텍스트 노드 : 텍스트 노드는 HTML 요소의 텍스트를 가리키는 객체다.

텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프(leaf node)이다. 즉, 텍스트 노드는

Dom트리의 최종단이다. (제일 밑) 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.

요소 노드 취득

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득(얻어와야 함) 해야 한다.

텍스트노드는 요소 노드의 자식 노드이고, 어트리뷰트노드는 요소 노드와 연결되어 있기 때문에 텍스트 노드나

어트리뷰트 노드를 조작하고자 할 때도 마찬가지다.

예를 들어, HTML 문서 내의 h1 요소의 텍스트를 변경하고 싶은 경우를 생각해 보자.

이 경우 먼저 DOM 트리 내에 존재하는 h1 요소 노드를 취득할 필요가 있다. 그리고 가져온 요소 노드의 자식 노드인

텍스트 노드를 변경하면 해당 h1 요소의 텍스트가 변경된다.

id를 이용한 요소 노드 취득

'getElementById' 메서드는 Document.prototype의 프로퍼티(속성)이다. 따라서 반드시 문서 노드인 document를 통해 호출해야 한다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li id="apple">Apple</li>

<li id="banana">Banana</li>

<li id="orange">Orange</li>

</ul>

// id 값이 "banana"인 요소 노드를 탐색하여 반환한다.

// 두 번째 li 요소가 파싱되어 생성된 요소 노드가 반환한다.

const $elem = document.getElementById("banana");

// 취득한 요소 노드의 style.color 프로퍼티 값을 변경한다.

$elem.style.color = "red";

</script>

</body>

</html>

id 값은 HTML 문서 내에서 유일한 값이어야 한다. class와 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없다.

HTML 문서 내에는 중복된 id 값을 갖는 요소가 여러개 존재할 가능성이 있다.

이러한 경우 getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다. 즉, getElementById 메서드는 언제나 단 하나의 요소 노드를 반환한다.

태그 이름을 이용한 요소 노드 획득

<!DOCTYPE html>

<head>

<title>getElementsByTagName</title>

</head>

<body>

<ul>

<li id="apple">Apple</li>

<li id="banana">Banana</li>

<li id="orange">Orange</li>

</ul>

// 태그 이름이 li인 요소 노드를 모두 탐색하여 반환한다.

// 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환도니다.

// HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.

const $elems = document.getElementsByTagName("li");

// 취득한 모든 요소 노드의 style.color 프로퍼티 값을 변경한다.

// HTMLCollection 객체를 배열로 변환하여 순회하며 color 프로퍼티 값을 변경한다.

[...$elems].forEach((elem) => {

elem.style.color = "red";

});

</script>

</body>

</html>

getElemetnsBytagName 메서드는 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를

반환한다. 함수는 하나의 값만 반환할 수 있으므로 여러 개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아

반환해야 한다.

class를 이용한 요소 획득

getElementsByTagName과 마찬가지로 getElemetsByClassName 메서드는 여러 개의 요소 노드 객체를 갖는

DOm 컬렉션 객체인 HTMLCollection객체를 반환한다.

<!DOCTYPE html>

<head>

<title>getElementsByTagName</title>

</head>

<body>

<ul>

<li class="fruit apple">Apple</li>

<li class="fruit banana">Banana</li>

<li class="fruit orange">Orange</li>

</ul>

// class 값이 'fruit'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.

const $elems = document.getElementsByClassName("fruit");

// 취득한 모든 요소의 CSS color 프로퍼티 값을 변경한다.

[...$elems].forEach((elem) => {

elem.style.color = "red";

});

// class 값이 'fruit apple'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환한다.

const $apples = document.getElementsByClassName("fruit apple");

[...$apples].forEach((elem) => {

elem.style.color = "blue";

});

</script>

</body>

</html>

'getElementBytagName' 메서드와 마찬가지로 'getElementsByClassName' 메서드는 Document.prototype에 정의된

메서드와 Element.prototype에 정의된 메서드가 있다. 그래서 DOm의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환하고 Element.prototype.getElementsByClassName 메서드는 특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

CSS 선택자를 이용한 요소 노드 취득

CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

document.prototpye/Element.prototype.querySelector 메서드는 인수로 전달한 CS 선택자를 만족시키는

하나의 요소 노드를 탐색하여 반환한다.

<!DOCTYPE html>

<head>

<title>querySelector</title>

</head>

<body>

<ul>

<li class="fruit apple">Apple</li>

<li class="fruit banana">Banana</li>

<li class="fruit orange">Orange</li>

</ul>

// class 어트리뷰트 값이 'banana'인 첫 번째 요소 노드를 탐색하여 반환한다.

const $elem = document.querySelector(".banana");

// 취득한 요소 노드의 style.color 프로퍼티 값을 반환한다.

$elem.style.color = "red";

</script>

</body>

</html>

document.prototpye/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는

모든 요소 노드를 탐색하여 반환한다. querySelectorAll 메서드는 여러 개의 요소 노드 객체를 갖는

DOM 컬렉션 객체인 NodeList 객체를 반환한다. NodeList 객체는 유사 배열 객체이면서 이터러블이다.

<!DOCTYPE html>

<head>

<title>querySelector</title>

</head>

<body>

<ul>

<li class="fruit apple">Apple</li>

<li class="fruit banana">Banana</li>

<li class="fruit orange">Orange</li>

</ul>

// ul요소의 자식 요소인 li 요소를 모두 탐색하여 반환한다.

const $elem = document.querySelectorAll("ul >li");

console.log($elem);

// 취득한 모든 요소 노드의 style.color 프로퍼티 값을 변경한다.

// NodeList는 forEach 메서드를 제공한다.

$elem.forEach((elem) => {

elem.style.color = "red";

});

</script>

</body>

</html>

getElementsByTagName, getElementByClassName, querySelector, querySelectorAll 메서드는

Document.prototype에 정의된 메서드는 DOM의 루트 노드 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다. Element.prototype에 정의된 메서드는 특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

728x90

저작자표시 비영리 변경금지

'Front-end Developer > Javascript' 카테고리의 다른 글

Javascript - forEach (0)	2023.11.28
[Javascript] Javascript란 무엇일까? (0)	2023.11.03
Javascript - [.getElementById, function] (0)	2023.10.31
Javascript -1. 변수 선언 (const, let, var) (0)	2022.10.07

나의 IT개발 일지

[Javascript] DOM이란 무엇인가?

Javascript DOM

DOM TREE

'Front-end Developer > Javascript' 카테고리의 다른 글

티스토리툴바

[Javascript] DOM이란 무엇인가?

Javascript DOM

DOM TREE

'Front-end Developer > Javascript' 카테고리의 다른 글

'Front-end Developer/Javascript' Related Articles

티스토리툴바