오늘은 본격적으로 JS를 통해서 HTML을 조작하는 학습을 했다. DOM이란 Document Object Model의 약자이다. 문서를 구조화된 표현으로 나타내는 객체지향 모델이다. DOM이 구조적이라는 것을 확인하기 위해 console.dir(Document)를 콘솔에 입력하여 확인했다.
DOM을 통하여 본 document 객체의 구조는 다음과 같은 구조를 띈다.
출처 - 문서 객체 모델, 위키백과
마치 하나의 조직도와 같은 모습을 띈다. 이러한 구조를 트리구조라고 한다. 최상단의 Document를 시작으로 html, head - body 등의 구조로 이뤄진다. DOM을 통하여 Document 내의 수 많은 객체, 메소드 등을 다룰 수 있다. 조작할 수 있는 방법은 많으나 오늘은 CRUD를 우선 학습했다.
document.createElement('div')
createElement 메소드를 통해 'div' 요소를 만들 수 있다. JS는 하나의 값을 담기 위해 변수를 선언한다. html도 마찬가지로 변수를 선언하여 위의 div 요소를 할당해야 한다.
const divEl = document.createElement('div')
변수를 선언하여 할당했다 하더라도 아직 DOM 구조 트리에 나타나지 않았다. CREATE한 요소를 트리 구조에 연결하기 위해서 APPEND 하는 과정이 필요하다.
const divEl = document.createElement('div')
document.body.append(tweetDiv)
append 메소드를 통해서 body에 선언한 변수 divEl을 append 한다.
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 메소드 등도 있다.
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>
생성한 요소를 지울 수도 있다. 위에서 생성한 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를 통해 웹 기능을 구현하는 것이 가장 기초적이지만 모든 과정에 적용할 수 있는 것 같다. 내일까지 과제를 수행하면서 더 익숙해져야겠다.