JavaScript - DOM 조작 방법

요소 찾기

• document.getElementById("아이디"): 요소 ID로 요소 찾기
• document.getElementByTagName("태그 이름"): 태그 이름으로 요소 찾기
• document.getElementByClassName("클래스 이름"): 클래스 이름으로 요소 찾기
• document.querySelectorAll("선택자"): CSS 선택자 전부 찾기
• document.querySelector("선택자"): CSS 선택자 중 첫 번째 하나만 찾기

 

요소 조회

선택한 DOM 요소를 조회할 수 있는 속성으로 두 가지가 있다.

• textContent - 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값 
• innerHTML - 선택한 요소의 HTML 태그를 그대로 제공하여 보안에 취약(사용자로부터 전달받은 콘텐츠를 추가할 때는 사용하지 않는 것이 좋음)

const content = document.getElementsByTagName('p')[0];

content.textContent;  // Simple HTML Text
content.innerHTML;    // Simple <b>HTML</b> Text

 

요소 수정

선택한 요소를 수정할 때는 새로운 값을 조회한 그대로 할당하면 된다.

content.textContent = "Modified HTML file";
content.innerHTML = "Modified <i>HTML</i> file";

 

요소 생성 및 추가

createElement를 사용하여 새로운 요소를 만든다.

// 노드 생성
const p1 = document.createElement('p');
const p2 = document.createElement('p');

// 노드에 새로운 컨텐츠를 대입
p1.textContent = "foo";
p2.textContent = "bar";

이렇게 만들어진 요소는 메모리에만 존재한다. 메소드를 생성하여 DOM에 추가해야 한다.

// 요소를 추가할 부모 요소
const parent = document.getElementById("parent");

// 요소를 부모 요소의 자식 요소로 추가 
// 이미 요소가 존재할 경우 마지막 자식 요소로 추가됨
parent.appendChild(p2);

// 부모 요소의 첫 번째 자식 선택
const firstChild = parent.childNodes[0];

// 삽입할 자식 요소를 두 번째 파라미터로 선택한 자식 요소의 앞에 삽입
// parent.insertBefore(삽입할 자식 요소, 삽입할 위치)
parent.insertBefore(p1, firstChild);

createTextNode를 사용하여 텍스트 노드를 추가할 수도 있다

// ul 태그 아래에 새로운 li 요소를 생성하기
let textToAdd = document.createTextNode("추가할 텍스트");
let liToAdd = document.createElement("li");
listToAdd.appendChild(textToAdd);
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.appendChild(listToAdd);

 

요소 삭제

// ul 태그 아래에 존재하는 두 번째 li 요소를 삭제
let itemToRemove = document.getElementsByTagName("li")[1];
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.removeChild(itemToRemove);

 

요소 교체

Node.replaceChild() 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체한다.

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 텅빈 요소 노드를 하나 생성 (ID도, 속성도, 컨텐츠도 없음)
let sp1 = document.createElement("span");

// 'newSpan'이란 id 속성을 부여
sp1.id = "newSpan";

// 새로운 요소를 위한 컨텐츠를 생성
let sp1_content = document.createTextNode("컨텐츠 생성");

// 컨텐츠를 생성한 요소에 붙임
sp1.appendChild(sp1_content);

// DOM에 존재하던, 교체돼야 할 노드를 찾기
let sp2 = document.getElementById("childSpan");
let parentDiv = sp2.parentNode;

// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체
parentDiv.replaceChild(sp1, sp2);

// 결과:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>