JS DOM API

DOM API

(Document Object Model, Application Programming Interface)

 

여기서 Document란 HTML 문서를 지향하며,

Object Model은 div, span등 태그를 지향합니다.

DOM API는 JS로 HTML 제어하는 여러 명령들입니다.

 

HTML 제어 명령을 위 예시처럼 작성해봤습니다.

정상적으로 작동되면, .box인 클래스의 내용을 모두 console에 출력해야 됩니다.

 

 

위에 예시는 HTML head부분에 js파일을 연결해줬습니다.

보시다시피 결국에 null 값을 반환했습니다.

 

하지만, HTML body 부분에 js 파일을 연결해주면 정상적인 값을 나옵니다.

 

이 이유는 바로 HTML파일은 위에서부터 분석하고 작동하는 방식을 지니고 있기때문입니다.

head부분인 js링크를 읽었는데 boxEL 변수가 뭔지 아직 안 나타나서 해석 실패된 겁니다.

 

이것을 해결하는 방법은 body부분에 script를 이동해도 되고,

또 다른 방법을 소개하겠습니다.

defer 속성

바로 script에 defer 속성을 넣은 것입니다.

위에도 언급했다시피 HTML 문서는 위에서 아래, 순서대로 분석합니다.

defer를 추가하면, 아래까지 다 읽은 후 다시 js를 실행하겠다는 뜻입니다.

 

addEventListener 

addEventListener 메소드를 사용해 핸들러와 실행할 함수를 알려줄 수 있습니다.

 

중간 스텝들 다 생략하고 최종적인 코드를 보면 위 이미지처럼 나옵니다.

 

classList

classList 메소드에서 add, remove 클래스를 할 수 있습니다.

 

forEach

forEach는 반복을 제어하는 명령입니다.

 

textContent

textContent API는 값을 얻음/지정을 할 수 있습니다.

값을 얻는 용도는 getter로 불리고,

반면, 값을 지정하는 용도는 setter로 불립니다.