DOM의 구조
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>
: DOM은 HTML을 위와 같은 태그 트리구조로 표현함
: 트리에 있는 노드는 모두 객체임
: 태그는 요소노드이고 트라구조를 구성함
: 요소 내의 문자는 텍스트 노드가 됨
자동교정
: 기형적인 HTML을 만나면 브라우저는 DOM 생성 과정에서 HTML을 자동을 교정함
: DOM에는 <html>에 대응하는 노드와 <body>에 대응하는 노드 등이 있어 없는 태그를 자동으로 넣어줌
: 닫는 태그가 없는 경나 문서에 있는 에러 등도 자동으로 처리함
※ <tbody> 테이블에 꼭 있어야 하는 태그
: DOM에서는 <tbody>가 필수라고 하지만 HTML에서는 생략할 수 있음
: 브라우저에서는 DOM에 <tbody>를 생성
<table id="table"><tr><td>1</td></tr></table>
기타 노드 타입
: 주석 노드
<!DOCTYPE HTML>
<html>
<body>
사슴에 관한 진실.
<ol>
<li>사슴은 똑똑합니다.</li>
<!-- comment -->
<li>그리고 잔꾀를 잘 부리죠!</li>
</ol>
</body>
</html>
: HTML 내에 모든 것은 DOM을 구성함
: <!DOCTYPE...> 조차도 DOM의 노드가 되고 문서 전체를 나타내는 document 객체 또한 DOM 노드임
DOM 구조 확인 방법
- Live DOM Viewer
: http://software.hixie.ch/utilities/js/live-dom-viewer/
Live DOM Viewer
Live DOM Viewer ... Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably "image" is an image. image and image.
software.hixie.ch
: 위 사이트에 HTML 문서를 입력하면 DOM으로 바뀌어 출력 됨
- 크롬 개발자 도구
: F12 > 개발자도구 > Elements 패널
: 개발자 도구로 DOM을 보는 경우 생략된 부분이 있음
> 텍스트 노드, 빈 텍스트 노드는 나타나지 않음
: 해당 메뉴의 좌측 상단에서 마우스 모양의 버튼을 클릭한 뒤
마우스로 웹 페이지 상의 노드를 클릭하면 Elements 패널에서 해당 노드를 표시
- 개발자 도구 elements의 우측에 존재하는 여러가지 도구
: Styles
> 내장 규칙을 포함하여 현재 선택하 요소에 적용된 CSS 규칙을 일률적으로 보여줌
크기 (dimension), 마진 (margin), 패딩 (padding).을 비롯한 스타일 대부분을 수정할 수 있음
: Computed
> 현재 선택한 요소에 적용된 CSS 규칙을 프로퍼티 기준으로 보여줌
CSS 상속 등을 통해 적용된 규칙도 볼 수 있음
: Event Listeners
> DOM 요소에 붙은 이벤트 리스너를 볼 수 있음
콘솔을 사용해 DOM 다루기
: DOM에 자바스크립트를 적용하는 방법
: 노드를 가져와서 코드로 해당 노드를 수정하고 브라우저상에서 결과물 확인
- 첫 번째 방법
: Elements 패널에서 첫번째 <il> 선택
: Esc를 눌러 Elements 패널 아래에 콘솔을 출력
: 가장 마지막에 선택했던 요소는 $0으로, 그 이전에 선택했던 요소는 $1로 접근 가능
ex)
콘솔창에 $0.style.background = 'red'를 입력하면 선택한 list 아이템이 붉은색으로 표시됨
- 두 번째 방법
: DOM 노드를 참조하는 변수가 있는 경우 콘솔에 inspect(node) 명령어를 입력하면
Elements 패널에서 해당 요소가 강조됨
: 혹은 아래에서 document.body를 입력해서 DOM 노드를 콘솔 창에 출력하여 탐색 할 수 있음
Refference
DOM 트리
ko.javascript.info
'Programming > JavaScript' 카테고리의 다른 글
| 모던 자바스크립트 (문서) 18-5. 주요 노드 프로퍼티 (0) | 2022.04.24 |
|---|---|
| 모던 자바스크립트 (문서) 18-3. DOM 다루기 (0) | 2022.04.24 |
| 모던 자바스크립트 (문서) 18-1. 브라우저 환경과 다양한 명세서 (0) | 2022.04.24 |
| 모던 자바스크립트 17. Proxy와 Reflect (0) | 2022.04.23 |
| 모던 자바스크립트 16. BigInt (0) | 2022.04.23 |