JS DOM Functions

console.log();에서 console은 'object' / log는 '함수'

JS에서도 CSS처럼 HTML 코드에 변화를 줄 수 있음

DOM(Document Object Module)로 
JS는 우리가 만든 HTML에 있는 모든 엘리먼트들을 가지고 옴.
그리고 그 엘리먼트들을 객체로 바꿀 것이고, 
일반적으로 VS code에서 console.치면 나오는 여러 가지 것들을
'객체'라고 할 수 있는데, 우리는 HTML에 있는 엘리먼트들을
객체화함!

ex)html에 있는 h1태그에 id값이 title인 것의 값을 JS에서 
   변경하고 싶다면??
   title.innerHTML = "Hello~ My Dear!";
   라고 적어주면 HTML화면에서 그대로 값이 변경되는 것을 볼 수
   있다. 중요한 점은 우리가 이전에 HTML에서 작성한 코드의
   원래 값은 유지가 된다는 점!!!!!
   
?HTML이 JS와 함께 쓰려고 하면 어떻게 동작할까?

 우선 css와 같이 js에서도 element를 선택 가능..그래서 변경
 할 수 있다.
 
 css에서는 id로 무언가 선택할 때는 #을 써서 선택.
 (여기서 무언가는 title이라고 하기)
 
 =css=
 #title{
 
 }
 
 javascript에서 id로 무언가 선택할 때는 
 document.getElementById라고 써서 선택할 수 있다.
 (여기서 무언가는 title이라고 하기)
 
 1.console.log(document.getElementById);
 
 2.const title = 
   document.getElementById("title");
   
   console.log(title)
   
 *** DOM : Document Object Module ***
  js에서 html을 객체(object)로 바꿔서 변경할 수 있다.
  ![](https://velog.velcdn.com/images%2Fseoha23%2Fpost%2F82bcb3a4-3c6e-46f9-9639-f97778976a98%2Fimage.png)
  tree형식의 자료구조로 형성되어 있다.
  --위쪽의 node를 부모(parent),
    node아래쪽은 자식(child).
  root node는 가장 위에서 시작되는 node이니까
  parent없는 node. 그리고 child가 없는 node는 
  leaf node. root에서 시작해서 leaf에서 끝
  (여기서 node란? 모든 개개의 개체를 뜻함.
   head, body, title, script, h1 등의 태그 뿐만 아니라
   태그 안의 텍스트, 속성 등 모두 node에 속함)

 !?JS로 문서객체를 생성한다는 것은 어떤 의미인가?!
  크게 2가지
  우선, 웹 브라우저가 HTML페이지에 적혀 있는 태그를 읽으면 
  생성하는 것. 이런 과정을 정적으로 문서 객체를 생성한다고 말함
  단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것
  
  반대로 원래 HTML 페이지에 없던 문서객체를 JS를 이용해서
  생성할 수 있다. 이런 과정을 동적으로 문서객체를 생성한다고 함
  따라서 JS로 문서객체를 생성한다는 것은 처음에는 HTML페이지에
  없던 문서객체를 동적으로 생성하는 것이 된다.
  
 !?DOM은 어떻게 사용할까?!
  JS통해서 동적으로 문서객체 생성해보기
  // 1. 문서 객체 생성
  var header = document.createElement('h2');
   -우선 document 객체에 접근해 <h2> 태그 생성하기
  
  var textNode = 
  document.createTextNode('Hello DOM'); 
   -그 다음은 document 객체에 접근해서 TextNode를 생성하고
    'Hello DOM'이라는 스트링을 넣어주고 있다.
  
  // 2. 노드(요소/텍스트) 연결
  header.appendChild(textNode);
   -위에서 생성한 <h2>태그에 자식노드추가. 그런데 추가되는
    자식노드가 아까 위에서 생성한 Text Node이다!
  
  // 3. body 문서 객체에 header 문서 객체를 추가
  document.body.appendChild(header);
   -이제 document객체를 통해서 body객체에 접근함. 그리고
    body객체에 자식 노드를 추가하고 있는데 아까 <h2>태그를
    생성해서 TextNode까지 추가했던 header이다.
    이렇게 추가하고 나면 
  
   HEADER-1
   HEADER-2
  -----------------------------------------------
   Hello DOM
  
    처럼 문자가 추가된 것을 확인 가능!