[JavaScript] DOM

DOM (Document Object Model) 이란??

DOM(Document Object Model)은 HTML 문서를 브라우저에서 JavaScript로 동적으로 접근하고 조작할 수 있도록 트리 구조로 표현한 객체이다.

DOM을 활용하면 HTML 요소를 선택하고, 내용을 변경하거나 이벤트를 처리할 수 있다.

DOM 트리 구조

DOM 트리 구조

• DOM 트리는 HTML 문서를 기반으로 계층적으로 구성된다.
  • 문서 전체는 document 객체로 표현된다.
  • HTML 요소는 노드(Node)로 표현되며, 부모-자식 관계를 가진다.

DOM 함수

1. 요소 선택 함수

     - ID 검색

const element = document.getElementById('[Elemnet ID]');

요소들(Elements) 중 해당하는 ID를 가지고 있는 요소 객체를 가지고 온다.

     - Class 검색

const elements = document.getElementsByClassName('[Element Class Name]');

요소들(Elements) 중 해당하는 Class를 가지고 있는 요소 객체를 가지고 온다. (변수는 배열을 지칭하고 있다.)

     - Tag 검색

const elements = document.getElementsByTagName('[Tag Name]');

요소들(Elements) 중 해당하는 Tag를 가지고 있는 요소 객체를 가지고 온다.(변수는 배열을 지칭하고 있다.)

     - CSS 선택자 중 첫번째 요소만 검색

const element = document.querySelector('.myClass');

CSS선택자를 가지고 있는 요소들 중 첫번째 요소 객체를 가지고 온다.

     - CSS 선택자 모든 요소 검색

const elements = document.querySelectorAll('.myClass');

CSS 선택자를 가지고 있는 모든 요소 객체를 가지고 온다.

CSS로 요소를 들고 오는 것과 Tag, Class, Id로 들고 오는 것의 차이점??

• getElemnet~ : HTMLCollection의 형태로 객체가 저장되어 온다.
• querySelector~ : NodeList 형태로 객체가 저장되어 온다.

NodeList vs HTML Collecttion??

HTML Collection은 LIVE DOM Collection 객체로 내부에 변화가 생기면 이를 즉시 반영한다.

이와 반대로 NodeList는 NON-LIVE Collection 객체로 내부의 변화를 즉시 반영하지 않는다.

여기서 내부의 변화를 즉시 반영한다는 말은 화면을 의미하는 것이 아니다.

화면은 NodeList나 HTML Collection 모두 즉시 반영시킨다.

그러나 현재 진행하고 있는 JS 코드에 들어있는 Dom 객체!!!! 이 객체가 즉시 반영이 되냐 안되냐의 차이이다.

그럼 반영되는 것이 무조건 더 좋은게 아닌가??

라고 생각할 수 있다. 그러나 그렇지 않다.

간단하게 지금 변화하고 있는 모든 변화요소를 다 객체가 반영한다면, 무한 루프를 도는 등 개발자가 예상하지 못한 에러가 나올 수 있다.

따라서 각 요소에 맞게 사용하면 된다.

2. 요소 변경

     - 텍스트 변경

const element = document.getElementById('myId');
element.textContent = "새로운 텍스트";

 

     - HTML 내용 변경

const element = document.getElementById('myId');
element.innerHTML = "<b>HTML로 변경</b>";

단, 위 함수는 잘 사용하지 않는다.

위 함수 대신, HTML의 태그들을 DOM객체 내부의 함수로 호출해서 변경하는 식으로 많이 사용한다.

      - 스타일 변경

const element = document.getElementById('myId');
element.style.color = "blue";

2. 이벤트 처리

      - 이벤트 리스너 추가

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert("버튼이 클릭되었습니다!");
});

3. 새로운 요소 추가

const newElement = document.createElement('p');
newElement.textContent = "새로운 문단 추가";
document.body.appendChild(newElement);

이때, appendChild로 통해서 주입된 새로운 요소는 위 요소에 포함된 요소들 중 최 하단에 배치된다.

• appendChild : 요소들 중 최 하단에 배치
• insertBefore : 2번째 파라미터로 들어온 참조 인자보다 앞에 배치
• prepend : 요소들 중 최 상단에 배치

4. 요소 삭제

const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child);

5. 요소 클래스 조작

const element = document.getElementById('myId');
element.classList.add('newClass');
element.classList.remove('oldClass');

참고 자료

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

https://sirius7.tistory.com/34

[Javascript] getElementsByClassName과 querySelectorAll의 차이 (HTMLCollection과 NodeList의 차이)

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!