[TIL - 2022.7.15 DOM Part 2]

오늘 공부한 내용

• script 태그는 어디에 위치시켜야 할까?

script 태그는 head 태그와 body 태그에 위치시킬 수가 있는데 차이점이 있다.

1. head 태그 내 추가

위 경우에는 html을 파싱하는 과정에서 script 태그를 만난 경우인데 이 때 body 태그에 미처 다 도달하지 못하기 때문에 예를 들어 script 파일이 DOM을 조작하는 부분이라면 DOM 요소에 접근하지 못하는 에러가 발생할 것이다.

이를 방지하기(?) 위해 async와 defer 속성이 등장했다.

• async : 이 경우 script 태그를 만나면 html 파싱을 멈추지 않고 파싱을 하는 동시에 script 파일을 다운로드 시킨다. 그리고 이를 실행시키는 동안에는 html 파싱이 멈춘다.

• defer : html을 파싱하다 script 태그를 만나면 async와 마찬가지로 html을 파싱하면서 script는 동시에 다운로드만 시켜둔다.

2. body 태그 내 추가

body 태그 내에 추가를 하면 html 파싱을 모두 마치고 script 파일을 읽기 때문에 1번 방법 보다는 빠르게 컨텐츠를 읽어들일 수 있다.

하지만 이 부분도 단점은 존재하는데 웹이 자바스크립트에 의존적일 경우 아무런 쓸모도 없다.

getElementsByTagName : Element의 태그 이름을 반환
setAttribute:

• setAttribute(name, value)
  name: 속성의 이름
  value: 속성에 할당할 값

remove와 removeChild

remove는 말 그대로 제거라는 행위 자체를 하기 때문에 반환값이 없는 반면에, removeChild는 삭제할 노드를 반환하기 때문에 서로 헷갈리지 말도록 해야겠다.

• 참고 자료

setAttribute
remove와 removeChild
script 태그는 어디에 위치해야 할까?