Node

✅ 노드(Node)

• HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장한다.

🪐 노드의 종류

노드	설명
문서 노드(document node)	HTML 문서 전체를 나타내는 노드
요소 노드(element node)	모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node)	모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음.
	❗ 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.
텍스트 노드(text node)	HTML 문서의 모든 텍스트는 텍스트 노드
주석 노드(comment node)	HTML 문서의 모든 주석은 주석 노드

• 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재하며, 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가진다.
• 모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.
• 형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킵니다.
• 조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.
• 자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.

---

🐥 노드로의 접근

1. getElementsByTagName() 메소드를 이용하는 방법
2. 노드 간의 관계를 이용하여 접근하는 방법

🐠 getElementsByTagName() 메소드를 이용하는 방법

const codeName = document.querySelector("tag")
const codeName = document.getElementById("id")
const codeName = document.getElementsByClassName("class")

🐠 노드 간의 관계를 이용하여 접근하는 방법

1. parentNode : 부모 노드
2. childNodes : 자식 노드 리스트
3. firstChild : 첫 번째 자식 노드
4. lastChild : 마지막 자식 노드
5. nextSibling : 다음 형제 노드
6. previousSibling : 이전 형제 노드

// HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.
document.getElementById("document").innerHTML = document.childNodes[1].nodeName;  // HTML

// html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; // HEAD

---

🐥 노드의 추가

1. appendChild()
2. insertBefore()
3. insertData()

🐠 appendChild() 메소드

• 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가

function appendNode() {
    let parent = document.getElementById("list");  
    // 아이디가 "list"인 요소를 선택함.

    let newItem = document.getElementById("item"); 
    // 아이디가 "item"인 요소를 선택함.

    parent.appendChild(newItem);                   
    // 해당 요소의 맨 마지막 자식 노드로 추가함.
}

🐠 insertBefore() 메소드

• 새로운 노드를 특정 자식 노드 바로 앞에 추가
• 부모노드.insertBefore(새로운자식노드, 기준자식노드);
  새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달
  기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가

function appendNode() {
    let parent = document.getElementById("list");           // 아이디가 "list"인 요소를 선택.
    let criteriaItem = document.getElementById("criteria"); // 아이디가 "criteria"인 요소를 선택.
    let newItem = document.getElementById("item");          // 아이디가 "item"인 요소를 선택.

    parent.insertBefore(newItem, criteriaItem); 
    // 해당 노드를 기준이 되는 자식 노드의 바로 앞에 추가함.
}

🐠 insertData() 메소드

• 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가
• 텍스트노드.insertData(오프셋, 새로운데이터);
  오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달.
  새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달.
  

let text = document.getElementById("text").firstChild; 
// 아이디가 "text"인 요소의 텍스트 노드를 선택함.

function appendText() {
    text.insertData(6, " 나른한 "); // 텍스트 노드의 6번째 문자부터 " 나른한 "이란 텍스트를 추가.
}

---

🐥 노드의 생성

1. createElement()
2. createAttribute()
3. createTextNode()

🐠 createElement() 메소드

• 새로운 요소 노드 만들기

function createNode() {
    let criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
    let newNode = document.createElement("p");          // 새로운 <p> 요소를 생성함.

    newNode.innerHTML = "새로운 단락입니다.";
    document.body.insertBefore(newNode, criteriaNode);  
    // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
}

🐠 createAttribute() 메소드

• 새로운 속성 노드 만들기

function createNode() {
    let text = document.getElementById("text");           
    // 아이디가 "text"인 요소를 선택함.
    let newAttribute = document.createAttribute("style"); 
    // 새로운 style 속성 노드를 생성함.

    newAttribute.value = "color:red";
    text.setAttributeNode(newAttribute);                  
    // 해당 요소의 속성 노드로 추가함.
}

🐠 createTextNode() 메소드

• 새로운 텍스트 노드 만들기

function createNode() {
    let elementNode = document.getElementById("text");           
    // 아이디가 "text"인 요소를 선택함.
    let newText = document.createTextNode("새로운 텍스트에요!"); 
    // 새로운 텍스트 노드를 생성함.

    elementNode.appendChild(newText);                            
    // 해당 요소의 자식 노드로 추가함.
}

---

🐥 노드의 삭제

1. removeChild()
2. removeAttribute()

🐠 removeChild() 메소드

• 자식 노드 리스트에서 특정 자식 노드를 제거

let parent = document.getElementById("list");      
  // 아이디가 "list"인 요소를 선택함.

let removedItem = document.getElementById("item"); 
  // 아이디가 "item"인 요소를 선택함.

parent.removeChild(removedItem);   // 지정된 요소를 삭제함.

🐠 removeAttribute() 메소드

• 속성의 이름을 이용하여 특정 속성 노드를 제거

let text = document.getElementById("text"); 
  // 아이디가 "text"인 요소를 선택함.

text.removeAttribute("style");  // 해당 요소의 "style" 속성을 제거함.

---

🐥 노드의 값 변경

• nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경
• setAttribute() 메소드는 속성 노드의 속성값을 변경

🐠 nodeValue 프로퍼티

• 텍스트 노드의 값을 변경

let para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.

function changeText() {
    para.firstChild.nodeValue = "텍스트 변경 완료!";
    // ❗ 해당 노드의 텍스트(자식 노드)를 변경해야 하므로 firstChild를 해줘야한다
}

🐠 setAttribute() 메소드

• 속성값을 변경 (속성이 존재하지 않으면, 먼저 해당 속성을 생성한 후에 속성값을 설정의 값을 변경)

let para;

function changeAttribute() {
    // 모든 <p> 요소중에서 첫 번째 요소에 클래스 속성값으로 "para"를 설정함.
    document.getElementsByTagName("p")[0].setAttribute("class", "para");
    // 클래스가 설정되면 해당 클래스에 설정되어 있던 스타일이 자동으로 적용됨.
}

---

🐥 요소 노드의 교체

• replaceChild()메소드를 사용하여 기존의 요소 노드를 새로운 요소 노드로 교체
• 교체할노드 = 부모노드.replaceChild(새로운자식노드, 기존자식노드);
  새로운 자식 노드 : 자식 노드 리스트에 새롭게 추가할 요소 노드를 전달.
  기존 자식 노드 : 자식 노드 리스트에서 제거할 요소 노드를 전달.
  

let parent = document.getElementById("parent"); // 부모 노드를 선택함.
let first = document.getElementById("first");
let third = document.getElementById("third");

function changeNode() {
    parent.replaceChild(third, first);          
    // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
}

---

🐥 텍스트 노드의 교체

• replaceData()메소드를 사용하여 텍스트 노드의 텍스트 데이터를 변경
• 텍스트노드.replaceData(오프셋, 교체할문자수, 새로운데이터);
  오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 문자부터 교체할지를 전달.
  교체할 문자 수 : 기존 텍스트 노드의 데이터로부터 교체할 총 문자 수를 전달.
  새로운 데이터 : 새로 삽입할 텍스트 데이터를 전달.
  

let text = document.getElementById("text").firstChild; 
           // 아이디가 "text"인 요소의 텍스트 노드를 선택함.

function changeText() {
    text.replaceData(7, 4, "저녁 7"); 
      // 텍스트 노드의 7번째 문자부터 4개의 문자를 "저녁 7"로 교체함.
}