js_DOM_03_node

참고 :

• 영상자료 :https://www.youtube.com/watch?v=JNVKehkS0aI&list=RDCMUCxft4RZ8lrK_BdPNz8NOP7Q&index=3

node 속성

const blue = documnet.getElementById('blue');
const blueTextNode = blue.firstChild;\
blueTextNode.nodeName; // #text
blueTextNode.nodeType; // 3   nodeType( 1=element / 2=Attribute / 3=text )
blueTextNode.nodeValue; // 'blue' 
blueTextNode.nodeValue='파랑'; // 변경 가능 String 아니거나 없을시 null

---

Markup Text 삽입 시 innerHTML

const blue = documnet.getElementById('blue');
blue.innerHTML = '<li>Blue</li>';

---

노드 추가

→ method . 1

// tag 생성 후  text 작성
const newLi = document.createElement('li');
newLi.innerHTML = 'pink'; // 삽입할 text 작성
// 삽입 위치 타겟 후 지정 (ul = targetElement)
const ul = document.getElementById('color');
ul.appendChild(newLi);

→ method . 2

// tag 생성 후  text 작성
const newLi2 = document.createElement('li');
const newText = document.createTextNode('삽입 할 text 작성');

// 삽입 위치 타겟 후 지정
const ul2 = document.getElementById('color');
ul2.appendChild(newLi2); // 해당 타겟 뒤에 삽입

// 타겟 위치 앞에 삽입 시
const target = document.getElementById('targetId');
ul2.insertBefore(newLi2,target); // 타겟 앞에 삽입

---

노드 복제

// 복제 clone
const newLi = document.createElement('li');
const newClone = newLi.cloneNode(); // 테그 li만 복사
const newClone2 = newLi.cloneNode(true); // 자식까지 복사 > text까지 가져옴

---

노드 제거

const ul = document.getElementById('targetId');
ul.removeChild(targetNode);
ul.removeChild(ul.firstElementChild);
ul.removeChild(ul.lastElementChild);