DOM&EVENT, 노드 생성, 추가, 복제, 삭제 _ 코딩앙마

유튜브 코딩앙마 영상을 보고 정리한 내용입니다.

아래와 같은 li 태그가 있을 때 firstChild firstElementChild 로 해당 노드 및 해당 노드의 요소를 반환 할 수 있습니다.nodeName nodeType nodeValue 를 사용하면 해당 노드의 값들을 불러올 수 있습니다.

//html
<li id="blue">Blue</li>

//js
const blue = document.getElementById('blue');
// 아이디로 태그를 선택하고

blue.firstChild; // => "Blue" - 모든 노드를 반환하므로, text 노드만 가져옴
blue.firstElementChild; //=> "null" - 노드의 요소만 반환하므로

const blueTextNode = blue.firstChild;

blueTextNode.nodeName;  //=> '#text'
blueTextNode.nodeType; //=> 3
blueTextNode.nodeValue; //=> 'Blue' - 특정 노드의 텍스트를 가져옴

blueTextNode.nodeValue = "파랑"; 
// 이렇게 입력도 가능

ul 태그 안에 글자를 넣은 li 를 태그를 만들고 싶다면,

const newLi = document.createElement('li');
// li 태그 만들고

newLi.innerHTML = 'green';
// 만든 li 태그 안에 글자 넣고

const ul = document.getElementById('color');
// ul 태그 만들고

ul.appendChild(newLi);
// 만든 ul 태그 안에 li 태그를 넣는다. 

innerHTML 사용하지 않고 만든다면, 아래처럼 createTextNode 를 쓸 수도 있습니다.

const newLi2 = document.createElement('li');
// li 태그 생성하고

const newText = document.createTextNode('pink');
// 텍스트 노드만 생성하고 

newLi2.appendChild(newText);
// 텍스트 노드를 생성한 li 태그에 넣어준다.

특정 요소 앞에 리스트를 추가하고 싶다면 insertBefore 를 사용합니다.

ul.insertBefore(newLi2, red)
// ul 에 newLi2 를 추가하는데 red 로 선택한 요소 앞에 넣어라

노드 복제할 때는 cloneNode() 를 사용합니다.

const newBlack = newLi.cloneNode() // 빈 노드만 복제
const newBlack = newLi.cloneNode(ture) // 노드의 요소까지 복제

노드의 삭제는 removeChild 를 사용합니다.

ul.removeChild(red);

ul.removeChild(ul.firstElementChild); // ul 의 첫번째 자식요소
ul.removeChild(ul.lastElementChild); // ul 의 마지막 자식요소