DOM

먼저 html에서 js을 연결하는 법을 알아보자면!!!!

HTML에서 javascript를 연결하는 방법 2가지

1. html에 script 태그를 사용하기

<script>
function () {
  console.log('만나서 반갑습니다');
  }
</script>

Html에 자바스크립트 코드를 script태그로 감싸주는 방법이다
이 방법은 간단한 코드를 작성할때는 괜찮지만 많은 코드를 사용하는 경우에는 가독성도 어렵고 유지보수하기에 어려움이 있기에 많은 양의 코드를 사용하려면 이 방법을 추천하진 않는다.

2. script scr를 사용해 링크 걸기

<script src="index.js"></script>

html파일에 css파일을 연결할때와 같이 script src를 사용해 자바스크립트를 연결하는 방법이다.
여러개의 자바스크립트 파일들을 연결할 수 있다. 제일 많이 사용하기도 한다.
많은 파일들을 연결해주는 기능이 있기 때문에 기능별로 파일들을 나눠서 연결하는 것을 추천한다!

DOM의 정의와 기능

🎃 DOM 이란?

html와 javascript는 다른언어이지만 이둘이 소통을 하기 위해 사용하는 것이 DOM이다.
Document Object Model(DOM)으로 웹페이지의 html을 계층화 시켜 트리구조로 만든 객체모델이다.

🗣 왜 많은 형태중에 object(객체)형태로 만들어졌을까?

=> 돔은 계층구조로 되어있기 때문이다. 그래서 접근하는 법도 key:value 이고 접근법도 dot notation, bracket notation 으로 접근한다.
읽기 쉽고 더 자주사용하는 접근법으로 접표기법을 많이 사용한다고 한다.

DOM에 접근하기 위해 사용하는 메소드

• document.getElementById("id명")
  => 해당 id명을 가진 요소 하나를 반환한다.

• document.quertSelector("선택자")
  => 해당 선택자를 만족하는 요소 하나를 반환합니다.

• document.getElementsByClassName("class명")[순서]
  => 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.

• document.getElementsByTagName("태그명")[순서]
  => 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.

• document.quertSelectorAll("선택자명")[순서]
  => 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.

이러한 메소드를 모두 사용하면서 어떤것이 맞을지 많이 사용하면서 비교해가며 사용하는것이 좋은 방법!