border-color 를 설정해주려면
border-style 이 미리 선언되어있어야 한다.
querySelector() : HTML에 있는 형식 그대로. 식별자 태그 전부 argument로 전달할 수 있음. class 식별자를 넣으면 첫번째 요소만 출력됨.
querySelectorAll() : class처럼 여러 값을 가져오거나 배열로 출력할 때 사용. argument에 모든 식별자가 들어갈 수 있음. 기본적으로 NodeList에 저장됨. 존재하지 않는 class 속성값을 넣어주면 NodeList[]로 출력됨.
getElementsByTagName() : HTML에서 쓰이는 태그를 넣어주면 쓰는 태그들의 목록을 배열의 형태로 가져옴. *를 넣어주면 모든 태그내용을 가져옴.
getElementsByClassName() : argument로 class 식별자를 전달해주면 사용하는 태그들이 배열에 담긴다. push와 같은 메소드는 사용할 수 없음. 존재하지 않는 class 속성값을 넣어주면 HTMLCollection[]이 출력됨. 비어있는 배열이고 null과는 다름.
getElementById() : argument 값으로 Id식별자를 전달해주면 HTML에 있는 형식 그대로 가져옴. 존재하지 않는 값을 넣어주면 null이 나옴.
버블링과 캡쳐링
https://ko.javascript.info/bubbling-and-capturing
https://mber.tistory.com/7
동적으로 생성된 자식객체에 이벤트를 주려면
부모요소에 이벤트를 줘야한다. 콘솔에 찍어보면 동일한 내용이 한번에 여러번 찍히는데 이는 타고 올라가야하는 부모 div의 개수이다.
팝업창
https://abcdqbbq.tistory.com/93
특정 요소 뒤에 append하는 방법
https://powerku.tistory.com/114
queryselectAll로 가져온 nodelist를 배열로 바꿔서 배열 메소드를 사용하기 위해서는
const cards = [...ggrandParentDiv.querySelectorAll(".todolist")];
와 같이 배열로 변경해주면 된다.
JSONP : 클라이언트가 아닌, 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용된다.
SOP 먼저 공부하기!!
Prototype의 장점
console창에 [].__proto__ 와 Array.prototype을 치면 동일한 결과가 나온다.변수이름은 의미있게 짓기
CSS에 이름 부여하는 기준 참고할 만한 것 : BEM
for ... in -> 객체
for ... of -> 로 돌릴 수 있는 대상은 조건이 있음.
배열의 데이터를 가지고 새로운 차원의 데이터를 만드는 메소드 : reduce
배열의 데이터를 가지고 새로운 배열을 만드는 것 : map
transform(움직이는 속성)의 translate써서 요소 이동시키기
// document.body.addEventListener("click", ({ target }) => {
// console.log(target);
// });
