“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”- Jef Raskin
맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도
반응형
"다시 기초부터 잡아"
DOM(Document Object Model)이 머야!
HTML은 모든 사람들에게 프로그래밍을 처음 접하게 되면 접하게 됩니다. 그리고 계속 배우면서 쓰다 보면 자바스크립트 등을 사용을 하면서 다양한 것들을 활용하여 원하는 기능을 도출해야 합니다. 이번에 저 또한 웹 쪽으로 다양한 기능을 연동하여 만들어야 하다 보니 DOM에 대한 개념들을 다시금 한번 더 제대로 잡아야 하는 이유가 생겨 한번 정리를 해보려고 합니다.
목차
DOM(Document Object Model)
잠깐! HTML에 대해서 알아보죠
HTML(HyperText Markup Language)는 우리가 흔히 사용을 하고 있는 웹페이지를 만들기 위해 사용하고 있는 기본 언어라고 생각하면 됩니다. 여기서 이 글을 보는 분들 중 HTML을 왜 언어라고 표현하는지에대해 불편하실 수 있지만 엄연히 Language가 붙는 마크업(Markup) 언어입니다.
주로 우리가 인터넷에서 사용을 할 때 아래와 같이 많이 사용을 하고 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>OdinBOX 문세 제목</title>
<meta charset="UTF-8">
</head>
<body>
<p>안녕하세요! OdinBOX입니다!</p>
</body>
</html>자, 그럼 DOM에 대해서 설명해드릴께요!
DOM은 HTML, XML 문서의 프로그래밍 인터페이스(interface)입니다. 인터페이스라는 뜻에도 알 수 있듯이 프로그래밍 언어가 구조에 접근할 수 있는 방법을 제공을 하고 문서 구조, 스타일, 내용 등을 변경을 할 수 있도록 도와주고 있습니다. 웹페이지도 위 HTML을 기반한 문서의 객체 기반 표현 방식이라고 보면 됩니다. 그래서 html의 경우 부모라고 생각을 하면 되고 html 안에 포함된 태그들은 자식이라고 생각을 하시면 됩니다.
DOM의 구성요소가 이렇게 구성이 됩니다!
문서 노드(Document Node)
- 트리의 최상위 노드이며 전체 문서입니다. 다른 모든 노드는 이 문서 노드의 자식입니다.
제어 방식 : document 객체로 접근한다.엘리먼트 노드(Element Nodes)
- HTML 태그입니다. 엘리먼트 노드는 또 자식 노드를 가지고 있을 수 있습니다.
접근방법은 아래와 같습니다.
document.getElementById()
document.querySelector()
위 방법 외 다양한 방법으로도 접근 할 수 있습니다.속성 노드(Attribute Nodes)
- 엘리먼트 속성입니다. 바로 이런 경우 아래의 소스코드를 한번 봅시다. <p> 태그 안에 style='color:red;'를 넣었습니다. 바로 속성 노드는 해당 엘리먼트의 속성입니다.
<p style='color:red;'>안녕하세요!</p>접근 방법은 아래와 같습니다.
element.getAttribute()
element.setAttribute()
외 다양한 방법으로 접근할 수 있습니다.텍스트 노드(Text Nodes)
- 엘리먼트 실제 텍스트 콘텐츠를 말합니다. 아래 코드를 보면, p태그 안 안녕하세요! 에 해당하는 부분이 텍스트 노드입니다.
<p style='color:red;'>안녕하세요!</p>
접근 방법은 아래와 같습니다.
element.textContent
element.innerText
와 같이 다양한 방법으로 접근 할 수 있습니다.예시로 보는 DOM 조작
우리가 흔히 사용하는 DOM에 대해서 개념은 이 정도까지 정리를 하면 기본은 알고 있다고 생각합니다. 그럼 예시를 통해서 한번 간단하게 DOM 조작에 대해서 알아보도록 하겠습니다. 아래 소스코드에 주석으로 설명을 했으니 한번 확인하시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<title>OdinBOX Page.</title>
</head>
<body>
<h1>OdinBOX의 블로그에 오신 것을 환영합니다</h1>
<p>https://odinbox.co.kr/</p>
</body>
</html>
<script>
// 1. 원하는 요소 선택방법
var select = document.querySelector('h1'); // h1 요소를 선택합니다.
// 2. 요소 생성 및 추가방법
var newDom = document.createElement('div'); // div를 새롭게 만듭니다.
newDom.textContent = '저의 블로그 글은 어떠신가요?'; // div 안 텍스트를 설정합니다.
document.body.appendChild(newDom); // body 안 새롭게 만든 div를 넣습니다.
// 3. 속성 수정
var textColor = document.querySelector('h1'); // h1 요소를 선택합니다.
textColor.setAttribute('color', 'red'); // h1 요소의 속성에서 color를 red로 변경합니다.
// 4. 이벤트 처리
var eventDom = document.querySelector('button'); // button 요소를 선택합니다.
eventDom.addEventListener('click', () => { alert('OdinBOX!!!!!'); }); // 버튼 클릭 시 알림을 처리합니다.
// 5. 요소 내용변경
var changeDom = document.querySelector('h1'); // h1 요소를 선택합니다.
changeDom.textContent = '오딘박스 최고!'; // h1 요소의 텍스트를 변경합니다.
// 6. 요소 삭제
var deleteDom = document.querySelector('.deleteNodes'); // deleteNodes라는 클래스를 삭제 하기 위해 선택합니다.
deleteDom.remove(); // 선택된 요쇼를 삭제합니다.
</script>여기서 조금 더 궁금했던 것들이 있어요!
웹을 개발을 할 때 Document 상태에 따라 제어를 해야 하는 경우가 있습니다. 이럴 때는 어떻게 해야 할지 한번 간단하게 알아보겠습니다. 이럴 때 바로 사용을 하는 것이 readyState라는 것을 사용을 하면 됩니다. 바로 아래와 같이 사용 예시를 간단하게 알아보겠습니다.
// DOMContentLoaded와 함께 사용을 합니다. (완전히 다 되었을 때)
document.addEventListener('DOMContentLoaded', () => {
if (document.readyState === 'loading') {
// 로딩중!
} else if (document.readyState === 'interactive') {
// 거의 다 되어가요!
} else if (document.readyState === 'complete') {
// 완료!
}
});
// load 함께 사용을 합니다. (완전히 다 되었을 때)
document.addEventListener('load', () => {
if (document.readyState === 'loading') {
// 로딩중!
} else if (document.readyState === 'interactive') {
// 거의 다 되어가요!
} else if (document.readyState === 'complete') {
// 완료!
}
});
// 문서의 로드 상태에 따라 함수를 실행하고 싶을 때
function onDocumentReady() {
}
if (document.readyState === 'complete') {
// 실행 할 함수
} else {
window.addEventListener('load', 실행할 함수);
}loading은 문서를 현재 불러오고 있는 상태일 때를 말합니다.
interactive는 문서를 완전히 불러왔을 때를 말합니다.
complte는 문서와 리소스를 모두 불러왔을 때를 말합니다.
마무리
DOM에 대해서 알아봤습니다. 개발자로 일을 하고 있지만 아직도 정말 많이 모르는 것들이 산더미로 쌓여있습니다. 이런 부분들은 기본개념부터 천천히 쌓고 경험을 통해 배워야 하는 것 같습니다. 아무리 좋은 이론이라고 하더라도 실제로 해보지 않으면 단순 이론에서 끝입니다. 혹시나 궁금한 사항이 있거나 수정할 내용 또는 이런 내용을 추가해 줬으면 좋겠다는 것이 있다면 댓글을 남겨주시면 답변드리도록 하겠습니다!