728x90
반응형
[ 목차 ]
1. 문서 객체 모델 알아보기
2. DOM 요소에 접근하고 속성 가져오기
3. DOM에서 이벤트 처리하기
4. DOM에서 노드 추가, 삭제하기
3. DOM에서 이벤트 처리하기
[ DOM 요소에 함수 직접 연결하기 ]
- DOM 요소에 이벤트 처리기 함수를 직접 연결
// event-1.html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width: 300px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
let cup = document.querySelector("#cup"); // cup 변수가 가리키는 것은 id="cup"인 img 태그
cup.onclick = function() {
alert("이미지를 클릭했습니다.");
}
</script>
</body>
</html>
[ 함수 이름을 사용해 연결하기 ]
- 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결
- 이 때 함수 이름 다음에 괄호를 추가하지 않는다.
// event-2.html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
let cup = document.getElementById("cup"); // id = cup 요소를 가져옴
cup.onclick = changePic; // cup을 클릭하면 changePic 함수를 실행
function changePic() {
cup.src = "images/cup-2.png"; // cup 요소의 경로를 다른 이미지 경로로 바꿈
}
</script>
</body>
</html>
[ DOM의 event 객체 알아보기 ]
- 웹 문서에서 이벤트 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 담긴 객체
// event-3.html 코드 - 이미지 클릭하면 이미지에서 클릭한 위치 알아내기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = function(event) { // click이 event가 되는 함수
alert("이벤트 유형 : " + event.type + ", 이벤트 발생 위치 : " + event.page + ", " + event.pageY);
}
</script>
</body>
</html>
[ this 예약어 ]
- 이벤트가 발생한 대상에 접근할 때 사용하는 예약어
// event-4.html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.getElementById("cup"); // cup이 가리키는 것은 img태그
cup.onclick = function(event) {
alert("클릭한 이미지 파일 : " + this.src); // this가 가리키는 것은 cup
}
</script>
</body>
</html>
[ addEventListener( ) 메서드 사용하기 ]
- 이벤트 객체를 사용해 이벤트 처리기 연결
<기본형>
요소.addEventListener(이벤트, 함수, 캡쳐 여부);
(1) 이벤트
: 이벤트 유형을 지정합니다. 단, click과 keypress처럼 on을 붙이지 않고 쓴다.
(2) 함수
: 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기에서 함수를 정의할 때는 event 객체를 인수로 받는다.
(3) 캡쳐 여부
: 이벤트를 캡쳐하는지 여부를 지정하며 기본값은 false이고 true와 false 중에서 선택 할 수 있다.
true이면 캡쳐링, false이면 버블링한다는 의미이다.
이벤트 캡쳐링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 전달되는 것이다.
// event-5.html 코드 - 마우스 포인터 올리면 이미지 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/easys-1.jpg" id="cover">
</div>
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",changePic, false); // 포인터를 올리면 changePic() 실행
cover.addEventListener("mouseout",originPic, false); // 포인터를 내리면 originPic() 실행
// cover.onmouseover = changePic;
// cover.onmouseout = originPic; // 이렇게 코드 작성해도 똑같은 결과 도출한다.
function changePic() {
cover.src = "images/easys-2.jpg"; // 이미지 경로를 easys-2.jpg 로 바꿈
}
function originPic() {
cover.src = "images/easys-1.jpg"; // 이미지 경로를 easys-1.jpg 로 바꿈
}
</script>
</body>
</html>
메서드 안에서 함수 표현식으로 사용이 가능하다!
↓
// event-6.html 코드 - 메서드 안에서 함수 선언하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM event 객체</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/easys-1.jpg" id="cover">
</div>
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",function() {
cover.src = "images/easys-2.jpg";
});
cover.addEventListener("mouseout", function() {
cover.src = "images/easys-1.jpg";
});
</script>
</body>
</html>
[ CSS 속성에 접근하기 ]
- 자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있다.
<기본형>
document.요소명.style.속성명
ex) id 가 desc인 요소의 글자를 파란색으로 변경하려면
// id가 desc인 요소의 글자색 바꾸기
document.getElementById("desc").style.color = "blue";
- color처럼 한 단어인 속성명은 그래도 사용
- background-color, borderradius처럼 중간에 하이픈(-)이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용
- 이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시
// domCss.html 코드 - 도형의 테두리와 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM CSS</title>
<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>
</head>
<body>
<div id="container">
<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
<div id="rect"></div>
</div>
<script>
var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function () { // mouseover 이벤트 처리
myRect.style.backgroundColor = "green"; // myRect 요소의 배경색
myRect.style.borderRadius = "50%"; // myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function () { // mouseout 이벤트 처리
myRect.style.backgroundColor = ""; // myRect 요소의 배경색 지우기
myRect.style.borderRadius = ""; // myRect 요소의 테두리 둥글게 처리 안 함
});
</script>
</body>
</html>
4. DOM에서 노드 추가, 삭제하기
[ 노드 리스트란 ]
- querySelectorAll( ) 메서드를 사용해 가져온 여러 개의 노드를 저장한 것
// nodeList.html 코드 - 노드 리스트 살펴보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
<h1>Web Programming</h1>
<ul id="itemList">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
[ 텍스트 노드를 사용하는 새로운 요소 추가하기 ]
1. 요소 노드 만들기 - createElement( ) 메서드
<기본형>
document.createElement(노드명)
// p 요소 노드 만들기
var newP = document.createElement("p");
2. 텍스트 노드 만들기 - createTextNode( ) 메서드
<기본형>
document.createTextNode(텍스트);
// p 요소의 텍스트 노드 만들기
var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
3. 자식 노드 연결하기 - appendChild( ) 메서드
<기본형>
부모노드.appendChild(자식노드)
// 텍스트 노드를 자식 노드로 연결하기
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
// domNode-2.html 코드 - 링크를 클릭하면 텍스트 표시하기
<!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="addP(); this.onclick='';">더 보기</a>
<div id="info"></div>
</div>
<script>
function addP() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
newP.appendChild(txtNode); // 다음과 같이 새로운 p태그 생성됨 -> <p>DOM은 Document Object Model의 줄임말입니다.</p>
document.getElementById("info").appendChild(newP);
}
</script>
</body>
</html>
[ 속성값이 있는 새로운 요소 추가하기 ]
1. 요소 노드 만들기 - createElement( ) 메서드
// 이미지 노드 추가하기
var newImg = document.createElement("img");
2. 속성 노드 만들기 - createAttribute( ) 메서드
<기본형>
document.createAttribute(속성명)/* 이미지의 src와 alt 속성 만들고 지정하기 */
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg"; // src 속성값 지정
altNode.value = "돔 트리 예제 이미지"; // alt 속성값 지정
3. 속성 노드 연결하기 - setAttributeNode( ) 메서드
<기본형>
요소명.setAttributeNode(속성노드)/* 이미지의 src 속성 노드 연결하기 */
newImg.setAttributeNode(srcNode);
4. 자식 노드 연결하기 - appendChild( ) 메서드
document.getElementById("info").appendChild(newImg);
// domNode-3.html 코드 - 링크를 클릭하면 텍스트와 이미지 표시하기
<!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">
<p>DOM은 Document Object Model의 줄임말입니다.</p>
<img src = "images/dom.jpg" alt = "돔 트리 예제 이미지">
</div> -->
<!-- 위의 주석처리 코드가 addContents 함수가 말하는 것(클릭했을때 출력되는 것)을 코드로 나타낸 것이다. -->
<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(자식노드)
// nodeDelete.html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
<div id="container">
<h1>Web Programming</h1>
<p>공부할 주제를 기록해 보세요. </p>
<p>공부가 끝난 것은 클릭해서 삭제할 수 있습니다.</p>
<form action="">
<input type="text" id="subject" autofocus>
<button onclick="newRegister(); return false;">추가</button>
</form>
<hr>
<ul id="itemList">
<!-- <li>javascript</li> --> <!-- 두번째로 들어온 자식 노드-->
<!-- <li>db</li> --> <!-- 첫번째로 들어온 자식 노드 -->
</ul>
</div>
<script>
function newRegister() {
var newItem = document.createElement("li"); // 요소 노드 추가
var subject = document.querySelector("#subject"); // 폼의 텍스트 필드
var newText = document.createTextNode(subject.value); // 텍스트 필드의 값을 텍스트 노드로 만들기
newItem.appendChild(newText); // 텍스트 노드를 요소 노드의 자식 노드로 추가
var itemList = document.querySelector("#itemList"); // 웹 문서에서 부모 노드 가져오기
itemList.insertBefore(newItem, itemList.childNodes[0]); // 자식 노드중 첫번째 노드 앞에 추가
subject.value="";
var items = document.querySelectorAll("li");
for (i = 0; i < items.length; i++) {
items[i].addEventListener("click", function() { // 항목을 클릭하면 실행할 함수
if(this.parentNode) // 클릭한 아이의 부모 노드가 있다면 if문 실행
this.parentNode.removeChild(this);
});
}
}
</script>
</body>
</html>
728x90
반응형
'Language > JavaScript' 카테고리의 다른 글
| 07_제이쿼리 이벤트 (0) | 2023.01.12 |
|---|---|
| 06_제이쿼리 문서 객체 선택자와 조작법 (0) | 2023.01.12 |
| 05장(1)_ 문서 객체 모델(DOM) (0) | 2023.01.11 |
| 04장_자바스크립트와 객체 (0) | 2023.01.10 |
| 03장_ 함수와 이벤트 (0) | 2023.01.10 |
