What is the DOM?
DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.
HTML은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에 이전에 배웠던 조건문이나 반복문을 사용할 수 없고, 정보를 저장하기에도 적합한 언어가 아니다. 그래서 자바스크립트라는 프로그래밍 언어와 DOM을 활용하여 HTML에 접근하고 조작한다.
📝오늘 배운 것
- DOM의 개념
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해
- HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해: script 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다(script 태그를 body가 끝나기 직전에 삽입해야 HTML 엘리먼트를 정상적으로 이용할 수 있다)
세부 내용
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="profile-photo"></div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture"></div>
<div class="news-title"></div>
<div class="news-description"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>-
console.log가 아니라 console.dir를 사용하면 DOM을 객체의 모습으로 출력한다.
-
document.body를 조회해보면 여러 속성이 나오고,
그 객체에서 document.body.children을 입력하면 body의 자식 엘리먼트들을 찾을 수 있다. -
여러 자식 엘리먼트 중에서 1번째 자식 엘리먼트를 조회를 document.body.children[1]를 입력한다
우당탕탕 개발일기📝🤖