티스토리 뷰

프론트엔드/DOM

[DOM&EVENT] 03. 노드 생성, 추가, 복제, 삭제

yyoujg 2022. 9. 29. 18:44 
<body>
	<h1>Welcome</h1>
    <h2>World</h2>
    <ul id='color'>
    	<li id='red'>Red</li>
        <li id='blue'>Blue</li>
        <li id='green'>Green</li>
    </ul>
    <h3>A</h3>
const blue = document.getElementById('blue');
blue.firstChild;
text ('Blue')
blue.firstElementChild;
null

firstChild는 자식 노드로 text가 나오고 firstElementChild는 자식 요소 노드는 없기 때문에 null이 나옵니다.  

const blueTextNode = blue.firstChild;

blue라는 text 노드의 정보들을 보겠습니다.

blueTextNode.nodeName;
'#text'
blueTextNode.nodeType;
3
buleTextNode.nodeValue;
'Blue'

nodeName은 #text, nodeTye은 3(문서 상 text Node), nodeValue는 텍스트 값을 의미합니다.

특정 요소의 텍스트를 가져와서 써야 할 때 nodeValue를 활용 및 수정할 수 있습니다. 

blueTextValue.nodeValue = '파랑';

수정하는 방법은 간단하게 nodeValue에 새로운 값을 넣어주면 됩니다. nodeValue는 모든 노드가 가지고 있는 property지만 text 노드가 아니면 null을 반환합니다.

const ul = document.getElementById('color')
ul.nodeType;
1
ul.nodeName;
'UL'
ul.nodeValue;
null

 

ul의 nodeType은 1(ELEMENT_NODE. 요소 노드)이고 nodeName은 노드의 태그네임을 대문자로 반환합니다. nodeValue는 null이 나옵니다. text 노드에서만 nodeValue를 이용해서 텍스트 수정이 가능합니다. 

ul.textContent;
'\n   Red\n   \n   Blue\n   Green\n'

textContent를 이용하면 text 노드가 아닌 경우에도 값을 수정할 수 있습니다.

ul.textContent = 'xxxx';

ul.textContent = '<li>Red</li>';

하지만 이 경우에는 마크업이 모두 사라집니다. 제대로 된 마크업을 넣어도 너무 문자열 그대로 나옵니다.

그래서 잘 사용하지 않습니다.

ul.innerHTML = '<li>RED</li>';
<li>RED</li>

마크업을 제대로 표현하려면 innerHTML을 사용해서 간단하게 마크업을 적용할 수 있습니다. 아주 편리한 기능이긴 하지만 단점은 요소를 추가 제거 수정할 때마다 다시 모든 HTML을 String으로 작성해야 된다는 점입니다.

const newLi = document.createElement('li');

요소를 만들 때는 document.createElement를 사용합니다.

newLi;
<li></li>

 현재는 내부에 텍스트 노드가 없습니다.

newLi.innerHTML = 'green';

newLi;
<li>green</li>

간단히 text 노드로 만들어주려면 innerHTML을 사용합니다.

const ul = document.getElementById('color');
ul.appendChild(newUL);

이제 이걸 ul 내부에 넣어줍니다. appendChild를 이용해서 newLi를 넣어줍니다.

const newLi2 =document.createElement('li');

자식 text 노드를 만들기 위해서 innerHMTL을 사용했는데 이번에는 innerHTML도 사용하지 않고 만들어보겠습니다.

const newText = document.createTextNode('pink');

마찬가지로 li를 하나 만들어줍니다.

newLi2.appendChild(newText);
ul.appendChild(newLi2);
<li>pink</li>

이번에는 innerHTML을 쓰는 대신 TEXT 노드를 하나 생성해 줍니다. li에 방금 만든 text 노드를 넣습니다.

그리고 ul에 다시 newLi2를 넣어줍니다.

 

const newLi3 = document.createElement('li');
const textNode3 =document.createElement('blak');
newLi3.appendChild(textNode);
const red = document.getElementById('red');
ul.insertBefore(newLi3, red);

appendChild는 항상 지정한 부모 노드의 가장 마지막 자식으로 추가됩니다. 원하는 위치기 마지막이 아니라면 이전에 삽입되는 insertBefore를 사용합니다. 특정 노드를 전달하면 그 노드 전에 삽입이 됩니다.

ul.insertBefore(newLi3, red) 하면 red 앞에 newLi3가 추가 됩니다.

새롭게 노드를 생성하지 않고 기존의 노드를 이 메소드에 전달하면 노드가 이동됩니다.

ul.appendChild(red);
<li id='red'>...</li>
ul.insertBefore(red, newLi3);

앞 페이지에서 기존에 존재하는 레드를 appendChild(red);에 전달하면 red가 제일 뒤로 이동합니다. insetBefore를 사용하면 black이전(제일 앞)으로 이동됩니다.

const newBlack = newLi3.cloneNode();

cloneNode를 이용하면 노드를 복제할 수 있습니다. newLi3를 cloneNode()해서 black을 복제해서 newBlack을 만들었습니다.

ul.appendChild(newBlack);

ul.appendChild(newBlack)하면 ul에 newBlack이 추가가 되는데 html 태그를 보면 li 태그만 달랑 복제가 됩니다.

const newBlack2 = newLi3.cloneNode(true);

cloneNode는 인수로 boolean 값을 받습니다. 인수로 true를 전달하면 깊은 복제를 실행합니다. 이렇게 하면 자식 노드까지 모두 복제 됩니다. 여기서 자식노드는 text 노드입니다. cloneNode()에 아무것도 안적거나 false를 전달하면 노드 자신만 복제됩니다.

ul.appendChild(newBlack2)

appendChild로 newBlack2를 추가하면 text까지 잘 복제되어 추가된 것을 확인할 수 있습니다.

ul.removeChild(red);

마지막으로 삭제는 removeChild를 이용해서 할 수 있습니다.

ul.removeChild(newBlack2);

방금 추가한 removeChild2를 전달하면 마지막에 추가했던 black이 삭제됩니다.

ul.removeChild(ul.firstElementChild);

이렇게 하면 첫번째 자식 요소 노드가 삭제되고 

ul.removeChild(ul.lastElementChild);

마지막 자식 요소 노드도 지울 수 있습니다. 

 

'프론트엔드 > DOM' 카테고리의 다른 글

[DOM&EVENT] 06. 이벤트 버블링, 이벤트 위임  (1) 2022.09.30
[DOM&EVENT] 05. 이벤트 핸들러(Event Handler)  (1) 2022.09.30
[DOM&EVENT] 04. CSS style, class 제어  (0) 2022.09.30
[DOM&EVENT] 02. 부모, 자식, 형제 노드  (1) 2022.09.28
[DOM&EVENT] 01. 노드에 접근하기  (0) 2022.09.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함