ReactDom.Render를 사용하다가 우연히 DOM에 대해서 궁금해졌다. 자바스크립트를 공부하고 나서 DOM을 공부하면 좋다고 했는데 나는 자바스크립트 공부도 다 끝내지 않았지만 궁금해서 찾아봤다 ㅋㅋㅋㅋ
DOM은 Document Object Model의 약자로 한국말로 해석하면 문서객체이다.
DOM은 웹브라우저가 HTML 페이지를 인식하는 방식을 의미한다.
DOM은 위 사진처럼 트리 형식의 자료구조를 가지고 있다. 가장 부모 노드인 <html>태그 node.left는 <head>
node.right는 <body> 태그로 부모에서 자식으로 내려가는 자료구조이다.
태그뿐만 아니라 text,href같은 속성도 다 노드에 포함된다.
문서객체가 생성되는 방식은
1. 웹브라우저가 HTML페이지에 적혀있는 태그를 읽으면 생성한다. --> 정적으로 생성
2. HTML페이지에 없던 문서객체를 JavaScript를 이용해 생성 --> 동적 문서객체 생성
정리하자면 HTML문서에 태그로 직접 작성하면 --> 정적
자바스크립트로 문서 객체 생성 --> 동적
만들어보자!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<html>
<head>
<meta charset="UTF-8">
<title>DOM을 배워봅시당~!</title>
<script type="text/javascript">
window.onload = function () {
//문서객체 생성
var header = document.createElement('h2');
var textNode = document.createTextNode('Header 2 by 정적');
//노드를 연결
header.appendChild(textNode);
//body 문서객체에 header 문서객체 추가
document.body.appendChild(header);
}
</script>
</head>
<body>
<h1 id="header1">Header1 by동적</h1>
<hr>
<!--수평선 긋는 태그-->
</body>
</html>
|
cs |
또 찾아보니까 innerHTML을 통해 문서객체를 동적으로 생성하는 방법도 있었다.
++) window.onload는?
https://itworldyo.tistory.com/101
[javascript] 자바스크립트 window.onload() 란 무엇인가요?
자바스크립트 window.onload()란 무엇인가요? javaScript는 html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식으로 주로 사용합니다. 위로부터 차례차례 읽어 들이는 프로그래밍 본연
itworldyo.tistory.com
https://wiserloner.tistory.com/380
javaScript window.onload()란?
javaScript는 html 내의 요소들을 움직일수 있는 dom 객체를 조작하는 방식으로 주로 사용한다. 위로부터 차례차례 읽어들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고
wiserloner.tistory.com
예를 들어 아이디 선택자 사용할 때 , html태그가 생성되기 전에 자바스크립트 실행되면 문제점이 발생하게 된다.
그래서 자바스크립트 코드가 먼저 작성되어 있어도 html태그 이후에 자바스크립트 문서가 실행될 수 있게 하는 역할을 한다.
참고자료
https://sharp57dev.tistory.com/33
[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()
문서 객체 동적 생성 문서 객체 동적 생성(1) HTML 에 정의 되어 있지 않은 요소 노드와 텍스트 노드를 동적 생성한다. 아래에서 요소 노드와 텍스트 노드에 대해 알아본다. 문서 객체 동적 생성
sharp57dev.tistory.com
https://m.blog.naver.com/magnking/220972680805
[JavaScript] DOM이란 무엇인가?
JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 ...
blog.naver.com
'React > 용어정리' 카테고리의 다른 글
| [용어정리] React에서 Element와 Component의 차이는? (0) | 2022.03.20 |
|---|
댓글