JS기초 10 - DOM 접근해서 배경색 바꾸기, 리스트 만들기 기초

DOM 접근해서 배경색 바꾸기

아이디로 부를때

document.getElementById('id')

document.querySelector('#id')

 

클래스로 부를때[i]몇번째 인지
document.getElementsByClassName('class')[n]

document.querySelectorAll('.class')[n]

 

태그명으로 부를때
document.getElementsByTagName()[n]
document.querySelectorAll('div')[n]

//버튼 클릭할 때마다 바뀌는 배경색 만들기
var colors = ['tomato','pink', 'powderblue', 'yellow','aquamarine', 'ivory'] //바꿀 색상이름 저장
var i = 0;
function changeC(){
    var chId = document.getElementsByTagName('div')[0]; //html 내 0번째 div선택 
    chId.style.backgroundColor = colors[i];
    i++;
    if(i>=colors.length){
        i = 0;
    } //i가 colors의 길이보다 커지면 i를 다시 0으로 변경 
}


window.onload = function(){ //window.onload : 화면이 로드되면 실행
    var btnId =document.getElementById('btn');
    btnId.onclick = function(){changeC();}; //클릭하면 changeC함수 실행
}

 

 

리스트 만들기 기초

 

리스트를 추가하기 위해서는 

1. 배열을 만들어두고
2. input에 작성한 정보를 받아옴
3. push()메소드를 이용해 배열 맨 뒤에 저장
4. 반복문을 이용해서 배열을 차례대로 화면에 출력
5. 삭제버튼을 클릭하면 splice()메소드를 이용하여 해당 리스트만 삭제

 

html코드

 <h1>여행 준비 리스트</h1>
 <form action=""><input type="text" placeholder="여행준비물" id="addItem" /></form>
 <button id="add" onclick="addI()">추가</button>
 <div id="addList"></div>

 

1. id = "add" 버튼 클릭시 id = "addItem"의 값이 배열에 저장되고,
2. id = "addList" 안에 ul > li 형식으로 리스트가 생성됨

 

스크립트

//arr에 보내기
//ul li에 넣기

var arr=[]; //작성한 내용을 임시로 저장할 공간

function addI(){ //arr에 저장하기 위한 함수
    var item = document.getElementById('addItem').value; //addItem에 있는 값을 가져오기
    arr.push(item);//arr의 배열에 item을 넣어줌
    document.getElementById('addItem').value = ""; //인풋태그에 공백으로 놓기 위함
    document.getElementById('addItem').focus(); //input에 커서가 깜빡거리도록 함
    showL(); //showL함수를 출력해라
}

function showL(){
var list= '<ul>' //시작
for(i=0; i<arr.length; i++){ //arr에 들어있는 갯수만큼 출력하기 위한 for문
    list += `<li> ${arr[i]}<span class="close" id = ${i}> X </span> </li>`
    //li마다 arr에 있는 순서대로 한개씩 출력하고 span으로 삭제버튼을 만들어줌
}
list+= '</ul>'; //끝
document.querySelector('#addList').innerHTML = list; 
//아이디값이 #addList인 태그 안에 선언한 list를 넣어주세요
//삭제코드 시작
var del = document.getElementsByClassName('close'); //클래스가 close인 애들을 호출해서 배열을 만들어줌
for (i=0; i < del.length; i++){ //배열을 반복
    del[i].onclick = removeList; //클래스가 close인 i번째를 클릭하면 removeList를 실행해라
}
}
function removeList(){
    var XId = this.getAttribute('id'); //클릭한애의 id의 속성값을 XId로 호출(숫자로 되어있음)
    //getAttribute 속성의 속성값을 가져와라
    arr.splice(XId, 1) //XId부터 1개 삭제 = XId삭제 ex)arr.splice(2,1) ->arr에 있는 2번째부터 1개만 삭제하시오
    //arr에 있는 애들 중 몇번째있는 애 부터, 몇개까지 삭제할건가를 나타냄
    showL()//변경된 arr을 출력하시오
}