DOM
- Document Object Model의 약자로 문서 객체라고 함
- HTML에 있는 태그를 객체화 하여 자바스크립트에서 다룰 수 있게 한 것
- 모든 노드객체에 접근할 수 있는 요소와 메소드(함수)를 제공함
Node
- HTML에 있는 태그(엘리먼트)를 구조화 하였을때 요소노드, 텍스트 노드, 어트리뷰트 노드로 표현할 수 있음
- 요소노드 : 태그 그 자체를 의미
- 텍스트 노드 : 태그에 기록되어 있는 문자
- 요소노드 중에는 텍스트 노드를 가지지 않는 태그도 있음(ex. img 태그, input 태그)
- 어트리뷰트 노드 : 태그의 설정되어 있는 속성을 의미
ex)
<a href="http://www.naver.com">Click</a>
- 요소 노드 : a 태그
- 어트리뷰트 노드 : href 속성
- 텍스트 노드 : click 글자
텍스트 노드가 있는 문서 객체 생성
- 요소노드와 텍스트노드를 생성하고 이를 body 노드의 자식으로 포함 가능
| 구분 | 작성방법 |
|---|---|
| 요소 노드 생성 | document.createElement("태그명") |
| 텍스트 노드 생성 | document.createTextNode("내용") |
| 태그에 자손으로 노드를 추가 | 객체명.appendChild(node) |
절차
- 요소노드 생성
- 텍스트 노드 생성 및 내용 입력
- 요소노드에 텍스트 노드를 추가
- body 객체에 요소노드를 추가
속성 부여하기
| 구분 | 작성방법 |
|---|---|
| 태그의 속성값을 설정 가능 | 객체명.속성 = "속성값" |
| 태그의 속성값을 설정 가능 (없는 속성도 추가 가능) | 객체명.setAttribute("속성명","속성값") |
| 태그의 속성값 확인 | 객체명.getAttribute("속성명") |
| 속성 생성 | var 변수명=document.createAttribute("속성명") |
| 속성값 적용 | 변수명.value="속성값" |
| 요소에 속성 적용 | 속성명.setAttributeNode(변수명); |
문서 객체 제거
- 페이지내 작성된 문서의 객체(요소)를 제거
| 구분 | 작성방법 |
|---|---|
| 해당 부모 안에 있는 자손 태그 제거 | 부모객체명.removeChild(객체명) |
| 해당 객체를 삭제 | 객체명.remove(); |
EX) DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#print {
border: 1px solid red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="print"></div>
<button id="btn">생성</button>
<button id="btn2">속성확인</button>
<button id="btn3">속성제거</button>
<script>
document.getElementById("btn").onclick = function() {
// 1. 이미지를 넣을 요소 노드 생성
var imgNode = document.createElement("img");
// 2. 속성 노드 생성 및 결합(속성 값 부여)
// imgNode.src="/chap6.img/img1.png";
// imgNode.setAttribute("src", "/chap6.img/img1.png");
var attributeNode = document.createAttribute("src");
attributeNode.value = "/chap6.img/img1.png";
imgNode.setAttributeNode(attributeNode);
//imgNode.width="100" // 직접 넣은 데이터는 단위 처리 안되는 문제점 발생
imgNode.setAttribute("width", "100%");
imgNode.setAttribute("height", "100%");
imgNode.setAttribute("id", "picture");
// 3. div 요소 노드 탐색
var divElement = document.getElementById("print");
// 4. div 요소노드와 img 요소 노드 결합
divElement.appendChild(imgNode);
};
document.getElementById("btn2").onclick = function() {
var element = document.getElementById("picture");
console.log("사진의 너비 : " + element.getAttribute("width"));
console.log("사진의 높이 : " + element.getAttribute("height"));
}
document.getElementById("btn3").onclick = function() {
/*var element=document.getElementById("picture");
element.remove();*/
var printElement = document.getElementById("print");
printElement.removeChild(printElement.firstChild);
};
</script>
</body>
</html>
개발자로 매일 한 걸음