티스토리 뷰
문서 객체 모델(DOM)이란?
- Document Object Model의 약자
- XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
- HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model
- JavaScript를 이용하여 DOM으로 HTML을 조작할 수 있다.
<script> 요소와 HTML 파싱
아래와 같은 예제에서 script 요소의 위치에 따라 콘솔에 출력되는 결과가 다르다.
순서대로 html과 javascript 코드이며 서로 연관되어 있다.
직접 테스트를 실행 할 시 주석 해제 후 실행하는 것을 권장한다.
<html>
<head>
<meta charset="UTF-8" />
<title>script 위치에 따른 결과 테스트</title>
<!-- script 요소 삽입 위치 : body 요소가 시작하기 전 -->
<!-- <script src="test.js"></script> -->
</head>
<body>
<div id="el">Hello, World!</div>
<!-- script 요소 삽입 위치 : body 요소가 끝나기 전 -->
<!-- <script src="test.js"></script> -->
</body>
</html>// 해당 javascript 코드는 test.js 파일이라고 가정한다.
const div = document.querySelector('div');
console.log(div);script 요소가 body 요소가 시작되기 전에 위치할 때 console 결과는 null로 출력된다.
script 요소가 body 요소가 끝나기 직전에 위치할 때 console 결과는 id가 el인 요소의 결과를 출력한다.
HTML에 JavaScript를 적용하기 위해서 <script>태그를 사용하나
어디에 위치하냐에 따라 상반된 결과가 나타난다.
이는 브라우저의 렌더링 엔진이 HTML을 파싱(해석)하는 도중 외부 리소스를 로드하는 태그(예. 자바스크립트 코드를 로드하는 script 태그)를 만나면 HTML의 파싱을 중단하고 해당 리소스 파일을 서버로 요청하기 때문이다.
이와 같은 이슈를 피할 수 있는 async, defer라는 방안이 있으나 적용 전에
DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우인지,
방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우를
고려할 필요성이 있다.
🍀참고 사이트
[HTML] script 태그는 어디에 위치 해야 할까?
처음 마크업을 배울 때, script 태그는 항상 head태그 내부에 위치하고 다음 body 태그에 ui요소를 넣었다. 하지만 어떤 영상을 보면 script 태그를 body 맨 하단에 위치하게 하는 경우를 볼 수 있다. 최
jae04099.tistory.com
https://ko.javascript.info/script-async-defer
defer, async 스크립트
ko.javascript.info
console.log와 console.dir을 통한 document 객체 조회
console.log
console.log() 메서드는 웹 콘솔에 메시지를 출력한다.
메시지는 (선택적 대체 값을 포함한) 단일 문자열이거나 더 많은 JavaScript 객체중 하나일 수 있습니다.
console.dir
console.dir()은 지정된 JavaScript 객체의 모든 속성을 콘솔에서 볼 수 있는 방법으로
개발자가 객체의 속성을 쉽게 가져올 수 있습니다.
console.log()와 console.dir()의 차이
아래는 mdn에서 가져온 자료이며
console.log는 요소를 HTML과 같은 트리 구조로 출력하고
console.dir은 요소를 JSON과 같은 트리 구조로 출력한다.
자바스크립트에서의 DOM 객체 조회하기
자바스크립트에서 DOM은 document 객체에 구현되어있다.
아래는 DOM 구조를 개발자 도구에서 console.log()와 console.dir()를 통해 조회한 결과이다.
1. console.log()를 통한 document 객체 조회하기
2. console.dir()를 통한 document 객체 조회하기
DOM구조를 조회할 땐 console.dir()이 유용하다.
console.log()와는 달리 DOM을 객체의 모습으로 출력한다.
다양한 속성이 존재하는 DOM
console.dir()을 통해 DOM 조회 시 많은 속성이 존재함을 확인했다.
그 중 children 속성을 통해 HTML 내에서 특정 요소의 자식 요소를 조회할 수 있다.
아래의 코드를 예제로 하여 개발자 도구에서 body 요소의 자식 요소를 조회해보자.
<html>
<head>
<meta charset="UTF-8"/>
<title>body 요소의 자식 요소 조회하기</title>
</head>
<body>
<div id="firstChild">
<div id="apple"></div>
</div>
<div id="secondChild">
<div id="banana"></div>
</div>
<div id="thirdChild">
<div id="orange"></div>
</div>
</body>
</html>
'부트캠프' 카테고리의 다른 글
| 내장 고차 함수 (0) | 2022.05.24 |
|---|---|
| 고차함수 (0) | 2022.05.24 |
| 원시 자료형과 참조 자료형 (0) | 2022.05.13 |
| 스코프(Scope) (0) | 2022.05.12 |
| 객체 (0) | 2022.05.11 |