2019-12-02

오늘은 todolist 의 추가 삭제 체크박스 체크 여부의 기능들을 만들었습니다.

Facts

getelementid 라고 하면 id 만 가져 올 수 있지만 querySelector(selector) 이라고 하면 id 도 가져오고 class 도 가져올수 있다. 또한 complex 하게 쓸수 있다.

document.querySelector("#userlist"); //id
document.querySelector(".userlist"); //class
document.querySelector([id='hello']); //complex

[id=‘hello’] 이라고 하면 hello 인 값을 id 내에 찾아서 querySelector 메소드를 돌려준다.

getElement 가 더 빠른데 기능이 한정되어 있으므로 필요할때 querySelector을 쓰도록 하자.

check box checked
In addition to the common attributes shared by all <input> elements, “checkbox” inputs support the following attributes:

checked: A Boolean attribute indicating whether or not this checkbox is checked by default

readonly: Boolean; if present the appearance of the checkbox is altered to indicate that the value cannot be changed.

value: The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on

쓰는 방법

anything.checked

라고 쓰면 anything 의 checked 여부를 돌려준다.(false 나 true)

event.target

event.target.classList.contains(object)
// 이벤트 타깃의 class 가 object 가 있는지 확인 할수 있습니다. 
event.target.id 
//이벤트 타깃의 id 를 가져옵니다.
event.target.parentElement.id
//이벤트 타깃의 패런트 노드의 아이디를 가져옵니다.

addEventListener 와 같이 쓰면 위의 기능들을 잘 쓸 수 있습니다.

Feelings

to do list 의 기본 구성들을 완성 하니 기분이 좋네요.

Findings

기본이 부족하면 뭘 해도 오래 걸린다.

Future Action Plan

[](https://poiemaweb.com/) 시간날때 보기.

Feedback

오우 ----