DOM 시작

 

우선 vsc에서 html 기본 템플릿을 사용하는 방법은 html 5를 사용하면 된다.

 

 

 

그리고 인라인 자바스크립트를 사용하면 좋지않기 때문에 지양하자.

 

 

또한 스크립트 태그를 사용할 수도 있다. 결과는 위 인라인과 같다.

 

 

권장되는 형식은 당연히 외부파일을 사용하는 것이다.

 

 

위 코드를 통해 h1 태그의 html 텍스트를 변경할 수도 있다.

 

<script>태그의 위치

 

 

스크립트 태그의 위치는 어디가 적절할까?

head 부분에 있으면 안되는 걸까?

한번 넣어보자.

 

 

head 부분에서는 body에 있는 h1이 로드 되기전에 실행되므로 h1 태그를 찾을 수 없기때문에 오류가 발생하게된다.

 

 

그래서 가장 적합한 위치는 body의 닫는 태그 바로 앞이 적절하다.

모든 태그가 다 실행되고 스크립트가 실행되므로 어떤 태그에 적용해야하는지 프로그램이 알 수 있기 때문이다.

 

 

 

 

그렇다면 html 내부 태그를 선택하려면 어떻게 해야할까?

 

 

 

이런 비효율적인 방법도 있다.

 

 

 

두번째 방법은 이러하다. 그런데 이방법은 li 태그가 많이 사용되면 뭐가 뭔지 구별이 힘들 듯 하다.

 

 

세번째 방법은 class 명을 사용하는 경우이다.

이경우에도 배열의 형태로 주어지므로 

특정한 tag를 선택하여야한다.

 

네번째 방법은 ID를 select 하는 것이다.

아이디는 고유한 값이므로 배열로 주어지지않는다.

따로 특정한 tag를 선택할 필요도 없다.

 

querySelector도 있다. querySelector는 앞서 부트스트랩을 배우면서 배웠던.

hierarchical selector , combined selector를 사용가능하다.

이런식으로 말이다.

 

하지만 query Selector는 공통되는 태그가 여러개 일경우 html 코드 상에서

가장위에 태그가 선택되는데, 이를 해결하기 위해서는 

 

 

querySelectorAll을 사용해야한다.

 

 

그러므로 세번째 li를 선택하기 위해서는 

 

 

이렇게 선택해야한다.

 

나는 위 방법중 querySelector를 많이 사용할 것 같다.

 

 

 

 

이러한 구조를 가지는 li에서 google <a> 태그의 색깔을 바꾸려면 어떻게 해야할까요?