출처 : https://javascript.info/dom-nodes
HTML document의 뼈대는 tags이다.
Document Object Model (DOM)에 따르면, 모든 HTML tag는 object이다. enclosing tag에 포함된 tags는 children이다. tag 내부의 text 또한 object이다.
이러한 모든 objects는 JavaScript를 통해서 접근이 가능하며, 이를 활용해 page를 수정할 수 있다.
예를들어 document.body는 <body> tag를 나타내는 object이다.
아래 코드를 실행하면 3초간 red<body>로 변경할 수 있다.
document.body.style.background = 'red'; // make the background red
setTimeout(() => document.body.style.background = '', 3000); // return backAn example of the DOM
간단한 document를 살펴보자.
<!DOCTYPE HTML>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>DOM은 HTML을 tags의 tree구조로 나타낸다.
elements 내부의 text는 #text라고 표시된 text nodes를 구성한다. text node는 오직 string만 포함한다.
text node의 특수기호를 살펴보자.
- a newline: ↵ (in JavaScript known as \n)
- a space: ␣
공백이나 줄바꿈은 글자, 숫자와 같은 유효한 character이다. 이것은 text nodes를 구성하며 DOM의 부분이 된다.
2개의 예외사항이 있다.
- <head> 이전의 공백과 줄바꿈은 무시된다.
- <body>다음에 뭔가를 추가해도 자동으로 body내부로 옮겨진다. 따라서 </body>다음엔 어떤 공백도 없다.
이외의 모든 경우는 명백하다. document안에 어떠한 spaces가 있으면, text nodes가 된다. 만약에 제거하면 없게된다.
공백이 없는 text nodes이다.
<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
공백만 있는 text nodes는 브라우저 도구에서 보여지지 않는다.
Autocorrection
브라우저는 깨진 HTML을 만나면, DOM을 만들어서 자동으로 수정한다.
<html>, <body>태그가 없어도 자동으로 DOM을 만들고, 닫히지 않은 tag도 일반 DOM이 되어 browser가 읽을 수 있다.
Other node types
elements와 text nodes와는 다른 type도 있다. 예를들면 주석이다.
<!DOCTYPE HTML>
<html>
<body>
The truth about elk.
<ol>
<li>An elk is a smart</li>
<!-- comment -->
<li>...and cunning animal!</li>
</ol>
</body>
</html>
HTML내부에 어떤 것이 있든 그것은 반드시 DOM tree안에 있어야 한다.
<!DOCTYPE...> 또한 DOM node이다.
12개의 note types이 있는데, 일반적으로 4개의 type을 사용한다.
- document – the “entry point” into DOM.
- element nodes – HTML-tags, the tree building blocks.
- text nodes – contain text.
- comments – sometimes we can put information there, it won’t be shown, but JS can read it from the DOM.
Interaction with console
Chrome Developer tool을 연다음 Elements tab에서 <div>를 선택한 다음 Esc키를 누른다.
console이 열린다.
$0은 마지막으로 선택한 element이고 $1은 이전에 선택한 것이다.
$0.style.background = 'red' 은 선택한 element를 red로 만든다.
또는 document.body와 같이 DOM node를 console창에서 확인할 수 있다.
'JavaScript' 카테고리의 다른 글
| JavaScript] Searching: getElement*, querySelector* (0) | 2022.11.04 |
|---|---|
| JavaScript] DOM Navigation (0) | 2022.11.03 |
| JavaScript] Browser environment, DOM, BOM (0) | 2022.11.03 |
| JavaScript] 웹에서 Apple Login 구성하기 (2) | 2021.10.13 |
| Object.keys(), Object.values(), Object.entries() (0) | 2020.10.14 |
댓글