DOM의 기초 개요
DOM (문서 객체 모델)
문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.
즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.
DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다.
위에 있는 코드를 트리 구조로 표현 하면
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있습니다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있습니다.
- document node (문서 노드)
- element node (요소 노드)
- attribute node (속성 노드)
- text node (텍스트 노드)
DOM의 데이터 타입
프로퍼티(property) : DOM 객체의 멤버 변수입니다. HTML 태그의 속성을 반영합니다.
메소드(method) : DOM 객체의 멤버 함수입니다. HTML 태그를 제어합니다.
컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열입니다. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가집니다.
이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가집니다.
스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능합니다.
이제부터 DOM의 중요한 데이터 타입들에 대해 알아보도록 하겠습니다. 데이터 타입에는 여러 개가 있는데, 데이터 타입은 객체이기 때문에 각각 프로퍼티와 메소드를 가지고 있습니다.
DOM CRUD(Create, Read, Update and Delete)
document 객체에는 많은 속성과 메서드들이 존재하는 지금은 가장많이 쓰이고 중요한 CRUD에대해 알아보겠습니다.
CREATE
const tweetDiv = document.createElement('div')
create 메서드를 사용해 tweetDiv 라는 변수를 만들어 div 태그를 만들었는데 지금 현 상태는 다른 div 태그는 트리구조로 연결되어있다고 가정할때 지금 만든 tweetDiv는 그림과 같이 아무것도 연결되지 않은 공중에 뜬 상태로 표현 할수 있습니다.
APPEND
공중에 뜬 tweetDiv 를 연결 시켜줘야하는데 이때 APPEND 메소드를 사용합니다.
document.body.append(tweetDiv)
이렇게 tweetDiv를 바디태그에 연결 시켜 주고 화면을 확인하면 아무것도 추가 되지 않은 것을 확인 할 수 있는데 잘못 입력한 것이아니라 바디태그 안에 들어간 것이지 컨테이너 박스 안에 입력 된것이 아니라 눈에 보이지는 않지만 바디태그안에 연결된 것을 확인 할 수 있습니다.
이제 이 APPEND 해준 것을 container 에 넣기 위해서는 container 를 먼저 찾고 textcontent 를 사용해 입력해 주면 됩니다.
READ
자바스크립트에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있습니다. 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수 있습니다. 그러나 DOM은 조금 특별한 방법을 사용해야 합니다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있습니다.
querySelctor
const oneTweet = document.querySelector('.tweet')
querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
HTML 문서에는 클래스 이름이 tweet 인 요소가 여러 개 있는 데, 변수 oneTweet 에 할당된 요소는 단 하나입니다. 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.
queryselector 과 비슷한 queryselectorall 메서드도 있는데 이매서드는
const tweets = document.querySelectorAll('.tweet')
위에 코드는 첫번째 앨리먼트(요소)를 조회하지만 all이붙으면 클래스 이름이 tweet 인 모든 HTML요소를 유사 배열로 받아오게 됩니다.
이 두매서드는 값을 가져올때 배열을 가져오는데 이때 진짜 배열은 아니고 유사배열로 가져 온다는 것을 꼭 기억해야합니다.!!
UPDATE
위에서는 CREATE, APPEND, READ를 통해 새로운 DOM 객체를 만들고, 기존의 DOM 객체에 붙이고, DOM 객체를 선택해서 조회하는 방법을 학습했습니다. oneDiv라는 이름의 div 요소를 만들어 보겠습니다.
UPDATE에서는 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. 먼저, textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
const container = document.querySelector('#container')
container.append(oneDiv)
div 엘리먼트를 conainer 에 append 했을때 css스타일링 적용을 위해 class 를 추가해 append contianer의 자식요소로 추가가 된 것을 확인 할 수 있습니다.
DELETE
삭제하는 방법에도 여러 가지가 있습니다. 먼저 삭제하려는 요소의 위치를 알고 있는 경우에 사용하는 방법입니다. 앞서 생성하고 추가한 tweetDiv 를 삭제합니다. remove 메서드를 사용하겠습니다.
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
//container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거합니다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
// 클래스 이름이 tweet인 요소만 찾아서 제거합니다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기 위한 방법은 여러 가지가 있습니다. 자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 요소를 하나만 남기게 할 수도 있습니다.
