Day32 : querySelectorAll, classList

할 일들이 쌓여있으니 지저분하다.

더블 클릭 하면 삭제되는 기능을 추가하자.

 

목록을 삭제해줄 것이니까 <li>의 remove메소드를 사용한다.

 

 

더블클릭했더니 삭제됐다.

 

querySelectorAll() - 소괄호 안에 들어온 그 값을 기준으로 해당 태그들을 모두 가져온다.

 

<li>들을 생성하고 전체 삭제 버튼을 누르면 querySelectorAll에 대한 결과로 배열이 생성된다.

 

반복문을 이용해서 바로 배열의 원소들을 삭제해준다.

 

'전체 삭제' 버튼을 누르면 다 사라진다.

 

---

todo-list를 계속 쓸 수 있도록 local Storage를 사용하자.

 

todoList를 밖으로 뺀다.

(#todo-list 는 <ul>를 담고 있다.)

 

todoList.children → <ul>의 원소를 배열로 가진다.

 

children - 하위에 존재하고 있는 element들을 참조해온

 

첫번째 원소만 뽑기

 

그 첫번째 원소에서 <span>만 가져오기

 

<span>의 내용만 가져오기

 

<span>의 내용만 가져와서 saveItems 배열에 넣은 뒤 통째로 local stroage에 저장하자.

 

 

입력하는 족족 saveItems 배열에 저장된다.

 

하지만 이렇게 되면 취소선이 그어져 있는지 아닌지

즉, 수행 여부는 함께 저장되지 않는다.

 

→ 객체 형태로 저장한다

 

반복문으로 배열에 push하는 과정에서 객체를 만들어

contents : <span> 내용

complete : 수행 여부

                  todoList.children[i]의 (<li>) classList를 검사해서 'complete'이 있는지 확인

 

contains는 boolean 값으로 저장된다.

 

이제 이 내용을 local Storage에 저장하면 된다.