TIL 23.10.19(바닐라JS 선택자)

한승준·2023년 10월 19일

TIL

목록 보기
7/41

필수

  • const와 let만을 이용한 변수 선언 필수 (o)
  • DOM 제어하기 : 하기 api 목록 중 2개 이상 사용하기 (o)
  • 화살표 함수 : 하기 예시 중 1개 이상 사용 (o)
  • 배열 메소드 : 하기 예시 중 2개 이상 사용 (x)
    • forEach (O)
    • map
    • filter
    • reduce
    • find

선택

  • 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기 (o)
  • 대소문자 관계없이 검색 가능하게 하기 (o)
  • 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기 (o)

getElementById
querySelector

document.getElementById는 전체 문서에서 ID를 기반으로 요소를 찾는 데 사용
element.querySelector는 document.getElementById도 가능 특정 요소 아래에서 CSS 선택자를 사용하여 하위 요소를 찾는 데 사용

어제 getElementBy 이것만쓰겠다고 했는데 자꾸 오류나서 마음이 꺽여 querySelector 사용했다
튜터님한테 물어봤는데 document.getElementById 는 문서전체에서 id값을 접근하기때문에
나는 카드를 만들때 똑같은 id값으로 생성되게 만들어서 document.getElementById로 접근이 불가했다.
카드가 생성될떄 영화의 data-id에 저장되어있는 값을 title의id로 바꿨다.
그러니 document.getElementById접근이 가능해졌다 굳

querySelectorAll: 이 메서드는 CSS 선택자와 일치하는 모든 요소를 NodeList 형태로 반환합니다. 정적
getElementsByClassName: 이 메서드는 클래스 이름과 일치하는 모든 요소를 HTMLCollection 형태로 반환합니다 동적
class로 하는것은 element가능

즉 getElement로 다할수있다
nodelist랑 HTMLCollection 은 내일

profile
한승준

0개의 댓글