반응형
1. 태그 선택자
document.getElementsByTagName(태그명)[순서];태그는 같은 이름으로 여러개를 생성 할 수 있다.
그래서 getElement가 아닌 getElements로 복수로 써준다.
태그명을 넣을때는 ('div') 이런식으로 넣어주면 된다.
여기서 마지막[순서]는 index 0번부터 시작이다 만약에 형제가 3개가 있을경우 3번째를 선택해줄때는 2를 넣으면 된다.
2. 클래스 선택자
document.getElementsByClassName(클래스명)[순서];클래스도 태그와 마찬가지로 같은 이름으로 여러개를 생성 할 수 있다.
그러므로 위 코드에서 복수인 getelements를 사용한다.
클래스명을 넣을때는 ('logo') 이런식으로 넣어주면 된다.
그리고 여러개 이기때문에 맨 뒤에 [순서] 즉 index번호를 적어준다. index는 0부터 시작이다.
3. 아이디 선택자
document.getElementById(아이디명);아이디는 특성상 같은 아이디명을 사용하지 않는것이 규칙이기 때문에
getElements 복수형이 아닌 getElement를 써주고 뒤에 순서도 사용하지 않는다.
JavaScript에서 간단한 선택자
제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어도 전체를 선택하는 경우.
document.querySelector('div');queryselector만 쓸경우 순서를 지정할수 없다. 뒤에 All을 넣어줘야 가능하다.
제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어서 해당 형제를 선택하는 경우.
document.querySelectorAll('div')[순서];
// [순서]는 자바스크립트와 마찬가지로 index 0 부터 시작.만약에 한 클래스에서 같은형제가 있을 경우
document.querySelectorAll('.hello > p')[2];
<div class="hello">
<p>안녕하세요</p>
<p>안녕하세요</p>
<p>안녕하세요</p>
</div>
// hello 클래스안에서 3번째 p가 해당한 아이디에서 같은형제가 있을 경우
document.querySelectorAll('#hello')[1];
// hello 아이디안에서 2번째 형제가 해당반응형