728x90
문서 객체 모델 DOM(Document Object Model)
- 웹에서 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것
이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 함 - 모든 정보 요소를 자바스크립트로 가져와 프로그래밍할 때 사용
- 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
DOM 트리
- 웹 문서의 요소를 부모 요소와 자식 요소로 구분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- html(root)
head body
meta title - 부모와 자식 구조로 표시하면 나무 형태가 되므로 DOM 트리라고 함
- DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며,
DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 해서 루트 노드 - 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룸
각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있음
부모 노드에는 자식 노드가 있으며, 부모 노드가 같은 형제 노드가 있음 - DOM을 구성하는 기본 원칙
모든 HTML 태그는 요소(element) 노드
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
주석은 주석(comment) 노드
DOM 요소 접근하고 속성 가져오기
- 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다.'라고 함
DOM에 접근
- CSS에서 class, id, 태그(선택자) 등의 스타일을 각각 구별해서 정의해야 함
- id 선택자로 접근하는 getElementById()
요소명.getElementById("id명") - class 값으로 접근하는 getElementsByClassName()
요소명.getElementsByClassName("클래스명")
※ class 선택자는 중복되어 사용할 수 있으므로 Element가 아닌 Elements - 태그 이름으로 접근하는 getElementsByTagName()
요소명.getElementsByTagName("태그명") - 다양한 방법으로 접근 querySelector(), querySelectorAll()
DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector(), querySelectorAll()
노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
id 선택자처럼 반환값이 하나라면 querySelector()를 사용
class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우 querySelectorAll()
선택자를 표시할 때 id 이름 앞에는 # class 이름 앞에는 . 태그는 기호 없이 태그명만 작성
querySelector()에서 class 이름으로 접근할 때 class 이름을 사용한 여러 요소 중에서 첫 번째 요소만 반환
웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
- 웹 요소의 내용을 수정할 때 사용
- innerText 프로퍼티는 텍스트 내용을 표시
요소명.innerText = 내용 - innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시
요소명.innerHTML = 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 요소에 접근하고 속성 가져오기</title>
</head>
<body>
<button onclick="intext()">innerText로 표시</button>
<button onclick="inHTML()">innerHTML 표시</button>
<h1>현재 시각 : </h1>
<div id="current"></div>
<script>
// innerText, innerHTML 프로퍼티 사용
var now = new Date();
function intext(){
document.getElementById("current").innerText = now;
}
function inHTML(){
document.getElementById("current").innerHTML = "<b>"+ now+"</b>";
}
</script>
</body>
</html>
속성
- 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하려면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장
- 속성에 접근하려면 getAttribute() 메서드를 사용, 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용
- 속성 가져오기 getAttribute("속성명")
- 원하는 속성값으로 지정 setAttribute("속성명","값)
속성값이 이미 있다면 새로운 속성값으로 수정하고, 아직 해당 속성이 없다면 속성과 속성값을 새로 추가함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 가져오기, 수정하기</title>
</head>
<body>
<div id = "picDiv">
<img src="img/toa-heftiba-BHcB-sr_HzQ-unsplash.jpg" alt="이미지" id="pic" width="200" height="200" onclick="displaySrc()">
</div>
<script>
// 이미지 속성 가져오기
function displaySrc(){
var pic = document.querySelector("#pic");
alert("이미지 소스 : " + pic.getAttribute("src")); // 속성을 알림창에 표시
}
</script>
</body>
</html>
DOM 이벤트 처리
- 웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 함
DOM 요소에 함수 직접 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 이벤트 처리</title>
</head>
<body>
<img src="img/cup-1.png" id="cup">
<script>
var cup = document.getElementById("cup");
cup.onclick = function(){
alert("이미지를 클릭하였습니다.");
}
</script>
</body>
</html>
함수 이름을 사용해 연결
- 이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있음
- 함수 이름 다음에 괄호를 추가하지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 이벤트 처리</title>
</head>
<body>
<!--
함수 이름을 사용해 연결
-->
<img src="img/cup-1.png" id="cup">
<script>
// 이미지를 클릭하면 함수 실행
var cup = document.querySelector("#cup");
cup.onclick = changePic;
function changePic(){
cup.src = "img/cup-2.png";
}
</script>
</body>
</html>
DOM의 event 객체
- 이벤트 정보를 저장하는 event 객체가 존재
- 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM의 event 객체</title>
</head>
<body>
<img src="img/cup-1.png" id="cup">
<script>
// 이미지를 클릭하면 함수 실행
var cup = document.querySelector("#cup");
cup.onclick = function(evnet) {
alert("이벤트 유형 : " + event.type + ", 이벤트 발생 위치 : " + event.pageX + ", " + event.pageY);
}
</script>
</body>
</html>
- event 객체에는 이벤트 정보만 들어 있음. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야함
addEventListener() 메서드
- addEventListener() 메서드와 event 객체를 사용하면 한 요소에서 여러 이벤트 처리기를 연결해 실행할 수 있음
- 요소.addEventListener(이벤트, 함수, 캡처 여부);
이벤트 : 이번트 유형을 지정, on을 붙이지 않음
함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정. 함수를 정의할 때는 event 객체로 인수를 받음
캡처 여부 : 기본값은 false(버블링 : DOM의 자식 노드에서 부모 노드로 전달).
true(캡처링 : DOM의 부모 노드에서 자식 노드로 전달되는 것)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addEventListener() 메서드</title>
</head>
<body>
<img src="img/cup-1.png" id="cover">
<script>
// 마우스 포인터를 올리면 이미지 바꾸기
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",changeImg);
cover.addEventListener("mouseout",originImg);
function changeImg(){
cover.src = "img/cup-2.png";
}
function originImg(){
cover.src = "img/cup-1.png";
}
</script>
</body>
</html>
CSS 속성에 접근
- 자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있음
각 요소의 스타일을 자유롭게 수정할 수 있으므로 웹 문서에서 다양한 효과를 만들 수 있음 - CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 작성
document.요소명.style.속성명
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성에 접근</title>
</head>
<style>
#container {
width:400px;
margin:50px auto;
text-align: center;
}
#rect {
width:100px;
height:100px;
border:1px solid #222;
margin:30px auto;
transition: 1s;
}
</style>
<body>
<div id="container">
<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
<div id="rect"></div>
</div>
<script>
var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover",function(){
myRect.style.backgroundColor = "green";
myRect.style.borderRadius = "50%";
});
myRect.addEventListener("mouseout",function(){
myRect.style.backgroundColor ="";
myRect.style.borderRadius ="";
});
</script>
</body>
</html>
DOM 노드 추가,삭제
노드리스트
- DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드리스트를 사용해야함
- DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드리스트</title>
</head>
<body>
<h1>웹 프로그래밍</h1>
<ul id="itemList">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</body>
</html>
- 새로운 노드 추가 과정
모든 HTML 태그는 요소(element) 노드
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
HTML 태그에 있는 속성은 자식 노드인 속성 노드
주석은 주석 노드
텍스트 노드를 사용하는 새로운 요소 추가
- 요소 노드 만들기 createElement() 메서드
document.createElement(노드명) - 텍스트 노드 만들기 createTextNode() 메서드
새로운 요소 노드를 만들었다면 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결
document.createTextNode(텍스트) - 자식 노드 연결 appendChild() 메서드
1, 2 과정은 노드만 만든 상태이며, 부모 노드와 자식 노드로 연결되지 않음
appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용
부모노드.appendChild(자식노드) - 전체 소스 코드 완성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 노드를 사용하는 새로운 요소 추가</title>
<style>
#container{
width:500px;
margin:10px auto;
padding:20px;
}
#info {
margin-top:20px;
}
</style>
</head>
<body>
<div id=""container">
<h1>텍스트 노드를 사용하는 새로운 요소 추가하기</h1>
<a href="#" onclick="addP()">더 보기</a>
<div id="info"></div>
</div>
<script>
function addP(){
var newP = document.createElement("p");
var textNode = document.createTextNode("DOM은 Documnet Object Model의 줄임말");
newP.appendChild(textNode);
document.getElementById("info").appendChild(newP);
}
</script>
</body>
</html>
<div id=""container">
<h1>텍스트 노드를 사용하는 새로운 요소 추가하기</h1>
<a href="#" onclick="addP(); this.onclick='';">더 보기</a>
<div id="info"></div>
</div>
속성값이 있는 새로운 요소 추가하기
- 요소 노드 만들기 createElement() 메서드
- 속성 노드 만들기 createAttribute() 메서드
- 속성 노드 연결 setAttributeNode() 메서드
- 자식 노드 연결 appendChild() 메서드
- 전체 소스 코드 완성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성값이 있는 새로운 요소 추가하기</title>
</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 textNode = document.createTextNode("DOM은 Document Object Model의 줄임말");
newP.appendChild(textNode);
var newImg = document.createElement("img")
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "img/dom.jpg";
altNode.value = "DOM 트리 예제";
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
document.getElementById("info").appendChild(newP);
document.getElementById("info").appendChild(newImg);
}
</script>
</body>
</html>
노드 삭제
- parentNode 프로퍼티
DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야함
삭제할 노드의 부모 노드를 찾아가는 방법을 먼저 알아야함
parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소를 반환
노드.parentNode
- removeChild() 메서드
자식 노드를 삭제하는 역할
부모 노드만 찾는다면 삭제하는 것은 간단함
부모노드.removeChild(자식노드)
728x90