문서 객체 모델이란
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
- 웹 문서와 그 안의 요소를 '객체' 로 인식하고 처리함.
ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체
DOM 트리
- 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
- 나무 형태가 되기 때문에 "DOM 트리" 라고 함.
- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
- 루트 노드(root node) : DOM 트리의 시작 부분(html)
DOM을 구성하는 원칙
- 모든 html 태그는 요소 노드이다.
- 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트 노드
- 태그의 속성은 요소 노드의 자식 노드인 속성 노드
- 주석은 주석 노드
DOM 요소에 접근하고 속성 가져오기
DOM 요소에 접근하기
- 웹 문서에서 원하는 요소를 찾아가는 것을 "접근한다(access)" 고 함.
getElementById() 메서드
요소명.getElementById("id명");getElementsByClassName() 메서드
요소명.getElementsByClassName("class명");getElementsByTagName() 메서드
요소명.getElementsByTagName("태그명");querySelector() 메서드, querySelectorAll() 메서드
- querySelector() 메서드는 한 개의 값만 반환
- querySelectorAll() 메서드는 반환 값이 여러 개일 때 모두 반환 -> 노드 리스트로 저장됨
- id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용
노드.querySelector(선택자);
노드.querySelectorAll(선택자 또는 태그);innerText, innerHTML 프로퍼티
웹 요소의 내용을 수정하는 프로퍼티
- innerText : 텍스트 내용 지정
- innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정
요소명.innerText = 내용;
요소명.innerHTML = 내용;
getAttribute() 메서드, setAttribute() 메서드
- getAttribute() 메서드 : 속성 노드의 값을 가져옴
- setAttribute() 메서드 : 속성 노드의 값을 바꿈
getAttribute("속성명");
setAttribute("속성명","값");
DOM에서 이벤트 처리하기
DOM 요소에 함수 직접 연결하기
DOM 요소에 이벤트 처리기 함수를 직접 연결
(...생략...)
<img src = "images/cup-1.png" id = "cup">
........
<script>
var cup = document.querySelector("#cup");
cup.onclick = function(){
alert("이미지를 클릭했습니다");
}
</script>
함수 이름을 사용해 연결하기
- 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결
- 이 때 함수 이름 다음에 괄호를 추가하지 않음
<img src = "images/cup-1.png" id="cup">
.....
<script>
var cup = document.querySelector("#cup");
cup.onclick = changePic;
function changePic(){
cup.src = "images/cup-2.png";
}
</script>
DOM의 event 객체
- 웹 문서에서 이벤트 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 담긴 객체
(...생략...)
<img src="images/cup-1.png" id = "cup">
.....
<script>
var cup = document.querySelector("#cup");
cup.onclick = function(event){
alert("이벤트 유형: "+event.type+", 이벤트 발생 위치: "+event.pageX+","+event.pageY);
}
</script>
this
- 이벤트가 발생한 대상에 접근할 때 사용하는 예약어
(...생략...)
<img src="images/card.png" id="card">
.....
<script>
var card = document.querySelector("#card");
card.onclick = function(event){
alert("");
}
</script>
addEventListener() 메서드 사용하기
- 이벤트 객체를 사용해 이벤트 처리기 연결
요소.addEventListener(이벤트, 함수, 캡쳐 여부);
CSS속성에 접근하기
- 자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있음
document.요소명.style.속성명ex) id가 desc인 요소의 글자를 파란색으로 변경하려면
document.getElementById("desc").style.color = "blue";- color처럼 한 단어인 속성명은 그대로 사용한다.
- background-color, borderradius 처럼 중간에 하이픈(-) 이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용한다.
- 이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시
DOM에서 노드 추가, 삭제하기
노드 리스트란
querySelectorAll() 메서드를 사용해 가져온 여러 개의 노드를 저장한 것
텍스트 노드를 사용하는 새로운 요소 추가하기
1. 요소 노드 만들기 - createElement() 메소드
document.createElement(노드명)let newP = document.createElement("p");
2. 텍스트 노드 만들기 - createTextNode() 메서드
document.createTextNode(텍스트);let txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
3. 자식 노드 연결하기 - appendChild() 메서드
부모노드.appendChild(자식노드)newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
속성 값이 있는 새로운 요소 추가하기
1. 요소 노드 만들기 - createElement() 메서드
var newImg = document.createElement("img");
2. 속성 노드 만들기 - createAttribute() 메서드
[기본형] document.createAttribute(속성명)
let srcNode = document.createAttribute("src");
let altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";3. 속성 노드 연결하기 - setAttributeNode() 메서드
[기본형] 요소명.setAttributeNode(속성노드)
newImg.setAttributeNode(srcNode);
4. 자식 노드 연결하기 - appendChild() 메서드
document.getElementById("info").appendChild(newImg);
전체 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
#container{
width:500px;
margin:10px auto;
padding:20px;
}
#info {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>DOM을 공부합시다</h1>
<a href="#" onclick="addContents(); this.onclick='';">더 보기</a>
<div id="info"></div>
</div>
<script>
function addContents() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
newP.appendChild(txtNode);
var newImg = document.createElement("img");
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
document.getElementById("info").appendChild(newP);
document.getElementById("info").appendChild(newImg);
}
</script>
</body>
</html>
노드 삭제하기
- 노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 한다.
->노드를 삭제하려면 부모 노드부터 찾아야 한다.
parentNode 프로퍼티
- 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환
노드.parentNode
removeChild() 메서드
- 자식 노드 삭제
부모노드.removeChild(자식노드)
'교육 | 외부활동 > JAVASCRIPT' 카테고리의 다른 글
| KH_JAVASCRIPT_4_자바스크립트와 객체 (0) | 2023.01.10 |
|---|---|
| KH_JAVASCRIPT_3_함수와 이벤트 (0) | 2023.01.09 |
| KH_JAVASCRIPT_2_자바스크립트 기본 문법 (1) | 2023.01.09 |
| KH_JAVASCRIPT_1_자바스크립트 시작 (0) | 2023.01.09 |
