Document Object Model

1. DOM

DOM(Document Object Model)은 웹 페이지의 구조를 자바스크립트에서 프로그래밍적으로 조작할 수 있도록 표현한 객체 모델입니다. HTML 문서를 브라우저가 읽으면 각 요소(태그, 텍스트 등)를 트리 구조로 변환하는데, 이때 생성되는 계층적인 구조가 DOM입니다. DOM은 문서 전체를 document 객체로 표현하며, 그 하위에는 html, head, body, 각종 요소들이 노드 형태로 연결되어 있습니다. 자바스크립트를 사용하면 이 DOM 구조에 접근하여 텍스트를 변경하거나, 요소를 추가/삭제하거나, 스타일을 수정하고, 이벤트를 연결하는 등 웹 페이지를 동적으로 조작할 수 있습니다.

 

 

2. Document 객체

document 객체는 자바스크립트에서 웹 페이지 전체를 표현하는 최상위 DOM 객체로, HTML 문서에 직접 접근하고 조작할 수 있게 해주는 핵심 객체입니다. 브라우저가 HTML 파일을 로드하면 자동으로 document 객체가 생성되며, 이 객체를 통해 웹 페이지의 요소들을 선택하거나 생성, 수정, 삭제할 수 있습니다.

 

1. document.getElementById(id)

특정 id를 가진 요소를 가져옵니다.

<p id="greeting">안녕하세요!</p>
<button onclick="changeText()">텍스트 바꾸기</button>

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

 

2. document.getElementsByClassName(className)

특정 클래스명을 가진 모든 요소를 HTMLCollection으로 반환합니다.

<p class="item">아이템 1</p>
<p class="item">아이템 2</p>
<button onclick="highlightItems()">강조</button>

<script>
  function highlightItems() {
    const items = document.getElementsByClassName("item");
    for (let i = 0; i < items.length; i++) {
      items[i].style.color = "red";
    }
  }
</script>

 

3. document.querySelector(selector)

CSS 선택자 문법으로 첫 번째 일치하는 요소를 선택합니다.

<p class="desc">첫 번째 문장</p>
<p class="desc">두 번째 문장</p>
<button onclick="updateFirst()">첫 번째만 바꾸기</button>

<script>
  function updateFirst() {
    document.querySelector(".desc").innerText = "바뀐 첫 문장!";
  }
</script>

 

4. document.createElement(tagName)

새로운 요소를 생성합니다.

<ul id="list">
  <li>기존 항목</li>
</ul>
<button onclick="addItem()">항목 추가</button>

<script>
  function addItem() {
    const newItem = document.createElement("li");
    newItem.innerText = "새 항목";
    document.getElementById("list").appendChild(newItem);
  }
</script>

 

5. element.setAttribute(name, value)

요소에 속성을 추가하거나 변경합니다

<img id="image" src="default.jpg" alt="이미지">
<button onclick="changeImage()">이미지 변경</button>

<script>
  function changeImage() {
    document.getElementById("image").setAttribute("src", "newimage.jpg");
  }
</script>

 

6. element.remove()

요소를 DOM에서 제거합니다.

<p id="notice">이 문장은 곧 사라집니다.</p>
<button onclick="removeText()">삭제</button>

<script>
  function removeText() {
    document.getElementById("notice").remove();
  }
</script>

 

 

3. Node 메서드

Node 메서드는 DOM(Document Object Model)에서 노드 간의 관계를 조작하거나 탐색할 수 있게 해주는 메서드입니다. 웹 페이지는 HTML 요소들이 계층적으로 연결된 트리 구조로 이루어져 있으며, 각 요소들은 Node로 간주됩니다. 자바스크립트에서 이 노드들을 추가하거나, 삭제하거나, 위치를 변경하거나, 자식/부모 노드로 이동할 때 주로 사용되는 메서드들이 있습니다. 모든 HTML 요소는 Node를 상속받기 때문에 이 메서드들은 대부분의 DOM 요소에 사용할 수 있습니다.

 

. appendChild()

부모 노드에 자식 노드를 추가합니다.

<div id="box"></div>
<script>
  const div = document.getElementById("box");
  const p = document.createElement("p");
  p.innerText = "새 문단 추가!";
  div.appendChild(p);
</script>

 

2. removeChild()

부모 노드에서 특정 자식 노드를 제거합니다.

<ul id="list">
  <li id="item1">첫 번째 항목</li>
</ul>
<script>
  const ul = document.getElementById("list");
  const li = document.getElementById("item1");
  ul.removeChild(li);  // li 제거
</script>

 

3. replaceChild()

자식 노드를 다른 노드로 교체합니다.

<div id="wrapper">
  <p id="old">기존 문단</p>
</div>
<script>
  const wrapper = document.getElementById("wrapper");
  const oldNode = document.getElementById("old");

  const newNode = document.createElement("p");
  newNode.innerText = "새로운 문단입니다";

  wrapper.replaceChild(newNode, oldNode);
</script>

 

4. insertBefore()

특정 자식 노드 앞에 새로운 노드를 삽입합니다.

<ul id="fruits">
  <li>바나나</li>
</ul>
<script>
  const ul = document.getElementById("fruits");
  const newItem = document.createElement("li");
  newItem.innerText = "사과";

  const existingItem = ul.firstElementChild;
  ul.insertBefore(newItem, existingItem); // 사과가 바나나 앞에 추가됨
</script>

 

5. cloneNode(deep)

노드를 복제합니다. true일 경우 자식 노드까지 복제합니다.

<div id="original">
  <p>복제할 내용</p>
</div>
<script>
  const original = document.getElementById("original");
  const clone = original.cloneNode(true); // 깊은 복사

  document.body.appendChild(clone);
</script>