DOM객체에서 HTML을 이루는 모든 태그는 객체다.
태그 내 자식 태그는 '중첩 태그'라고 부르며 <p>텍스트</p> 처럼 태그 내의 단순 텍스트도 객체다.
이 모든 객체는 자바스크립트를 통해 접근할 수 있으며, 페이지를 조작할 때도 객체를 통한다.
document.body == <body></body>
DOM구조
DOM객체로 HTML을 제어하기 위해선 태그들이 어떻게 나타나는 지 알아야 한다.
HTML의 모든 태그는 요소의 소속(부모, 자식)등을 모두 반영한 노드로 표현하며, 노드는 모두 객체다.
단순히 줄바꿈해서 쓰거나 띄어쓰기로 생긴 공백도 모두 유효한 문자이며 노드.
<p>텍스트</p>에서 p노드가 있고 그 하위 노드로 '텍스트' 노드가 있다.
단 두가지 예외가 있는데
1. <head> 이전의 공백과 줄바꿈은 무효.
2. HTML 명세서에 명시된 '모든 콘텐츠는 body 태그 안 쪽에 있어야 한다' 때문에 body뒤에 콘텐츠가 들어가도 자동으로 body 안 쪽으로 옮겨짐.
DOM 탐색하기
document(DOM의 최상위 루트 객체)
->
document.documentElement (<html></html>)
->
body (<body></body>)
->
document.head (<head></head>)
->
contents (<div></div>, <p></p>, ...)
※ 만약 자바스크립트가 DOM구조를 불러오기 전에 작성된다면 document.body는 'null'이 될 수 있다.
이 경우 DOM에 접근할 수 없으므로 body태그 뒤에 script를 작성하거나 <script defer></script> 혹은 window.onload() 메서드를 작성하는 등의 방법을 사용해야 한다.
위에 작성된 document, document.documentElement 등의 html, body 태그 등은 HTML을 구성하는 필수 태그로해당 노드를 탐색하는 키워드 또한 변하지 않지만,body태그 내에 작성되는 HTML 구조는 언제나 달라지기 때문에 노드를 탐색하는 프로퍼티를 알아야한다.
아래 글 참고
2022.12.08 - [JavaScript] - [JavaScript] DOM객체 노드 탐색
'JavaScript' 카테고리의 다른 글
| [JavaScript] 접근자 프로퍼티 getter와 setter (0) | 2022.12.15 |
|---|---|
| [JavaScript] DOM객체 속성 제어 (0) | 2022.12.14 |
| [JavaScript] 브라우저와 호스트 환경 (0) | 2022.12.14 |
| [JavaScript] 브라우저 사이즈 & 스크롤_more (0) | 2022.12.14 |
| [JavaScript] 기하 프로퍼티(geometry property) _more (0) | 2022.12.14 |