오늘의 주제는 자바스크립트의 DOM 입니다!

DOM이란? 🤷🏻‍♀️

Document Object Model(문서 객체 모델)로 HTML을 객체화한 트리 자료구조입니다.

사실 이것만 보면 뭔지.. HTML을 객체화,, 그래… 트리? 알지 트리…

일단 이렇게 기억해두죠.

DOM은 HTML을 위한 API이고, 이것은 HTML을 탐색할 수 있고, 수정도 할 수 있다 !

DOM에 대해 자세하게 알려면 브라우저 렌더링, 파싱 등의 내용을 함께 공부해야하지만 일단 간단하게 위의 정의를 기억하고 설명해보도록 하겠습니다.

DOM의 계층구조 🎶

아까 DOM이 트리 자료구조라고 설명했었죠?

트리는 계층적 자료구조입니다. 따라서 DOM도 계층을 가지고 있다는 이야기죠. 또한, DOM은 노드 객체로 구성되어있습니다.

그래서 이번에는 DOM의 계층구조에 대해 알아보도록 하겠습니다.

  • 문서 노드📄

    문서 노드는 DOM 트리의 최상단에 존재하는 루트 노드입니다.

    document 객체로 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 합니다.

    이는** 다른 노드(요소, 어트리뷰트, 텍스트)에 접근하기 위해서는 **무조건 문서노드를 거쳐야함을 의미합니다.

  • 요소 노드📄

    요소 노드는 HTML 요소를 가리키는 객체 노드입니다.

    HTML 요소 간의 중첩에 의해 부자관계를 가지며 부자관계를 통해 정보 를 구조화합니다. 요소 노드는 문서의 구조를 표현하는 것입니다 ‼️

  • 어트리뷰트 노드📄

    어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체 노드입니다.

    해당 노드는 부모 노드와는 연결되어있지 않고 요소 노드에만 연결되어 있습니다. 하지만 그렇다고 요소 노드의 형제 노드는 아닙니다‼️

    따라서 어트리뷰트 노드에 접근하여 참조하거나 변경하려면 먼저 요소 노드에 접근해야합니다 ‼️

  • 텍스트 노드📄

    텍스트 노드는 HTML 요소의 텍스트 가리키는 객체 노드입니다.

    텍스트 노드는 문서의 정보를 표현하며 요소 노드의 자식 노드입니다. 자식 노드를 가질 수 없는 leaf 노드로 DOM 트리의 최종단입니다.

    텍스트 노드 접근 시 부모노드인 요소 노드에 먼저 접근해야합니다 ‼️

전체적으로 이러한 구조를 가집니다.

지금까지 DOM의 계층구조를 알아보았습니다. 아까 DOM이 무엇인가에 대해 알아볼 때, HTML을 탐색하고, 수정한다고 했었죠?

네!! 맞습니다!!

이러한 계층구조를 알아봄으로써 HTML을 탐색할 수 있구나~하는것을 알았습니다. 이제 이것을 어떻게 보고, 수정하는지에 대해 알아보아야겠죠?

그래서 요소 노드를 취득하는 방법에 대해 알아보도록 하겠습니다.

요소 노드의 취득 🎁

요소 노드를 취득한다? 요소 노드를 얻는다!

요소노드를 왜 취득해야할까요?

왜냐면.. HTML을 수정한다고 했으니까,, HTML의 구조, 내용, 스타일 등을 수정하려면 뭐든 요소 노드를 취득할 필요가 있는것이지요.

id를 이용한 요소노드 취득‼️

id를 이용하여 요소노드를 취득할 때는 Document.prototype.getElementById 메서드를 사용합니다.

인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환하며, 반드시 document를 통해 호출합니다.

다음에 나올 class 어트리뷰트와 달리 공백 문자로 구분하여 여러개의 값을 가질 수 없습니다.

class를 이용한 요소노드 취득‼️

class를 이용하여 요소노드를 취득할 때는 Document.prototype.getElementsByClassName 메서드를 사용합니다.

해당 class 이름을 갖는 모든 요소 노드들을 탐색하여 반환합니다. 따라서, 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환합니다.

공백 문자로 구분하여 여러 개의 값을 가질 수 있습니다.

tag 이름을 이용한 요소노드 취득‼️

tag 이름을 이용하여 요소노드를 취득할 때는 Document.prototype.getElementsByTagName 메서드를 사용합니다.

해당 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환합니다. class처럼 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환합니다.

모든 요소 노드 취득하고 싶을 땐 인수로 *을 전달합니다.

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

CSS 선택자를 이용하여 요소노드를 취득할 때는 Document.prototype.querySelector , Document.prototype.querySelectorAll 메서드를 사용합니다.

먼저 Document.prototype.querySelector 메서드는 인수로 전달한 CSS selector를 만족시키는 하나의 요소 노드를 탐색하여 반환합니다.

이때 조건은 다음과 같습니다.

  1. 인수로 전달한 CSS selector를 만족시키는 요소 노드가 여러개일때 첫번째 요소 노드만 반환
  2. 인수로 전달된 CSS selector를 만족시키는 요소 노드가 존재하지않을때 null 반환
  3. 인수로 전달한 CSS selector가 문법에 맞지 않는 경우 DOMException 에러가 발생 * 두번째로 **Document.prototype.querySelectorAll 메서드는 인수로 전달한 CSS selector를 만족시키는 모든 요소 노드를 탐색하여 반환합니다.

이때 조건은 다음과 같습니다.

  1. 인수로 전달된 CSS selector를 만족시키는 요소 노드가 존재하지않을때 빈 NodeList 객체 반환
  2. 인수로 전달한 CSS selector가 문법에 맞지 않는 경우 DOMException 에러가 발생

마무리하며.. ☀️

DOM에 대해 알아보았습니다..

매우 일부 내용만을 다루었지만, DOM을 사용하기 위한 방법에 대해 정리를 해보았습니다.

어떻게든 도움이 되었길 바라며,, 글 읽어주셔서 감사합니다 😊

참고 📜

▶황재호. 『예제로 배우는 자바스크립트』. 인포앤북, 2023. ▶이웅모. 『모던 자바스크립트 Deep dive』. 위키북스, 2020.