DOM (Document Object Model)

🍫 DOM (Document Object Model) 이란?

• DOM은 Document Object Model(문서 객체 모델)의 약자로 HTML 요소를 조작할 수 있는 모델 혹은 콘셉트다.
• 물론 자바스크립트로 DOM에 접근해 HTML 조작이 가능하다.

DOM은 이렇게 Objects(객체들)의 트리구조로 만들어진다.
DOM을 구성하는 이 객체들을 Node라 부른다.

🍫 Node와 Element

• Node는 <div> , <span> 등의 태그 뿐만 아니라 태그가 존재하지 않는 그냥 text도 포함한다.

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE

노드에는 다양한 종류가 있고, 그 중 일반적으로 element 라고 불리는 것이 Node.ELEMENT_NODE 를 뜻한다. 즉, Node가 Element의 상위 개념인 것이다.
아무래도 HTML을 조작하는데 가장 많이 쓰는게 이 element가 아닐까 싶다.


👇 DOM 의 객체에는 정말 많은 속성과 메소드가 존재하지만, 핵심적인 것들만 간단히 정리해보려 한다.

🍫 createElement

• HTML의 element를 생성한다.

document.createElement('div')

이렇게하면 하나의 Node가 생성되지만, 이는 트리구조 내에서 그 어떤 요소와도 연결되어 있지 않은 상태다.

🍫 append, appendChild

append

• create한 element를 실제로 트리구조에서 특정 요소와 연결 시킨다.
• return하는 값은 따로 없다. (undefined)

const createdEl = document.createElement('div')

document.body.append(createdEl)  // undefined

Document의 body 내에 createdEl을 집어넣는다.

document.body.append(div,p,'hi')  // undeifined

위와 같이 다중으로 한번에 append 할 수 도 있고, 단순 text 도 append 가능하다.

appendChild

• 기능은 append와 동일하지만, 이 친구는 Node만 받는다.
• Element_Node는 넣을 수 있지만, 단순 문자열 를 넣으려 하면 에러가 뜬다.
• 또한, 다중으로 넣는 것도 불가능하다.
• append와 다르게 리턴값을 반환한다.

document.body.appendChild('hi')  // Uncaught TypeError
document.body.appendChild(div)  // div(Node object)

🍫 querySelector, querySelectorAll

querySelector

• HTML Element 정보를 조회(선택)한다.
• 인자로 셀렉터를 전달한다. (태그, id, class 등)
• 위에서부터 아래로 읽어 내려가 해당 셀렉터에 만족하는 첫번째 요소 전달

document.querySelector('#id')
document.querySelector('tag')
document.querySelector('.class')

querySelectorAll

• 여러개의 Element를 한번에 조회(선택)한다.
• querySelector와 사용법은 같다.
• 특이한 점은 이렇게 조회한 Element들은 '유사배열' 의 형태로 나타난다.
  따라서, 이것을 반복문 등으로 활용할 수 있다. (하지만 엄연히 배열은 아니라는 점)

document.querySelectorAll('div')

예시)
// NodeList(3) [ div.first, div.second, div-third ] 
이런식으로 출력된다. 

🍫 textContent, innerHTML, classList.add, setAttribute

textContent

• Element에 문자열을 입력한다.

exDiv.textContent = 'hi'

console.log(exDiv); // <exDiv>hi</exDiv>

innerHTML

• Element에 문자열을 입력한다.
• textContent와 다르게 이 친구는 html element를 넣을 수도 있다.
• 참고로 빈 문자열을 넣으면 해당 요소를 삭제도 할 수 있다.
• 하지만 이렇게 element를 직접 삽입, 삭제하여 실행하는 메소드다 보니, script의
  tag를 해커가 임의로 조작해 원하는 스크립트를 실행시키는 XSS Attack 등의
  보안 위험이 있어서 사용을 지양하는 것이 권장된다.

exDiv.innerHTML = 'hi'

console.log(exDiv); // <exDiv>hi</exDiv>

exDiv.innerHTML = '<a href="#none">Link</a>'
console.log(exDiv); // <exDiv><a href="#none">Link</a></exDiv>

exDiv.innerHTML = '';  // 해당 exDiv 요소 삭제

classList.add

• Element에 class를 추가한다.

exDiv.classList.add = 'exClass'

console.log(exDiv); // <exDiv class="exClass">hi</exDiv>

setAttribute

• 선택한 요소의 속성(attribute)값을 정한다.
• 속성이 존재하지 않을 경우엔 새로 속성을 추가하고, 속성이 원래 있을 경우에는 기존 속성값을 지우고 새 값을 적용한다.

exDiv.classList.add = 'exClass'

console.log(exDiv); // <exDiv class="exClass">hi</exDiv>

exDiv.setAttribute('id', 'newId');
exDiv.setAttribute('class', 'newClass');

console.log(exDiv); // <exDiv id='newId' class="newClass">hi</exDiv>

🍫 remove, removeChild

remove

• 선택한 element를 삭제한다.
• 노드를 메모리에서 삭제하고 종료한다.
• 리턴값은 따로 없다.

exDiv.remove();

removeChild

• 선택한 element를 삭제한다.
• remove와 다르게 메모리에 노드는 그대로 존재하며, 부모 노드와의 부모-자식 관계를 끊어 DOM트리에서 해제하는 것이다.
• 리턴값은 삭제한 노드 그 자체가 되며, 이를 변수에 담아 다른 DOM위치에 붙이는 것도 가능하다.

const delNode = parentNode.removeChild(exDiv);

anotherParentNode.append(delNode);