반응형
DOM??
-DOM 이란 웹페이지에 대한 프로그래밍 인터페이스이다. HTML을 해석해서 트리구조로 나타낸 것이며 Document Object Model의 약어이다! 프런트 개발과 DOM은 떼려야 뗄 수 없는 사이이다. 따라서, 열심히 공부해놔야 한다!
DOM의 구조는 추상적개념을 빌려오면 트리형태를 떠올리면 된다.
❗️각각의 요소들을 노드라고 부르고, 가장 중요하고 대표적인 노드로 문서노드, 요소노드, 속성노드, 텍스트 노드가 있다.
DOM API를 이용하여 요소들을 선택하고 컨트롤할 수 있다.
가장 대표적인 메서드는 다음 등이 있다.
- document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택
- document.getElementById() : 해당 아이디의 요소를 선택 (가져옴)
- element.classList.add() : class속성에 class를 추가
- element.style.color = “” : style 속성에 색상을 지정하는 프로퍼티
- element.appenChild() : 자식요소를 추가
- element.removeChild() :자식 요소를 제거
DOM에서 이벤트란 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생이다. 특정 요소에서 발생한 이벤트에 반응하여 동작을 수행할 수 있다. 이벤트 핸들러를 이용하여 HTML요소의 이벤트 등을 추가 제어 할 수 있다.
var selectedItem = document.getElementsByTagName('li'); // li요소를 선택
var selectedItem = document.getElementById('id'); // 아이디가 id인 요소를 선택
var selectedItem = document.getElementsByClassName('even'); //클래스가 even인 요소 선택
var selectedItem = document.getElementsByName('second');// name 속성값이 second인 요소를 선택
var str = document.getElementById('text');
str.innerHTML = '요소의 내용 변경' // 아이디가 text인 요소를 선택후 str이라는 변수명에 할당. -> innerHTML을 이용해 내용 변경
// 1. 아이디가 "carrot"인 요소를 선택
var carrot_btn = document.getElementById('carrot') ;
// 2. click 할 시 텍스트를 보여주는 함수를 작성합니다.
// 버튼을 클릭하면 "토끼가 나타났어요!!" 문장을 출력
function showText() {
document.getElementById("text").innerHTML = '토끼가 나타났어요!!' ;
};
// 3. 선택한 요소에 "click" 이벤트 핸들러를 등록(이벤트명:"click", 함수이름)
carrot_btn.addEventListener('click', showText) ;
어떻게 쓸수있는지 예시 코드를 공부해 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Exercise</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="change_heading">Change Me!</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
<div class="brown"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</section>
<h2>Race!</h2>
<button>경주 시작</button>
<br>
<div class="car1"></div>
<br>
<div class="car2"></div>
<script src="index.js"></script>
</body>
</html>
div {
width: 50px;
height: 50px;
display: inline-block;
}
.brown{
background-color: brown;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.purple{
background-color: purple;
}
.yellow{
background-color: yellow;
}
.car1 {
background-color: yellow;
}
.car2 {
background-color: purple;
}
.car1, .car2 {
margin-left: 0;
}
지금까지, DOM에 대해서 간단히 알아보았다... 앞으로 DOM을 사용하면서 부족한 부분을 채워나가보자!
