11일차
솔직히 몇일차인지 모르겠음(7/11일 수업)
0.document : dom객체를 활용하는 것
1. QuerySelector
1.1 document.querySelector('원하는 태그')
1.1.1 위와 같은 형태로 사용하면 첫번째 태그만 인식
1.2 document.querySelector('.태그') : 클래스 선택
1.2.1 동일하게 맨 먼저 온 것만 인식
1.3 document.querySelector('상위 노드 > 하위노드') : dom형태를 응용한 것
1.4 document.queyrSelectorAll('원하는 태그') : 해당 태그의 모든 값을 배열 형태로 반환
1.5 querySelector vs querySelectorAll
2. 정리되어 있는 문서에서 먼저 찾아보도록 하자(MDN등)
3. element.getAttribute
3.1 dom : 문서 전체 / element : 하나의 요소
4. get - set
4.1 get : 가져오다, read의 역할 / set : 값을 쓰다 , write의 역할
4.2 위에서의 get은 읽어오는 것 -> setAttribute를 통해서 바꿀 수도 있음
4.3 element.setAttribute('속성', '원하는 내용') : 요소의 설정을 바꿀 수 있음
4.4 querySelector로 요소를 읽어온뒤 element위치에 요소를 넣음으로써 해당 부분을 사용할 수 있게됨
5. js에서 querySelector를 많이 지정함
6. class를 추가하는 함수
6.1 element.classList.add()
6.2 classList안에 add메서드를 활용하는 것
6.2.1 이런 이벤트를 계속 알고 있어야 함
7. 함수 이름만 넘겨주면 이벤트 발생시 함수를 실행하고 ()를 붙이면 함수를 실행하고 return 값을 넘겨주는 것
8. event는 보통 정리를 해서 사용 함
8.1 예를 들어 같은 이벤트가 반복되면 상수로 선언해서 사용(상수는 대문자)
8.2 어떤 event가 있는지 알아놓는 것도 좋음(외우진 않더라도 인식은 하기)
9. innerText와 textContent의 차이점
9.1 innerText는 DOM구조를 새로가져오기 때문에 그렇게까지 하지 않는 textContent가 더 낫다