주요 내용
프로젝트: DOM 탐정
칸아카데미 웹 사이트는 jQuery를 포함하고 있기에, 실제로 자바스크립트 콘솔을 바로 열어볼 수 있고 이 페이지에 있는 모든
<h1> 요소의 내부 텍스트를 보여주는 코드 라인을 실행할 수 있습니다:$("h1").text();얼마나 많은
<h1> 요소가 있는지 알고싶나요? 다음의 코드를 실행해 보세요:$("h1").length;이번에는 다음과 같이, CSS 선택자를 사용해서 칸아카데미 페이지의 요소들을 더 찾아보세요:
- 모든 링크.
- 이 내용.
- 모든 이미지.
- 사이드바.
- 오른쪽 상단 구석에 있는 여러분의 이름.
- 'Home'이라고 쓰여진 텍스트.
- ...계속 해 보세요!
여러분의 선택자를 아래 토론에 공유하는 것은 좋지만, HTML은 지속적으로 변화하기 때문에 한 번 올바르게 동작한 선택자라고 해서 앞으로도 잘 동작하지는 않을 수 있다는 사실을 유념해 주세요. 또한, 똑같은 요소들을 찾는 여러 CSS 선택자들이 있기 때문에, 정해진 정답은 없습니다.
이제 탐정 모자를 쓰고 DOM을 캐내 봅시다!