자바스크립트 노드 조작 정리

HTML 문서에서 자바스크립트를 통해 태그, 텍스트, 속성을 직접 추가/수정/삭제/교체할 수 있습니다. 이를 DOM 노드 조작이라 하며, 웹페이지를 동적으로 만들 때 핵심입니다.

---

✏️ 1. 텍스트 내용 바꾸기 (텍스트 노드 직접 접근)

✅ 전체 텍스트 변경 - nodeValue

let p = document.getElementById("text");
p.firstChild.nodeValue = "내용이 바뀌었어요!";

📌 innerHTML이 아닌 firstChild.nodeValue를 통해 텍스트 노드에 직접 접근해야 함

---

⚙️ 2. 속성값 변경 – setAttribute()

✅ 속성 추가 또는 수정

let p = document.getElementsByTagName("p")[0];
p.setAttribute("class", "highlight");

📌 기존에 없으면 생성, 있으면 덮어씀

---

🔁 3. 요소 바꾸기 – replaceChild()

✅ 기존 요소를 새 요소로 교체

let parent = document.getElementById("container");
let oldItem = document.getElementById("item1");
let newItem = document.createElement("div");
newItem.textContent = "새로운 항목";
parent.replaceChild(newItem, oldItem);

📌 replaceChild(새노드, 교체할노드)

---

🔤 4. 텍스트 일부만 바꾸기 – replaceData()

✅ 텍스트 노드 일부 문자열 교체

let textNode = document.getElementById("text").firstChild;
textNode.replaceData(3, 2, "밤"); // index 3부터 2글자 → "밤"으로 교체

📌 replaceData(시작인덱스, 길이, 새문자열)

---

✅ 핵심 요약표

기능	방법	설명
텍스트 전체 변경	firstChild.nodeValue = ...	텍스트 노드 값 전체 바꾸기
텍스트 일부 변경	replaceData(start, length, text)	일부 텍스트 치환
속성 추가/변경	setAttribute("속성", "값")	class, id 등 추가/수정
요소 교체	replaceChild(새노드, 기존노드)	태그 자체를 새 요소로 교체

---

💡 실용 예제 – 버튼 클릭 시 텍스트 변경

<p id="greeting">안녕하세요!</p>
<button onclick="changeText()">변경</button>

<script>
  function changeText() {
    document.getElementById("greeting").firstChild.nodeValue = "반가워요!";
  }
</script>