[JS] DOM 다루는 방법에 대해 - 1

손규성·2022년 10월 30일

Dom다루기 JavaScript 프론트엔드

javascript

목록 보기

6/8

DOM(Document Object Model)?

문서 객체 모델(DOM)은 XML이나 HTML 문서의 프로그래밍 인터페이스이다.
문서의 구조화된 표현을 제공하고, 프로그래밍 언어가 접근하고 구조 내용, 스타일 등을 변경할 수 있도록 한다.

💡JavaScript와의 관계

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 실행할 수 있다.

HTML 요소 & 속성 추가 및 제거
모든 HTML 요소 & 속성 변경
모든 CSS 스타일 변경
HTML 이벤트 추가 및 반응

이러한 작업들을 수행할 때 사용되는 기본 문법은 아래와 같다.

JavaScript 문법

💡특정 요소 찾기

JavaScript를 사용해서 특정 요소에 접근하기 위해서는 아래 메서들을 사용해서 특정 태그에 접근해야 한다.

문법	설명
document.getElementById	주어진 ID와 일치하는 요소 하나를 반환
document.getElementsByClassName	주어진 Class명을 가진 요소들을 HTMLCollection에 담아 반환
document.getElementByTagName	주어진 Tag명을 가진 요소들을 HTMLCollection에 담아 반환
document.querySelector	주어진 선택자를 만족하는 요소 하나를 반환
document.querySelectorAll	주어진 선택자를 만족하는 모든 요소를 NodeList에 담아 반환

Example

HTML

<body> 
  <div id="first-div"> 첫 번째 div를 찾으셨군요! </div>
  <div class="second-div div-class"> 첫 번째 div를 찾으셨군요! </div>
  <div id="third-div" class="div-class"> 첫 번째 div를 찾으셨군요! </div>
</body>

JavaScript

const theFirst = document.getElementById('first-div');
console.log(theFirst.innerHTML);

getElementByID를 사용해서 document에서 'first-div'라는 아이디를 가진 요소를 선택해주고, 이를 theFirst 라는 변수에 할당해준다.
theFirst의 innerHTML을 콘솔에 출력해주면 첫 번째 div를 찾으셨군요!가 뜨게 된다.
마찬가지로 다른 div들도 선택해볼 수 있다.

JavaScript

const theFirst = document.getElementById('first-div');
console.log(theFirst.innerHTML);

const theSecond = document.getElementsByClassName('second-div');
console.log(theSecond.innerHTML);

const theThird= document.getElementById('third-div');
console.log(theThird.innerHTML);

하지만 이렇게 코드를 작성하게 되면 두 번째 div의 경우 값은 출력되지 않는다.
getElementsByClassName은 해당 class 값을 가진 모든 요소의 Node List를 가져오기 때문에 innerHTML으로 접근할 수 없다. 즉 getElementById와는 반환 값의 형태 자체가 아예 다른 것이다.
class값으로 특정 요소의 innerHTML 내용에 접근하는 방법은 아래와 같다.

const theFirst = document.getElementById('first-div');
console.log(theFirst.innerHTML);

const theSecond = document.getElementsByClassName('second-div')[0].innerHTML;
console.log(theSecond);
// theSecond[1].innerHTML;

const theThird= document.getElementById('third-div');
console.log(theThird.innerHTML);

List 내에서 원하는 인덱스 값을 입력하고, 해당 값의 innerHTML에 접근하면 된다.
현재는 List 길이가 짧아서 괜찮지만, 특별한 이유가 없다는 각 요소의 ID로 접근하는 것이 더 유용하다.
querySelector, querySelectorAll도 비슷한 메커니즘이지만, 클래스명이나 아이디 대신 요소의 CSS 선택자를 넣는 것이다.

💡새로운 요소 만들기

JavaScript를 새로운 요소를 만들기 위해서는 아래 메서드들을 사용하면 된다.

기능	문법	설명
생성	Node.createElement(tag)	새로운 노드 생성 (DOM에 추가 전까지는 메모리에만 존재)
추가	Node.appendChild(Node)	새 요소를 부모 요소의 자식 요소로 추가. (기존 노드 있는 경우 마지막 노드로 추가)
추가	Node.insertBefore(newNode, refNode)	새 요소를 부모 요소의 자식 요소로 추가. (refNode 전에 위치함)

HTML

    <body>
        <div id="first">1</div>
        <div id="second">2</div>
        <div id="third">3</div>
    </body>

JavaScript

const first = document.getElementById('first')
const second = document.getElementById('second')
const third = document.getElementById('third')

const x1 = document.createElement('span');
const x2 = document.createElement('span');
x1.textContent = 'Hello World!';
x2.innerHTML = 'JavaScript is fun!';

console.log(x1.innerHTML);
console.log(x2.innerHTML);

x1과 x2는 createElement를 통해 생성되었지만, 아직 append되지 않았으므로 DOM에는 존재하지 않고 메모리에만 존재하는 값이다. (콘솔에 출력하는 건 문제 없다)

x1.textContent = 'Hello World!';
x2.innerHTML = 'JavaScript is fun!';

first.appendChild(x1);
second.appendChild(x2);

const x3 = document.createElement('span');
const x4 = document.createElement('span');

x3.innerHTML = 'This is x3';
x4.innerHTML = 'This is x4';

first.appendChild(x3);
first.insertBefore(x4, x3);