[HTML]을 바라보는 또 다른 관점 , DOM. DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다.
DOM은 Document Object Model의 약자
HTML에 JavaScript 적용하기
HTML에 JavaScript를 적용하기 위해서는 '< script >' 태그를 이용합니다.
아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.
<script src="myScriptFile.js"></script>
[코드] HTML 문서에 포함되는 script 요소
웹 브라우저가 작성된 코드를 해석하는 과정에서 '< script >' 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는
이 < script > 태그를 추가하는 두 가지 대표적인 사례가 존재합니다. 하나는 < head > 태그에 추가하는 방법, 다른 하나는 < /body > 가 끝나기 전에 추가하는 방법입니다. 두 사례를 비교해 보고 차이점은 무엇인지 알아봅시다.
1. 안쪽에 삽입하는 경우
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <!-- script 요소 삽입 위치 --> <script src="myScriptFile.js"></script> </head> <body> <div id="msg">Hello JavaScript!</div> </body> </html>
2. 태그가 끝나기 전에 삽입하는 경우
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="msg">Hello JavaScript!</div> <!-- script 요소 삽입 위치 --> <script src="myScriptFile.js"></script> </body> </html>
두 방식의 공통점과 차이점
두 방식 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하지만,
두 번째 console.log의 경우 제대로 출력하지 못하는 예시가 있습니다.
console.log('welcome JavaScript'); let msgElement = document.querySelector('#msg'); console.log(msgElement);
[코드] myScriptFile.js 파일을 수정합니다.\
Q. 질문
각 방법은 콘솔 출력이 어떻게 다른가요?
1번 방법에서는 null 이 콘솔에 출력되는 이유가 무엇일까요?
HTML 엘리먼트를 이용하려면 1번과 2번 중 어떤 방법을 사용해야 할까요?
DOM이 JavaScript는 아닙니다.
DOM 구조 접근을 그저 JavaScript를 이용해서 접근할 뿐입니다.
Q1. 자식 엘리먼트 찾기
body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?
body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다.
자바스크립트에서 DOM은 document 객체에 구현되어 있습니다.
브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다.
[그림] 크롬 개발자 도구에서 document.body를 조회합니다.
DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다.
document.body 객체의 키 중에서 children을 찾아볼까요?
물론 document.body.children 으로 바로 조회할 수도 있습니다.
Q2 - 부모 엘리먼트 찾기
id의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요?
id가 news-contents 인 div 엘리먼트는 body 엘리먼트의 자식 엘리먼트입니다. 반대로 body 엘리먼트는 id가 news-contents div 엘리먼트의 부모 엘리먼트입니다.
이 관계를 자바스크립트에서 확인합니다.
id가 news-contents 인 엘리먼트를 조회하려면, document.body.children 의 첫 번째 엘리먼트를 조회합니다.
[그림] id가 news-contents인 div 엘리먼트
document.body 의 children을 조회할 때마다, 매번 document.body 로부터 찾아가는 일은 정말 번거롭습니다.
따로 변수 선언을 해서 이 정보를 저장해두면, 주소를 참조하기 때문에 언제든지 접근할 수 있습니다.
변수 newsContents 를 따로 선언하여 id가 news-contents 인 엘리먼트를 할당합니다.
Q3 - DOM 순회하기
DOM 구조에서도 회사의 조직도와 유사한 모습을 발견할 수 있습니다. body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있습니다. 이 관계를 그려보면 아래와 비슷한 구조가 만들어집니다.
[그림] DOM의 관계도
이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다.
트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요합니다.
