[JavaScript] DOM (Document Object Model)

JavaScript

[JavaScript] DOM (Document Object Model)

hrming 2024. 2. 12. 00:52

1. DOM (Document Object Model)

: 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한 것

2. 브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성

: DOM이 생성된 경우에만 HTML을 변경할 수 있음.

<script>
  document.getElementById('test').innerHTML = 'Changed'
</script>

<p id="test"> Previous </p>

// DOM이 생성된 경우에만 HTML을 변경할 수 있음
// p태그에 대한 DOM이 생성되지 않았기 때문에, HTML 변경 불가. 에러 발생.

3. 자바스크립트 실행을 미루는 방법

: 자바스크립트를 <body>태그 끝나기 전에 작성하면 상관 없지만, 자바스크립트 위치를 정할 수 없을 경우 사용

$(document).ready(function(){ TEST })
document.addEventListener('DOMContentLoaded', function() { TEST })

// 'HTML을 다 읽어들였는지'를 알려주는 이벤트리스너

출처: 코딩애플