여행준비물이나 아니면 간단한 점검 목록을 메모 할 수 있는 프로그램을 DOM과 배열로 구현해 보았다.
1. html 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>여행 준비물 점검 목록</title>
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/list.css">
</head>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form>
<input type="text" id="item" autofocus="true">
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList">
<ul id = "unlist"></ul>
</div>
</div>
<script src="js/준비물.js"></script>
</html>2. 자바스크립트 변수, 함수 선언
var 아이템리스트 = [];
var 입력 = document.querySelector('#item');
var 버튼 = document.querySelector('#add');
var 언리스트 = document.querySelector('#unlist');
function 추가(){
var 리스트 = document.createElement("li");
var 스펜 = document.createElement("span");
for(var i=0; i<아이템리스트.length; i++){
리스트.textContent = 아이템리스트[i];
}
스펜.textContent = 'X';
스펜.setAttribute("class", "num");
언리스트.appendChild(리스트);
리스트.appendChild(스펜);
삭제();
}
아이템리스트 변수에 빈 배열을 선언하면 리스트를 넣어줄 공간을 만들었다. 그 후 입력,버튼,언리스트 변수를 선언하여 html코드를 구현하였다.
그 후에는 후에 나올 버튼을 누르면 아이템리스트에 저장된 배열들을 불러와 화면에 보여주는 코드를 구현하였다.
3. 목록삭제 함수 구현
function 삭제(){
var attr = document.querySelectorAll(".num");
for(var j=0; j<attr.length; j++){
attr[j].addEventListener('click', function(){
if(this.parentNode.parentNode){
this.parentNode.parentNode.removeChild(this.parentNode)
}
})
}
};위에선 span으로 만들어준 'x'를 누르게 된다면 삭제를 하는 코드를 만들었다. 위 코드에서 만들어준 span태그 class이름에 접근한 후 부모태그를 찾아 아예 삭제 시켜주는 코드를 만들었다.
사용 메소드
- removerChild을 사용하여 부모 노드를 삭제함
4. addEventListener 구현
버튼.addEventListener('click', function(){
if(입력.value != null){
아이템리스트.push(입력.value);
입력.value = "";
입력.focus();
}
추가();
});
버튼을 누르면 아이템리스트 배열에 차례로 추가되는 기능을 만들었다.
사용 메소드
- push 배열을 순서대로 나열시킴
- focus 메소드로 다시 커서를 입력창에 등록
5. 전체코드
var 아이템리스트 = [];
var 입력 = document.querySelector('#item');
var 버튼 = document.querySelector('#add');
var 언리스트 = document.querySelector('#unlist');
function 추가(){
var 리스트 = document.createElement("li");
var 스펜 = document.createElement("span");
for(var i=0; i<아이템리스트.length; i++){
리스트.textContent = 아이템리스트[i];
}
스펜.textContent = 'X';
스펜.setAttribute("class", "num");
언리스트.appendChild(리스트);
리스트.appendChild(스펜);
삭제();
}
function 삭제(){
var attr = document.querySelectorAll(".num");
for(var j=0; j<attr.length; j++){
attr[j].addEventListener('click', function(){
if(this.parentNode.parentNode){
this.parentNode.parentNode.removeChild(this.parentNode)
}
})
}
};
버튼.addEventListener('click', function(){
if(입력.value != null){
아이템리스트.push(입력.value);
입력.value = "";
입력.focus();
}
추가();
});
