CSS 선택자로 문서 요소를 찾고 결과가 없을 때를 처리합니다.
querySelector는 첫 요소 또는 null을, querySelectorAll은 현재 시점의 정적 NodeList를 반환합니다. id가 필요하면 getElementById도 사용할 수 있습니다. 스크립트가 실행될 때 요소가 이미 만들어졌는지와 선택자가 정확한지 확인해야 합니다.
querySelector에 h1 선택자를 넘기면 문서의 첫 h1을 찾아 제목 DOM 요소 찾기를 읽고, querySelectorAll에 button을 넘기면 코드 실행 버튼 하나가 담긴 NodeList가 돌아옵니다. title이 null이 아니므로 삼항 연산자의 앞쪽이 선택되어 제목: DOM 요소 찾기, 버튼 수: 1이 출력됩니다. HTML에서 h1을 지우면 같은 코드가 제목을 찾지 못했습니다.를 보여 줍니다.
querySelectorAll이 돌려주는 NodeList에는 forEach는 있지만 map이나 filter는 없으므로, [...buttons]나 Array.from(buttons)로 배열로 바꿔 씁니다. 또 document 대신 특정 요소에서 querySelector를 호출하면 그 요소의 자손 안에서만 찾고, closest는 반대로 자신부터 조상 쪽으로 올라가며 선택자에 맞는 요소를 찾습니다.
querySelector 결과가 항상 있다고 단정하고 바로 속성을 읽으면 null에서 오류가 납니다.
직접 바꿔보세요존재하지 않는 선택자를 조회하고 optional chaining으로 안전하게 처리하세요.