[TIL] [JS/브라우저] DOM (1)

송현우·2022년 9월 13일
0

오늘의 공부

오늘은 본격적으로 JS를 통해서 HTML을 조작하는 학습을 했다. DOM이란 Document Object Model의 약자이다. 문서를 구조화된 표현으로 나타내는 객체지향 모델이다. DOM이 구조적이라는 것을 확인하기 위해 console.dir(Document)를 콘솔에 입력하여 확인했다.

DOM

DOM을 통하여 본 document 객체의 구조는 다음과 같은 구조를 띈다.

출처 - 문서 객체 모델, 위키백과

마치 하나의 조직도와 같은 모습을 띈다. 이러한 구조를 트리구조라고 한다. 최상단의 Document를 시작으로 html, head - body 등의 구조로 이뤄진다. DOM을 통하여 Document 내의 수 많은 객체, 메소드 등을 다룰 수 있다. 조작할 수 있는 방법은 많으나 오늘은 CRUD를 우선 학습했다.

CREATE

document.createElement('div')

createElement 메소드를 통해 'div' 요소를 만들 수 있다. JS는 하나의 값을 담기 위해 변수를 선언한다. html도 마찬가지로 변수를 선언하여 위의 div 요소를 할당해야 한다.

const divEl = document.createElement('div')

변수를 선언하여 할당했다 하더라도 아직 DOM 구조 트리에 나타나지 않았다. CREATE한 요소를 트리 구조에 연결하기 위해서 APPEND 하는 과정이 필요하다.

APPEND

const divEl = document.createElement('div')
document.body.append(tweetDiv)

append 메소드를 통해서 body에 선언한 변수 divEl을 append 한다.

READ

APPEND한 요소를 조회하기 위해선 querySelector의 인자로 셀렉터를 전달해야 한다. 셀렉터로 html 요소 (div, p 등등), id (#id명), class (.class명) 등이 있지만 앞의 세 가지가 가장 많이 사용된다.

const nameA = document.querySelector('.a')

위와 같이 '.a'를 호출하면 document의 요소 중 클래스 a를 가지는 첫 번째 인자를 호출한다.

const nameAs = document.querySelectorAll('.a')

위의 querySelector를 메소드를 사용하면 할당된 요소는 클래스 a를 가지는 첫 번째 요소 하나이지만, querySelectorAll를 사용하면 클래스 a가지는 요소를 모두 호출한다. 이렇게 조회하면 반복문을 사용할 수 있다. 다만 html 요소들은 배열은 아니며 배열형 객체의 모습을 한 것이다.

const nameA = document.querySelector('#a')
const getNameA = document.getElementById('a')

querySelector 뿐만 아니라 getElementById 메소드 등도 있다.

UPDATE

DOM을 통하여 HTML 요소를 조작할 뿐 아니라 변경할 수도 있다. 아래와 같이 textContent 메소드를 통해 요소의 텍스트를 변경하거나, add() 메소드를 통해 추가할 수도 있다.

const divEl = document.createElement('div')
document.body.append(tweetDiv)

divEl.textContent = 'text'
// <div>text</div>
divEl.classList.add('a')
// <div class = "a">text</div>

DELETE

생성한 요소를 지울 수도 있다. 위에서 생성한 divEL 요소를 삭제하면 다음과 같다.

divEl.remove()

삭제해야 할 요소를 정확히 안다면 지정하여 삭제할 수도 있지만 모든 요소를 삭제하거나 할 수 있다. 그렇다면 다음과 같이 alphabet 안의 모든 요소를 지울 수 있으며,

document.querySelector('#alphabet').innerHTML = '';

직접 해당하는 요소만 지울수 있도록 forEach, for, while 등등 반복문을 통해 반복할 수 있다.

const nameAs = document.querySelectorAll('.a')
nameAs.forEach(function(a){
    a.remove();
})

마무리

오늘은 DOM의 개념과 html을 조작하기 위해서 DOM의 구조를 어떻게 활용하는지 학습했다. 아직 과제를 진행중이지만 적극적으로 html 요소를 조작하는 과제도 수행 중이다. CRUD를 통해 웹 기능을 구현하는 것이 가장 기초적이지만 모든 과정에 적용할 수 있는 것 같다. 내일까지 과제를 수행하면서 더 익숙해져야겠다.

0개의 댓글