JS DOM 간단 정리

 

안녕하세요. 

오늘은 간단명료한 DOM(Document Object Model) 포스팅입니다. 

 

DOM

 

DOM은 웹 페이지 내 모든 콘텐츠를 객체로 나타낸 것입니다. 

간단히 웹페이지 = document 라고 한다면, 이러한 document를 자유자재로 다르기 위해 객채화하여 구체한 개념입니다. 

 

웹 페이지를 객체화한 각 요소는 노드(Node)라고 부르며,  노드 중에서 가장 상위 노드가 document 객체입니다.  

 

---

Document 객체의 프로퍼티

 

document 객체를 활용하여 웹페이지의 상태와 모든 HTML 태그에 접근할 수 있으며 웹페이지 정보를 담은 프로퍼티들도 있습니다. 

이 포스팅에서는 언급정도만 하고, 필요한 태그는 아래 MDM에서 찾아쓰면 좋을 것 같습니다. 

 

https://developer.mozilla.org/ko/docs/Web/API/Document

Document - Web API | MDN

 

---

HTML 태그(노드) 선택하기

 

메소드를 사용하여 웹 페이지 내의 태그들에 접근할 수도 있습니다. 

주요 메소드는 다음과 같습니다. 

 

// 파라미터로 전달한 태그이름을 가진 모든 태그들을 배열로 반환
document.getElementsByTagName('태그이름')

// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById('아이디')

// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 배열로 반환
document.getElementsByClassName('클래스')

// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementByName('name')

// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
document.querySelector('선택자')

// 파라미터로 전달한 선택자에 맞는 모든 태그들을 배열로 반환
document.querySelectorAll('선택자')

 

노드 생성하기

 

1. HTML tag 노드 생성하기
사용 메서드 : createElement

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

 

2. Text 노드 생성하기

사용 메서드 :  createTextNode

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

 

위와 같은 과정을 거치면 다음과 같은 HTML 태그가 생성된 것입니다. 

<div>
  Hello
</div>

 

노드 삽입하기

 

1. 노드 삽입

사용 메서드 : appendChild

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

주의할 점 : 자식노드로 삽입되므로 부모노드에 먼저 접근 필요

let newH2 = document.createElement('h2');
let greeting = document.createTextNode('Hi, Dragon');

newH2.appendChild(greeting);

위 코드와 같이 작성하면, 현재 newH2 변수에는 

<h2>Hi, Dragon</h2>

같은 노드가 담겨 있는 것입니다. 

 

여기서 중요한 것은 이 노드는 아직 웹페이지에 반영되지 않는 상태라는 것입니다. 

현재 해당 노드는 가상 공간에 있는 것으로, 웹페이지에 삽입하는 과정이 필요합니다. 

 

HTML 코드

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

위와 같이 HTML 코드가 있다면  JS 코드를 아래와 같이 작성해야 웹페이지에 삽입될 것입니다. 

 

JS 코드

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

let newH2 = document.createElement('h2');
let greeting = document.createTextNode('Hi, Dragon');

newH2.appendChild(greeting);
container.appendChild(newH2);

 

결과적으로는 아래와 같은 HTML 코드가 됩니다. 

결과 HTML 코드

<div id="container">
  <h1 id="title">Hello</h1>
  <h2>Hi, dragon</h2>
</div>

 

다음시간에 작성할 토픽들 ㅎㅎ

 

노드 삭제하기

 

innerHTML