[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 2

[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1에 이어서 DOM과 관련된 내용들을 좀 더 살펴보자.

 

문서 객체 모델(The Document Object Model)은 웹페이지를 자유롭게 다루기 위해 웹페이지를 객체회 한 개념이고,

웹 페이지를 객체화한 각 요소요소들을 Node라고 부르고, 노드들 중에서 가장 상위 노드가 document 객체였다.

 

그래서 document 객체의 메소드를 활용하면 웹페이지의 상태나, 혹은 웹페이지 내의 다양한 노드에 접근할 수 있었는데

이번 포스트에서는 실제로 웹 페이지의 HTML을 자유롭게 다루는 메서드와 프로퍼티에 대해서 좀 더 정리해보고자 한다.

 

노드 생성하기

1. Html tag 노드 생성하기 (createElement 메서드)

// document.createElement(tagName);
const divElement = document.createElement('div');

document문서의 createElement(tagName) 메소드를 활용하면, 태그 노드를 생성할 수 있다.

 

2. Text 노드 생성하기 (createTextNode 메서드)

// document.createTextNode(text)
const textNode = document.createTextNode('Hello');

document문서의 createTextNode(text) 메소드를 활용하면, 메서드의 이름과 같이 text 노드를 생성할 수 있다.

text노드라고 하면, 말그대로 문자를 말한다.

 

예를 들어서 아래와 같은 HTML 태그가 있다면, 

<div>
  Hello
</div>

div태그는 태그 노드, Hello는 Text노드에 해당된다.

 

노드 다루기 (삽입, 삭제)

 

1. 노드 삽입하기 (appendChild 메서드)

[추가할 노드의 부모노드].appendChild([추가할 노드])

위와 같은 모양으로 appendChild메서드를 사용하면 노드 안에 노드를 삽입할 수 있다.

단, 메서드 이름에서도 알 수 있듯, 자식 노드로 삽입이 되기 때문에

추가할 노드의 부모 노드에 먼저 접근해야 한다.

let newH1 = document.createElement('h1');
let newTitle = document.createTextNode('Hi!?');

newH1.appendChild(newTitle);

위의 코드를 살펴보면, 일단 <h1>이라는 태그를 만들었고 그 안에 'Hi!?'라는 문자를 삽입해 준 코드다.

그래서 지금 newH1 변수에는 

<h1>Hi!?</h1>

위와 같은 노드가 담겨 있는 것이라고 볼 수 있다.

 

자, 그런데 아직 이 노드는 바로 웹페이지에 반영되는 것이 아니라, 가상의 공간에 생성되기만 한 것이다.

그래서 이미 존재하는 노드에 접근해서 생성한 노드를 한 번 더 삽입해 주어야 웹페이지에 반영되는 것이다.

 

만약 아래와 같은 HTML 코드가 있다고 가정해보자.

<div id="container">
  <h1 id="title">Hello</h1>
</div>

이렇게 작성되어있는 상황에서

let container = document.getElementById('container');

let newH1 = document.createElement('h1');
let newTitle = document.createTextNode('Hi!?');

newH1.appendChild(newTitle);
container.appendChild(newH1);

위와 같이 코드를 작성하면,

<div id="container">
  <h1 id="title">Hello</h1>
  <h1>Hi!?</h1>
</div>

이런 결과로 이어진다.

이렇게 appendChild를 이용해 노드를 삽입하면, 접근한 노드의 가장 마지막에 새로운 노드가 추가되는 방식이다.

 

2. 노드 삭제하기 (removeChild 메서드)

위 코드에 이어서 노드를 삭제하려면, removeChild 메서드를 사용하면 된다.

[삭제할 노드의 부모노드].removeChild(삭제할 노드)

이 메서드도 마찬가지로 먼저 부모 노드에 접근해서 자식 노드를 삭제해야 한다.

앞선 코드에서 title이라는 id를 가진 h1태그를 삭제하려면 다음과 같이 작성하면 된다.

let container = document.getElementById('container');

let newH1 = document.createElement('h1');
let newTitle = document.createTextNode('Hi!?');

newH1.appendChild(newTitle);
container.appendChild(newH1);

let oldTitle = document.getElementById('title');
container.removeChild(oldTitle);

이렇게 하면, 아래와 같이 title이라는 id를 가진 h1 태그는 사라지게 된다.

<div id="container">
  <h1>Hi!?</h1>
</div>

이렇게 삭제와 삽입을 잘 활용하면 태그의 내용을 자유롭게 수정할 수가 있다.

 

 

하지만, 초 간단 마법..! innerHTML!

하지만, 뭔가 createElement, createTextNode, appendChild, removeChild.. 뭔가 간단한 DOM을 수정하려고 해도 너무 많은 코드가 필요하고 심지어 복잡하기도 하다.

사실 노드에는 innerHTML이라는 파라미터가 존재한다.

말 그대로 해당 노드의 내부 HTML을 그대로 보여주는 것이다.

그래서 이 파라미터를 할당 연산자를 통해 새로운 HTML 태그 값을 문자열로 할당하면

앞에서 열심히 태그를 수정한 것보다 훨씬 더 간단하게 노드를 수정할 수가 있다.

한 가지 주의해야 될 부분은 당연히 파라미터 값을 재할당하는 것이기 때문에

HTML 코드를 추가하는 개념이 아니라, 대체해버린다는 점이다.

앞에서 열심히 작성한 코드를 innerHTML로 바꿔보면,

<div id="container">
  <h1 id="title">Hello</h1>
</div>

이런 HTML 코드가 있을 때,

let container = document.getElementById('container');

container.innerHTML = '<h1>Hi!?</h1>';

이렇게만 해주면

<div id="container">
  <h1>Hi!?</h1>
</div>

바로 이렇게 수정이 된다.

정말 간단하고 간편하게 노드를 수정할 수 있지만, 실제 서비스에 이런 로직을 구현하게 되면 보안 이슈가 생길 수 있는 치명적인 단점이 있다.

 

마무리

사실 이 밖에도 정말 많은 메서드들이 있는데, 모두를 다루기에는 어렵기 때문에 일단은 이 정도로 마무리하고 나중에 필요한 순간이 오면 더 정리해보도록 해야겠다.