DOM?
- 문서 객체 모델(Document Object Model)
- 객체 지향 모델로써 구조화된 문서를 표현하는 형식
우리가 사용할 것은 HTML DOM!
- 모든 HTML 요소는 HTML DOM으로 접근 가능
Document
Document 객체
- Document 객체는 웹페이지를 의미한다.
- 웹 페이지에 존재하는 HTML요소에 접근할 때는 Document 객체로 시작해야한다.
Document 메소드
- HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공
1. HTML 요소의 선택
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.querySelectorAll()
document.querySelector()2. HTML 요소의 생성
document.createElement() // HTML요소를 생성
document.write() // TEXT만 출력!!3. HTML 이벤트 핸들러 추가
요소.onclick = function(){}4. HTML 객체의 선택
DOM의 트리구조
- HTML -> DOM
<!DOCTYPE html>
<html>
<head>
<title>TITLE!!</title>
</head>
<body>
<article>
<header>HEADER!!</header>
<section>
<header>SECTION HEADER!</header>
section1
</section>
</article>
</body>
</html>위와 같은 코드가 있다면
- HTML
- head
- title
- "TITLE!!"
- title
- body
- article
- header
- "SECTION HEADER!"
- section
- header
- "section1"
- header
- article
- head
이런 순서가 DOM 트리 구조!
자바스크립트와 DOM
1. DOM 요소의 선택
document.getElementById("")//HTML 태그
document.getElementsByClassName("") // 클래스
document.getElementsByTagName("") // ID
document.getElementsByName("") // 속성값2. DOM 요소의 스타일 변경
var item = document.getElementById("even");
item.style.color = "red";3. DOM 요소의 내용 변경
var str = document.getElementById("text");
str.innerHTML = "바꿀 내용!!";Node 객체
노드(Node)와 노드 트리
- HTML DOM에서 정보를 저장하는 계층적 단위
- 노드트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.
- 자바스크립트에서는 HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근할 수 있다.
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.
노드의 종류
- 문서 노드 - HTML 문서 전체를 나타내는 노드
- 요소 노드 - 모든 HTML 요소는 요소 노드로, 속성노드를 가질 수 있는 유일한 노드
- 주석 노드 - HTML 문서의 모든 주석은 주석 노드
- 속성 노드 - 모든 HTML 요소의 속성은 속성 노드이며, 요소노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
- 텍스트 노드 - HTML 문서의 모든 텍스트는 텍스트 노드
노드의 값
- 노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
//노드의 값 접근(이름)
var node1 = document.childNodes[1];//document의 자식 노드들 중 두번째 노드를 node1 변수에 할당
var node2 = node1.childNodes[2] ;
var node3 = node2.childNodes[1];
document.write(node1.nodeName)
document.write(node2.nodeName)
document.write(node3.nodeName)// 노드의 값 접근(값)
//만약 id명이 apple인 태그가 있다고 가정하자!
var apple_node = document.getElementById("apple");
apple_node.firstChild.nodeValue = "apple_pie"; // 첫 번째 자식 노드의 값을 선택 ;var apple_node = document.getElementById("apple").childNodes[0];
var apple_node_value = apple_node.nodeValue;
var apple_node_type = apple_node.nodeType;
document.write(apple_node_value);
document.write(apple_node_type);- nodeType 프로퍼티 값
요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9
이벤트
이벤트란 ?
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
이벤트 타입
- 발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, Window 객체 등)
<p onclick = "changeText(this)">클릭!</p>
<script>
function changeText(e){
e.innterText = "바꾼 내용!;
}
</script>이벤트 핸들러
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행한다.
선택한요소.addEventListener("click", 실행함수());
안녕하세요! 만나서 반갑습니다.