DOM

jeongjwon·2023년 3월 7일

SEB FE

목록 보기

16/56

📌 DOM

Document Object Model
xml, html의 인터페이스로 구조화된 표현을 제공하여 우리는 DOM을 통해 웹페이지의 컨텐츠, 구조, 스타일을 읽고 조작할 수 있다. nodes와 objects로 문서를 표현하고 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역을 한다. 따라서 DOM의 객체 구조는 '노드 트리' 라고도 불린다. HTML로 구성된 웹 페이지를 동적, 정적으로 구동 가능하다.
HTML 요소(배열처럼 사용 가능(배열 아닌 배열, 유사배열, 배열형 객체 = Array-like Object))

<script> : 등장과 함께 실행

document.querySelector(selectors)
document.querySelectorAll(selectors)
document.getElementById(id)
document.getElementByTagName(name)
document.createElement(name)
node.append(node)
node.appendChild(node)
node.remove(node)
node.removeChild(node)
element.innerHTML
node.textContent
element.setAttribute(name, value)
element.getAttribute(name)
element.addEventListener(type, listener)

🧩 innerText vs innerHTML vs textContent

innerText	innerHTML	textContent
'element' 안의 보여지는 text 값	'element' 안의 HTML이나 XML	'node'가 가지고 있는 text 값

<div id="helloWorld">
  hello World
  <span style="display:none">숨겨진 텍스트</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='getInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

const element = document.querySelector('helloWorld');
function getInnerHTML(){console.log(element.innerHTML);} 
//hello World
//<span style="display:none">숨겨진 텍스트</span>
function getInnerText(){console.log(element.innerText);} 
//hello World
function getTextContent(){console.log(element.textContent);}   
//hello World
//숨겨진 텍스트

🧩 DOM vs JavaScript

JavaSciprt 없이 독립적으로 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있다.
API = DOM + JavaScript

DOM과 JavaScript 차이 알아보기

🧩 DOM의 node 와 element

DOM은 node의 계층 구조로 이루어져 있다. 각 노드는 부모와 children을 가질 수 있다.HTML에 있는 tag (<html>, <p>와 같은...)들은 node를 표현하게 된다. 여기서 그저 tag, text, 주석이더라도 node가 된다는 점이다.
반면 element 는 node 의 한 종류로 text, 주석을 제외한 tag 로 표현된 노드를 말한다.

🧩 chilren vs childNodes

childNodes 는 주어진 요소의 자식 노드 모음( collection )을 반환하여 공백, 주석, tag, text 를 포함한다.
childresn 은 주어진 요소의 자식 html 엘리먼트 모음만 ( collection )을 반환한다.

//줄바꿈 하지 않은 경우
<div class="test"><!-- Hello!! --><p>Hello World</p> This is text</div> 
//줄바꿈 한 경우
<div class="test">
  <!-- Hello!! -->
  <p>Hello World</p> 
  This is text
</div>

const test = document.querySelector(".test");
console.log(test.childNodes); 
console.log(text.children);
//childNods >
//줄바꿈 하지 않은 경우
//NodeList(3) = [comment(주석), p, text]
//줄바꿈 한 경우
//NodeList(5) = [text(공백),comment,text(공백), p, text]


//children >
//HTMLCollection [p]

🧩 remove vs removeChild

remove는 노드를 메모리에서 삭제하고 종료하여 제거된 엘리먼트는 자바스크립트 엔진의 GC(Garbage Collection)에 의해 곧 메모리에서 지워진다.

removeChild는 노드를 삭제하는 것이 아니라, 메모리에 해당 노드는 그대로 존재하며, 부모-자식 관계를 끊어 DOM 트리에서 해제하는 것이다. 최종적으로 관계를 끊은 해당 노드의 참조를 반환한다. 반환값을 재사용 여부에 따라서 GC에 의해 잠시 후 메모리에서 삭제되거나 반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수도 있다.

// 1. 반환 값을 변수에 저장하지 않아 DOM에서 제거되고 메모리에서도 곧 지워진다. 
node.removeChild(child); 
  
// 2. 반환 값을 변수에 저장하여 DOM에서 제거되지만 다시 불러올 수 있다.
let removed = node.removeChild(child);
// document.body.prepend(removed);의 형태로 다시 DOM에 붙일 수 있다.
document.body.prepend(removed);

🧩 append vs appendChild

append 는 요소에 노드 객체 또는 DOM문자열을 자식 요소로 추가할 수 있지만, appendChild 는 노드 객체만을 추가할 수 있고, 추가한 자식 노드를 반환값으로 가진다.

🧩 append vs prepend (vs after vs before)

append 는 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입
prepend 는 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
after 는 선택한 요소 뒤에 컨텐츠 삽입
before 는 선택된 요소 앞에 컨텐츠 삽입

// <p> 원본 </p>
// p.append('원본 뒤'); // <p> 원본 원본 뒤 </p>
// p.prepend('원본 앞'); // <p> 원본 앞 원본 </p>
// p.after('뒤'); // <p> 원본 </p> 뒤
// p.before('앞'); // 앞 <p> 원본 </p>