DOM 이란?
-
문서객체모델 Document Object Model
객체 지향 모델로써 구조화된 문서를 표현하는 형식
줄글로 되어있는 문서를 이미지처럼 트리로 바꿔주는 방식이라고 이해하면 좋다.
-
HTML 문서에 대한 인터페이스
DOM은 XML이나 HTML문서의 프로그래밍 인터페이스입니다.
DOM은 문서의 구조화된 표현을 제공하여, 프로그래밍 언어가 문서구조, 스타일, 내용 등을 변경할 수 있게 합니다. -
DOM의 종류
HTML DOM
HTML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의
모든 HTML 요소는 HTML DOM 을 통해서 접근 가능하다.XML DOM
XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의
모든 XML 요소는 XML DOM 을 통해서 접근 가능하다.분류 설명 Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 XML DOM XML 문서를 위한 DOM 모델
- Document 객체
Document 객체는 웹페이지를 의미합니다.
웹페이지에 존재하는 HTML요소에 접근하고자 할때는 반드시 document 객체부터 시작해야 합니다.
-
Document 메소드
Document 객체는 다양한 메소드를 가지고 있습니다.
그 중 HTML 요소와 관련된 작업을 도와주는 메소드로는HTML 요소를 선택하는 메소드
HTML 요소를 생성하는 메소드
HTML 요소에 이벤트 핸들러 추가하는 메소드
HTML 객체를 선택하는 메소드
-
HTML 요소 선택자
새로운 HTML 요소를 선택하기 위해 제공되는 메소드메소드 메소드설명 documnet.getElementById() 해당 아이디의 요소를 선택 documnet.getElementByClassName() 해당 클래스에 속한 요소를 모두 선택 document.getElementByName() 해당 name 속성값을 가지는 요소를 모두 선택 document.querySelectorAll() 해당선택자로 선택되는 요소를 모두 선택 document.querySelector() 해당 선택자로 선택되는 요소를 1개 선택
-
HTML 요소 생성자
HTML 요소를 생성하기 위해 제공되는 메소드메소드 메소드설명 차이점 document.createElement() 지정된 HTML 요소를 생성 html 오브젝트를 생성함 documnet.write() HTML 출력스트림을 통해 텍스트를 출력 단순히 텍스트를 출력함
-
HTML 이벤트 핸들러 추가
HTML 요소에 이벤트핸들러를 추가하기 위해 제공되는 속성메소드 메소드설명 요소.onclick() = function(){} 마우스클릭이벤트와연결될이벤트핸들러
-
DOM 생성 과정
HTML 문서가 DOM의 트리구조로 변환됩니다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트기초</title>
</head>
<body>
<article>
<header>header</header>
<section>
<header>header 1</header>
section1
</section>
</article>
</body>
</html>
자바스크립트와 DOM
-
요소 선택
자바스크립트에서 HTML 요소를 선택하는 메소드는 다음과 같습니다.
// 해당 아이디의 요소를 선택 document.getElementById() // 해당 선택자로 선택되는 요소를 1개 선택 document.querySelector다음은 요소를 모두 선택하여 배열로 반환합니다.
// 해당 클래스에 속한 요소를 모두 선택 document.getElementsByClassName() // 해당 name 속성값을 가지는 요소를 모두 선택 document.getElementByName() // 해당 선택자로 선택되는 요소를 모두 선택 document.querySelectorAll()
주의사항
document. querySelector(), document.querySelectorAll() 메소드의 경우는 id라면 #, class라면 .을 붙여야합니다. 마치 CSS 선택자처럼 사용해야 DOM 요소를 제대로 찾을 수 있습니다.메소드별로 반환하는 값이 배열인지 DOM 요소 단독인지 확인해보고 실습을 진행해보세요.
DOM 요소 선택하기 응용
다음 이미지를 살펴보면
document.querySelector를 통해 복잡한 구조의 요소를 선택하는 예시가 나와있습니다.
예를 들어 본 이미지처럼 클래스가 category tMargin인 요소를 선택하려면, 아래와 같은 형태로 입력 해야합니다.
document.querySelector('.category.tMargin')
또, 해당 클래스 이름을 가진 요소 아래 있는 ribbon을 선택하고 싶다면 아래와 같이 작성합니다.document.querySelector('.category.tMargin > .ribbon')
만약 a태그의 href 속성에 접근하고자 한다면 아래와 같이 작성합니다.
document.querySelector('.category.tMargin > .ribbon > a').href
-
스타일 변경
document.style
//아이디가 "even"인 요소를 선택 var selectedItem = document.getElementById("even"); //선택된 요소의 텍스트 색상을 변경 selectedItem.style.color="red";
-
내용변경
document.innerHTML
// 아이디가 "text"인 요소를 선택 var str = document.getElementById("text"); //선택된 요소의 내용을 변경 str.innerHTML=＂요소의내용을바꿉니다"
앞서 소개한 메소드를 한번씩 직접 사용해보고 실습으로 가봅시다!
다음 사이트에 방문하여 직접 요소를 선택했을 때, 어떤 모양의 값을 반환하는지 꼭 확인해보세요.https://www.w3.org/
(W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직입니다.)
Node 객체
-
Node와 노드트리
노드란, HTML DOM 에서 정보를 저장하는 계층적 단위
노드트리란, 노드들의 집합으로 노드 간의 관계를 나타냅니다.
자바스크립트에서는 HTML DOM 을 이용하여 노드트리에 포함된 모든 노드에 접근할 수 있습니다.
-
Node와 노드트리
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있습니다. -
노드의 종류
- 문서노드 (Documnet node)
HTML 문서 전체를 나타내는 노드 - 요소노드 (Element node)
모든 HTML노드는 요소노드입니다.
속성 노드를 가질 수 있는 유일한 노드입니다. - 주석노드 (Comment node)
HTML 문서의 모든 주석은 주석노드에 속합니다.
자바스크립트에서 굳이 변경할 이유가 없어서 잘 사용하진 않습니다.
- 속성노드 (Attribute node)
모든 html요소의 속성은 속성 노드이며, 요소노드에 관한 정보를 가집니다.
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않습니다. - 텍스트노드
HTML 문서의 모든 텍스트는 텍스트 노드
- 문서노드 (Documnet node)
-
노드의 값
자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.
노드에 대한 정보는 다음과 같은 프로퍼티로 접근할 수 있습니다.
nodeNamenodeValuenodeType- nodeName으로 노드값에 접근하기 (+childNode 사용하기)
// 1. document 의 자식 노드들 중 두번째 노드를 node1변수에 할당하도록 코드를 작성하세요. var node1 = document.childNodes[1]; // 2. node1의 자식 노드들 중 세번째 노드를 node2변수에 할당하도록 코드를 작성하세요. var node2 = node1.childNodes[2]; // 3. node2의 자식 노드들 중 두번째 노드를 node3변수에 할당하도록 코드를 작성하세요. var node3 = node2.childNodes[1]; // 4. node1, node2, node3의 이름을 nodeName을 이용해 출력하도록 코드를 작성하세요. document.write(node1.nodeName); document.write(node2.nodeName); document.write(node3.nodeName); //5. `node2`의 자식 변수들을 모두 출력해봅니다. console.log(node2.childNodes); // document.childNodes에서 [head, text, body]와 같이 Node가 출력되는 것은 head와 body 사이에 “/n” 줄바꿈 문자가 들어갔기 때문입니다.
- nodeValue로 노드값에 접근하기 (+childNode 사용하기)
// 먼저 실행 버튼을 눌러 초기 값을 확인하세요 // 1. document.getElementById()를 사용하여 아이디가 apple인 요소를 선택하도록 코드를 작성하세요. var apple_node = document.getElementById('apple'); // 2. firstChild.nodeValue를 사용하여 node의 첫번째 자식 노드의 값을 `apple_pie`로 변경하도록 코드를 작성하세요. apple_node.firstChild.nodeValue = 'apple_pie'; // 3. 실행 버튼을 눌러 바뀐 값을 확인합니다..- nodeType으로 노드값에 접근하기 (+childNode 사용하기)
// 1. 아이디가 apple인 요소의 첫번째 자식 노드를 선택하도록 코드를 작성하세요. var apple_node = document.getElementById('apple').childNodes[0]; // 2. apple_node의 값을 변수에 할당하도록 코드를 작성하세요. var apple_node_value = apple_node.nodeValue; // 3. apple_node의 타입을 변수에 할당하도록 코드를 작성하세요. var apple_node_type = apple_node.nodeType; // 4. apple_node의 값과 타입을 출력하도록 코드를 작성하세요. document.write(apple_node_value); document.write(apple_node_type);
nodeType 프로퍼티 값
nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현됩니다.대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같습니다.
요소 노드:1 속성 노드: 2 텍스트 노드: 3 주석 노드: 8 문서 노드: 9
이벤트
- 이벤트란
웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생
자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할수있다. - 이벤트 타입
발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체등)
- 이벤트핸들러
이벤트가 발생했을때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹브라우저는 그 요소에 등록된 이벤트핸들러를 실행시킵니다
// 이 함수는 HTML문서가 로드될 때 실행됨
window.onload = function(){
//아이디가"text"인요소를선택함.
var text = document.getElementById("text");
text.innerHTML = "HTML문서가로드되었습니다.";
} <div name="text" class="text" id="text">NULL</div>
<button onclick="this.innerText = '성공입니다'">클릭하세요!</button>용어사전
객체지향모델
프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라,
프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고
이들의 상호작용으로 서술하는 방식이다.
객체란
객체란 하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음으로 봐야 한다.
구조화된 표현
XML