처음에 너무 어려워서 포기하게 되는 자바스크립트.
사실 제가 자바스크립트 독학하겠다고 문제집을 여러권 샀었는데 중간에 포기를 했었어요.
코딩인강도 찾아서 보고 했는데 어찌나 말들이 다 어렵던지.. 한국말인데도 힘들더라고요.
자바스크립트를 한번에 이해를 하면 좋았겠지만.. 비전공자인 저는 한참을 헤맸고,
자바스크립트를 공부하며 '내가 정말 개발자가 될 수 있을까?'하고 좌절한 적도 많았습니다.
저처럼 비전공자이거나, 자바스크립트를 처음 접하는 분이라면 모두 공감하실 거 같은데요.
그런 분들을 위해 포스팅을 시작합니다.
저희 더 이상 자바스크립트에서 헤매지 말자구요!
해당 포스트에서는 자바스크립트에서 element 선택 메소드에 대해서 알아보겠습니다.
지금부터 알게될 메서드들은 외운다기 보단 메서드 이름 그 자체를 이해하려 해보세요.
이해를 하면 자연스럽게 사용할 수 있어요.
(HTML, CSS를 알고 있다는 가정 하에 이 포스팅을 작성하였습니다.)
id 태그 선택 : getElementById
여기서 보이는 document는 html자체 문서를 말합니다.
그리고 .으로 document안에 있는 내용에 접근을 해요.
해당 메서드는 이름 그대로 document의 Id를 가져오는(get) 메서드입니다.
document.getElementById('아이디명');
class 태그 선택 : getElementsByClass
클래스를 선택할 땐 's'를 주의해야 합니다.
id는 중복으로 사용할 수 없어서 단수형으로 선택자를 가져오지만,
class는 중복으로 사용할 수 있기 때분에 복수형으로 선택자를 가져옵니다.
documnet.getElementsByClass('클래스명');
// getElement's'!!!! 여러 개의 요소가 선택 될 수 있기 때문.
태그 이름으로 태그 선택 : getElementsByTagName
요소도 클래스와 마찬가지로 여러 개 선택을 할 수 있기 때문에 's'가 붙습니다.
document.getElementsByTagName('태그 이름')
//getElement's'!!!! 여러 개의 요소가 선택 될 수 있기 때문.
예)
const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*'); //css와 동일
css 선택자로 태그 선택 : querySelector (주로 사용하기✔)
- getElementById
- getElementsByClass
- getElementsByTagName
위 3개를 다 합쳐 놓은 것이 querySelector입니다.
querySelector를 사용하는 것이 더 간편하고 타이핑을 하기도 편하기 때문에
저는 주로 해당 메서드를 사용하고 있습니다.
querySelector 뒤에 있는 괄호를 봐주세요.
아이디는 앞에 #
클래스는 앞에 .
태그는 해당 태그 그대로 사용하고 있죠?
모든 내용은 작은 따옴표('') 혹은 큰 따옴표("")로 감싸줘야 한다는 건 기본적으로 알고 가자구요!
document.querySelector('#아이디명');
document.querySelector('.클래스명');
document.querySelector('div');
