DOM 조작

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.
</div>

브라우저는 HTML태그를 파싱하면서 div요소노드를 DOM트리에 추가하고 요소노드와 CSS를 연결하여 화면에 랜더링하여 보여준다.

div태그 없이 자바스크립트로 div요소노드를 생성하여 DOM에 추가함으로써 위와 같은 작업을 할 수 있다.

노드를 생성하는 2가지 방법
1. 요소노드, document.createElement(tag)
2. 텍스트노드, document.createTextNode(text)

요소노드 꾸미기

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

생성된 div 요소노드는 DOM트리에 추가되어야 랜더링되어 화면에 보이게 된다.

DOM 노드 추가메서드

div가 페이지에 보이게 하려면 DOM트리 어딘가에 추가되어야 한다.

elem.append(div);

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

  document.body.append(div); // document.body에 추가
</script>

노드 추가메서드

node.append(노드나 문자열) – 노드나 문자열을 node끝에 삽입
node.prepend(노드나 문자열) – 노드나 문자열을 node맨 앞에 삽입
node.before(노드나 문자열) – 노드나 문자열을 node이전에 삽입
node.after(노드나 문자열) – 노드나 문자열을 node다음에 삽입
node.replaceWith(노드나 문자열) – node를 새로운 노드나 문자열로 대체

문자열을 사용하주면 텍스트노드가 만들어진다.

window['div-space'].before('안녕하세요',document.createElement('hr'));

메소드에 여러개의 인자들을 사용가능하며 배열을 스프레드문법과 함께 사용할 수 있다.

let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";
document.body.append(div);
document.body.prepend(div);

document.body.append(div);구문으로 생성된 div는 DOM에 추가되어 화면에 보인다. document.body.prepend(div);구문은 새롭게 DOM에 추가하는 것이 아니고 div가 참조하는 요소노드의 위치를 이동시키는 것이다.

parentElem.appendChild(node)
parentElem.insertBefore(node, nextSibling)
parentElem.replaceChild(node, oldChild)
parentElem.removeChild(node)

위 메소드들은 오래된 메소드로 사용하지 않는것이 좋다.