01. appendChild 를 이용해서 노드를 옮기기
이미 있는 노드를 appendChild 와 insertBefore 메서드로 문서에 삽입하면 해당 노드를 현재 위치에서 삭제하고 새로운 위치에 삽입합니다. 결과적으로 노드는 이동하게 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="fruitslist">
<li>apples</li>
<li>bannanas</li>
</ul>
</body>
</html>
<script>
var fruitslist = document.getElementById("fruitslist");
fruitslist.appendChild(fruitslist.children[0]); //첫번째 자식 요소의 가장 끝에 삽입
</script>
02. 복사가 아니라 "이동"
appendChild 에 대해 조금 헷갈릴 만한 내용을 가지고 왔습니다.
<div class="a">
<span></span>
</div>
<div class="b"></div>
위의 구조에서 JS의 appendChild를 쓴다면 span 태그는 어떻게 될까요??
const span = document.querySelector(‘span’);
const divB = document.querySelector(‘.b’);
divB.appendChild(span);
A. divA 에 남는다.
B. divB 로 복사된다.
C. divB 로 이동된다.
답은 C 입니다.
사실 위에서 복사가 아니라 이동이라는 단어를 하도 강조해서 이동이라고 당연히 생각 하셨을겁니다.
그러면 왜 그런지 알아보겠습니다.
(여기에는 DOM 에 대한 지식도 필요합니다. )
The
Node.appendChild()
method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document,
appendChild()
moves it from its current position to the new position
(there is no requirement to remove the node from its parent node before appending it to some other node).
위에서 말한바와 같이
appendChild 메서드를 이용해서 문서에 삽입하면 해당 노드를 현재 위치에서 삭제하고 새로운 위치에 삽입합니다. 결과적으로 노드는 이동하게 됩니다.
DOM 노드
웹 페이지의 내용은 Document 객체가 관리합니다.
웹 브라우저가 웹 페이지를 읽어 들이면 렌더링 엔진은 웹 페이지의 HTML 문서 구문을 해석하고 Documnet 객체에서 문서 내용을 관리하는 DOM 트리라고 하는 객체의 트리 구조를 만듭니다.
자바스크립트를 사용하면 DOM 트리의 노드 객체를 가져와서 제어할 수 있습니다.
우선 JS 이용해서 HTML 태그를 하나하나 만들어 봅니다.
// <div class="a">
const divA = document.createElement('div');
divA.classList.add('a');
// <div class="b"></div>
const divB = document.createElement('div');
divB.classList.add('b');
// <span></span>
const span = document.createElement('span');
// a few checks
divA.className; // "a"
divB.className; // "b"
divA instanceof HTMLDivElement // true
divB instanceof HTMLDivElement // true
span instanceof HTMLSpanElement // true
노드 트리
DOM 트리라고 하는 객체의 트리 구조로 되어있다고 설명했습니다.
자 이제 알아야 할 것은 트리구조에 대한 개념입니다.
트리 구조는 데이터가 바로 아래에 있는 하나 이상의 데이터에 무방향으로 연결된 계층적 자료구조입니다.
A tree is a finite hierarchical tree structure… An object that participates in a tree has a parent, which is either null or an object, and has children…
트리는 한정된 계층적 트리 구조를 가집니다. 트리에 포함된 노드는 하나의 부모를 가지는데, 그것은 null 일수도 요소일수도있고 하나의 자식노드를 갑니다.
즉, 비선형 구조로 연결 되어있다는 말입니다.
appendchild 이용해 노드 트리를 생성
document.appendChild(divA);
document.appendChild(divB);
divA.appendChild(span);
트리구조에서 appendChild 를 이용해 삽입하게 되면 span 태그(자식노드)가 하나의 부모만 가질 수 있으므로, 기존에 있던 노드를 삭제하고 새로운 위치로 이동하게 됩니다.
divB.appendChild(span);
하나의 노드는 하나의 부모만 가질수 있기 때문에 복사는 성립이 될 수 없습니다.
🟡 DOM은 트리구조를 형성하기 때문입니다.
appendChild 를 공부하면서 조금 더 DOM 트리구조에 대해 공부했던 시간이었습니다.
가장 처음으로 DOM 트리를 포스팅 했었는데 "트리" 를 그냥 지나쳤었는데 중요한 단어였습니다.
[JS] DOM 트리
01. DOM 트리 웹 페이지의 내용은 Document 객체가 관리합니다. 웹 브라우저가 웹 페이지를 읽어 들이면 렌더링 엔진은 웹 페이지의 HTML 문서 구문을 해석하고 Documnet 객체에서 문서 내용을 관리하는
bokartstudio.tistory.com
appendChild 에 대한 의문과 해결은 해외 개발자분 블로그를 참고하였습니다.
Here is why appendChild moves a DOM node between parents - JavaScript inDepth
A light introduction into DOM fundamentals through an insightful quiz. You'll learn how HTML is transforms into JavaScript objects to eventually become part of the Document tree.
indepth.dev
참고문헌
📌 모던 자바스크립트 입문 책
📌 트리 구조에 대해 이해 하기 쉽게 적어 놓은 블로그
[자료구조] Tree 트리 - 하나몬
⚡️ Tree [그림] 트리 구조 예시 자료구조 Tree는 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아서 트리 구조라고 부른다. 자료구조 Tree는 그래프의 여러 구조 중 무방향 그래프의
hanamon.kr
📌 같은 영문 블로그를 참고해 해석 해 놓은 블로그
.appendChild()가 DOM 노드를 "이동"시키는 이유
위와 같은 코드를 수행했을 때 많은 사람들이 span요소가 div.b로 "복사"된다고 예상한다. 하지만 결과는 다르다 트리의 정의에서 이렇게 설명한다. 트리구조에 포함되어있는 객체(object)는 null이거
jjanddakdevlogg.tistory.com
📌 DOM TREE 구조에 대해 설명 해 놓은 블로그
DOM 이란? DOM TREE? DOM API? - DOM 정리
지난 주차 FE 트랙 교육 주제는 DOM이었다. DOM을 큰 틀로 DOM Tree, DOM api를 공부하도록 시켰는데 이해를 확실히 못하고 과제를 작성한 점들이 많으셨던 듯 하다. 물론 나도 DOM을 처음 봤을땐 이게 뭐
from2020.tistory.com
'FRONTEND > JS' 카테고리의 다른 글
| [JS] 프로토타입 상속 ver.01 (0) | 2022.03.30 |
|---|---|
| [JS] 객체 생성과 프로토타입 (0) | 2022.03.24 |
| [JS] 노드 생성과 삽입 createElement & appendChild (0) | 2022.03.14 |
| [JS] innerHTML vs innerTEXT vs textContent 차이 (0) | 2022.03.13 |
| [개발의 본질] 행맨 게임 JS로 만들기 | 토이 프로젝트 01 (0) | 2022.03.13 |
