DOM_2. CRUD와 메소드

CRUD를 이용한 접근

DOM의 메소드를 알아보기 위해 CRUD로 접근해 보자. CRUD란 생성(CREATE), 조회(READ), 갱신(UPDATE), 삭제(DELETE)의 약자로 대부분의 소프트웨어가 가지는 기본 데이터 처리 기능이다. 이러한 개념은 소프트웨어 개발 시 최소 요구사항에 대한 가이드라인이 될 수 있으며, 새롭게 언어를 배우려는 사람 또한 CRUD를 기반으로 기초 기능을 학습할 수 있다.

CREATE

DOM에서 가장 기본적인 기능은 바로 HTML 엘리먼트를 생성하는 것이다. 자바스크립트에서 div 요소를 생성하는 방법은 다음과 같다.

const divElement = document.createElement('div')

엘리먼트 생성 메소드의 기본적인 모양은 dot notaion을 사용해 document 객체에 괄호 안의 요소를 추가하는 모습이다. 그러나 이러한 생성만으로는 아직까지 화면에 div 요소가 보이지 않는다. 그 이유는 다음에서 설명할 append 를 아직 하지 않았기 때문이다.

document.body.append(divElement)

append 메소드는 변수 divElement를 body의 마지막에 추가한다. 만약 prepend 메소드를 사용했다면, divElement는 body의 첫 번째에 추가된다. 다음으로 엘리먼트를 조회하는 방법을 알아보자.

READ

DOM에서 엘리먼트를 조회하기 위해서는 class나 id와 같은 CSS의 선택자(selector)를 사용한다. 이러한 조회를 위한 메소드가 바로 querySelector로 다음과 같이 사용한다.

const oneNotice = document.querySelector('.notice')

위 예시와 같이 querySelector의 인자로 클래스 'notice'를 입력하면, 같은 클래스를 가진 HTML 요소 중 첫 번째 엘리먼트를 조회한다. 이와 비슷한 메소드로 querySelectorAll이 있으며, querySelector와 다르게 같은 클래스나 아이디를 가진 모든 엘리먼트를 '유사 배열' 형태로 조회한다.

document.getElementById('container')

위와 같은 get을 이용한 메소드 또한 조회를 위해 사용된다. 이러한 방식은 querySelector에 비해 빠르다는 장점이 있으나, querySelector가 더욱 복잡하고 구체적인 선택이 가능하므로 최근에는 querySelector가 더 자주 사용된다고 한다.

UPDATE

다음은 DOM 엘리먼트의 갱신을 위한 메소드를 알아보자.

oneDiv.textContent = 'text here';
oneDiv.classList.add('container')
console.log(oneDiv) // <div class="container">text here</div>

위와 같이 textContent 메소드는 새롭게 텍스트를 추가해주며, classList.add 메소드를 이용하면 oneDiv에 container 라는 클래스가 추가된다. 여기서 textContent 메소드 외에 텍스트 삽입에 사용되는 메소드는 다음과 같다.

• innerHTML: 해당 엘리먼트의 HTML을 읽어오거나 재설정 할 수 있다. 이러한 방식은 태그를 그대로 포함하며, XSS(Cross-Site Scripting) 공격에 취약한 것으로 나타나 보안상 문제가 있다.
• innerText: 해당 엘리먼트 내에서 사용자에게 보이는 텍스트를 읽어온다. 특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용하다.
• textContent: 태그와 상관없이 해당 노드가 가진 텍스트를 읽어온다. 성능과 보안상의 장점이 있으므로 사용이 권장된다.

DELETE

마지막으로 엘리먼트 삭제를 위한 메소드이다.

oneDiv.remove() 

위와 같은 방식으로 생성한 엘리먼트 하나를 삭제할 수 있다. 만약 여러 개의 자식 엘리먼트를 삭제하려면 어떻게 할까? 다음과 같은 방법을 사용할 수 있다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

위 예시는 자식 엘리먼트가 모두 사라질 때까지 removeChild 메소드를 사용하여 첫 번째 자식 엘리먼트를 삭제한다.

참고
MDN - DOM