10. window객체

2) DOM - document객체

: HTML에 있는 모든 태그들을 구조화 했을 때 각각의 태그들을 노드(Node)라고 함

• 요소노드(Element Node) : 태그 그 자체만을 의미
• 텍스트노트(Text Node) : 태그 내에 기록되는 내용
  • 텍스트 노드가 존재하는 요소 : div, a, h1 ..(시작태그, 종료태그 한 쌍)
  • 텍스트 노드가 존재하지 않는 요소 : input, img ... (시작태그만 존재)

(1) 노드 생성과 관련된 메소드

: 텍스트 노드가 존재하는 노드 생성(시작태그 + 종료태그)

(1)-(1) 동적으로 요소 만드는 방법 1

: "문자열"로 만드는 방법

document.getElementById("area2").innerHTML = "<h3>안녕하세요</h3>";

(1)-(2) 동적으로 요소만드는 방법 2

: document 객체에서 제공하는 메소드를 통해 "요소객체"

• 1. elementNode 생성

document.createrElement("태그명");
var elementNode = document.createElement("h3");

• 2. textNode 생성

document.createTextNode("문구");
var textNode = document.createTextNode("안녕하세요");

• 3. 두개의 노드를 연결
     (즉, 요소노드 하위로 텍스트노드 추가하기)

요소노드.appendChild(텍스트노드)
elementNode.appendChild(textNode);
=> 문자열 x , 요소객체임!!

그냥 console.log로 elementNode 출력해보면, 출력이 제대로 안됨!
왜?
elementNode 변수를 분석해보면 h3태그(Element)에 안녕하세요(Text)라는 말이 포함되어있는 요소객체임!
그래서 요소객체 자체를 출력하게 되면 "이건 객체야" 라는 정보만 출력해주는 것임.
그래서 어떤 요소에 요소객체를 추가하고 싶으면 메소드로 해주어야함!!

document.getElementById("area2").appendChild
그래서 밑에 부분이 area2라는 div에 appendChild라는 메소드로 추가해주는 형태임.