JS #8 traverse DOM, event delegation, closure, currying

황은하·2021년 10월 1일
0

JS

목록 보기
8/19

traverse DOM

child & childnode

  • child
    : 큰 요소들만

  • childnode
    : 하나씩 노드로 친다.

요소들 사이사이에 text라고 나온다.

  • text
    : empty space. \n
const main = document.querySelector("main");
// 매개변수로 id는 #, class는 . 을 앞에 붙인다.

console.log(main.children);
// (main.children[2].children[4].textContent)
// 이런 식으로 main의 자식들을 접근할 수 있다.

const holyGrailMovie = document.querySelector("#holy");
/*
previousElementSibling.textContent
holyGrailMovie.parentNode
parent.nextElementSibling
이런 식으로 최상위 노드를 부른 뒤 최상위 노드부터 자식 노드들에 접근하면 속도가 빨라진다.
*/

⭐event delegation

리스트 전체에 리스너 달아놓고 capturing & bubbling으로 데려온다.
여러 리스트에 하나의 리스너는 안된다.
한 리스트 - 한 리스너


⭐⭐closure

: 익명함수가 실행되면 상위함수에 접근해 익명함수 내의 변수를 접근할 수 있다. 기억하고있음
상위 함수를 만들고 익명 함수를 반환하면 익명함수가 실행되지는 않고 반환만 된다.


⭐currying

한 메소드가 반환하는 메소드들이 꼬리의 꼬리를 물 때, 필요한 매개변수를 차례로 늘어놓는 것.

sum(1)(2)(3)(4);
-> 하나씩 sum에 필요한 매개변수를 사용한다. 1부터 4까지 순서대로.

profile
차근차근 하나씩

0개의 댓글