230530) This, JS 셀렉터

THIS의 특징

- this는 앞에 오는것이 무엇이냐!에 따라서 종속되는 곳이 달라진다!

아무것도 없을 경우에는 전역 객체(window, golbal)으로 기준이 잡히는 이유는 무엇이다?!

사실은 this 앞에는 window. 이 기본으로 생략되어 있기 때문이다!

 

JS 셀렉터

- CSS 셀렉터에 익숙한 편이다 보니 사용이 그렇게 어렵지는 않지만 아래 사항은 기억해 두고 고려해야 할 듯하다.

 

보통 CSS에서 child를 불러올 때는 아래와 같이 사용한다.

li:nth-child(2) {
	//여기에 css속성 삽입
}

:nth-child(n)은 몇 번째 자식을 선택할 것인지를 뜻한다.

css의 초기값은 1부터 시작하기 1을 기재하면 첫 번째 자식이 된다.

따라서 위 코드를 스타일시트에 삽입하고 html에 적용하면

li 중 두 번째 자식이 잡히게 될 것이다.

(보통 첫 번째와 마지막 자식은 각각 :first-child / :last-child를 사용한다)

 

다만 JS에서 어떠한 요소의 자식 요소를 사용할 때는 약간의 차이가 있다.

예시는 아래와 같다.

document.querySelector("#id값").children[1]

(예시의 id값은 querySelector 사용 시 다른 요소로도 변경 가능함!)

 

위 예시는 #id값의 자식을 선택하는 예시이다.

 

css의 :nth-child()가 .childeren[] 으로 변경됐다고 생각하면 쉽다.

다만 js에서는 배열도 동일한 특징을 가지고 있듯이, 초기값이 0부터 시작한다.

따라서 .children[1]는 두 번째 자식을 뜻하게 된다.

 

이 점을 유의할 것!

 

오늘도 잘 해냈다!