JavaScript DOM 요소 조작

🗓2020년 02월 28일 ∙ 🖊TutorialPost ∙ ⏳2분

DOM에 텍스트 및 마크업 요소를 추가하거나 제거하는 방법을 확인해 봅니다.

요소 조회

선택한 요소의 컨텐츠를 조회할 수 있는 두가지 프로퍼티가 있습니다.

  • textContent - 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값
  • innerHTML - 선택한 요소의 HTML 태그를 그대로 제공. 따라서 보안에 취약합니다. 사용자로부터 전달받은 콘텐츠를 추가할때는 사용하지 않는 것이 좋습니다.
const content = document.getElementsByTagName('p')[0];

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

요소 수정

선택한 요소의 내용을 수정할 때는 textContent 및 innerHTML 값에 새로운 값을 대입합니다.

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

새 요소 만들기

document.creatElement() 메서드를 이용해 새로운 요소를 만들 수 있습니다. 이렇게 만들어진 요소는 DOM에 추가하는 메서드를 사용해 추가하기 전까지는 DOM에 추가되지 않고 메모리에만 존재합니다.

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

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

만들어진 요소를 DOM에 추가하기

JavaScript를 이용해 만들어진 요소는 insertBefore() / appendChild() 메서드를 이용해 DOM에 추가할 수 있습니다.

/* appendChild() */
// 요소를 부모 요소의 자식 요소로 추가합니다. 
// 이미 요소가 존재할 경우 마지막 자식요소로 추가됩니다.
parent.appendChild(element);

/* insertBefore() */
// 부모 요소의 자식 요소로 선택한 요소를 삽입합니다. 이때 삽입할 위치를 선택할 수 있습니다.
// el - 삽입할 요소
// position - 삽입할 위치
parent.insertBefore(el, position)

예시

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

// 요소 추가
content.appendChild(p2);

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

// p1 자식 요소를 두번째 매개변수로 선택한 자식요소의 앞에 삽입합니다.
content.insertBefore(p1, firstChild);

또한 document.createTextNode() 메서드는 새로운 텍스트 노드를 생성합니다.

/* createTextNode() */
// 새로운 텍스트 노드를 생성합니다.
document.createTextNode("text");

예시

// ul 태그 아래에 새로운 li 요소를 생성하는 과정
var myText = document.createTextNode("앨리스");
var newLIEl = document.createElement("li");
newLIEl.appendChild(myText);

var ulPos = document.getElementsByTagName("ul")[0];
ulPos.appendChild(newLIEl);

요소 삭제하기

DOM에서 요소를 제거하기 위해서는 removeChild() 메서드를 이용합니다.

/* removeChild */
// target 요소를 parent에서 삭제한다.
parent.removeChild(target);

예시

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