드디어 종강 후 복습 후 포스팅...
DOM 드릴링
<p>
this is a
<a href="#">link</a>
</p>현재 a태그에는 아무런 주소도 입력되어 있지 않으므로 눌러도 반응이 없다. 자바스크립트를 이용해 주소를 입력하려면 어떻게 해야 할까?
개발자 도구에서 a를 찾아보면 이는 document – body – children – p – children – a의 순서대로 나아가야 한다. 이렇게 특정 요소를 찾기 위해 점 표기법을 사용하는 것이 드릴링이라고 강의에서 정의했다. 이제 자바스크립트에서 주소를 설정하기 위해서는 a의 href을 바꿔야 한다.
body의 children인 p는 1번 인덱스이고, p의 children인 a는 0번 인덱스이므로 이렇게 드릴링한다.
쉽게 찾고 싶다면 인덱스 위에 마우스를 올리면 된다.
document.body.children[1].children[0].href = 'https://google.com';주소를 구글로 설정하고 사이트를 봐보면
에러가 발생했다. 지금까지 빠뜨린건 없으나 이는 자바스크립트의 작동방식을 고려하지 않았기 때문에 발생한 문제이다. 여기서 자바스크립트는 너무 빨리 실행되었다.
스크립트를 올바르게 로드하기
자바스크립트의 작동 방식을 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced javascript</title>
<script src="app.js"></script>
</head>
<body>
<h1>hi!</h1>
<p>
this is a
<a href="#">link</a>
</p>
</body>
</html>기본 스켈레톤만 생성한 후 head에 자바스크립트를 불러왔다.
브라우저는 head 부분의 코드를 body보다 먼저 실행시키기 때문에 브라우저가 body부분의 HTML코드를 분석하는 것보다 자바스크립트가 먼저 실행되고, JS는 HTML요소들을 분석하여 DOM까지 생성한다.
즉
document.body.children[1].children[0].href = 'https://google.com';이 요소는 자바스크립트가 실행되었을 때 존재하지 않는 것이다.
문제를 해결하기 위해서는
- script태그를 순서상 가장 밑으로 내리거나(이건 지양해야 할 듯)
<body>
<h1>hi!</h1>
<p>
this is a
<a href="#">link</a>
</p>
<script src="app.js"></script>
</body>- script요소에 defer속성을 추가하는 것이다. 이는 bool값이므로 속성값을 추가할 필요 없이
<script src="app.js" defer></script>이렇게만 두면 된다. 이 속성은 브라우저에게 전체 문서가 분석되기 전까지 스크립트의 실행이 지연되어야 한다고 알려준다.
이제 링크를 누르면 구글로 이동하게 된다.
