1. DOM (Document Object Model)

html 문서를 웹브라우저가 html의 텍스트들을 javascript도 이해할 수 있는 구조인 객체로 변환 하여 트리 구조로 나타난다.

2. DOM tree

DOM tree는 네 종류의 노드로 구성된다.

1. 문서노드

   노드 중 1번으로 모든 요소의 부모이다 다른 아래의 노드의 접근하기 위해선 문서노드르 거쳐야 한다.

2. 요소노드

   html을 표현하는 요소이다(HTMLElement 객체를 상속한 객체로 구성된다.)

3. 어트리뷰트 노드

   어트리뷰트 노드는 위의 html요소의 어트리뷰트를 표현한다. 어트리뷰트노드는 참조된 요소의 자식이 아니라 요소의 일부로 표현된다.

4. 텍스트 노드

   html요소의 텍스트들을 표현한다. 요소노드의 자식이며 마지막 노드이다. 그렇기에 자식을 가질 수 없다.

   3. DOM Query / Traversing (요소에의 접근)

   document.getElementsByClassName(class)

   • class 어트리뷰트 값으로 요소 노드를 모두 선택한다. 공백으로 구분하여 여러 개의 class를 지정할 수 있다. • !! Return: HTMLCollection (live) = 실시간으로 변경점을 실행하여 다음 실행에 영향을 준다

   <!DOCTYPE html>
   <html>
     <head>
       <style>
         .red  { color: #ff0000; }
         .blue { color: #0000ff; }
       </style>
     </head>
     <body>
       <div>
         <h1>Cities</h1>
         <ul>
           <li id="one" class="red">Seoul</li>
           <li id="two" class="red">London</li>
           <li id="three" class="red">Newyork</li>
           <li id="four">Tokyo</li>
         </ul>
       </div>
     </body>
   </html>
   

   // HTMLCollection을 반환한다. HTMLCollection은 live하다.
   const elems = document.getElementsByClassName('red');
   // li의 요소에서 red클래스가 3개 이며 유사배열 형태로 리턴한다.
   
   for (let i = 0; i < elems.length; i++) {
     // 클래스 어트리뷰트의 값을 변경한다.
     elems[i].className = 'blue';
   }
   // for문을 순서대로 실행하면  elems[0]의 class의 값인 red를 blue로 변경한다.
   // 이때 변경된 것이 즉시 실행이 되어 다음  elems[1]을 실행하는데 영향을 준다.
   // elems[0](첫번째 li)의class가 blue가 되면서 위의 getElementsByClassName('red');에 적합하지 않아 제외가 된다.
   // elems[1]이 두번째 li가 아닌 세번째 li로 실행이 된다
   
   

   3.3 DOM Traversing (탐색)

   parentNode

   • 부모 노드를 탐색한다. • Return: HTMLElement를 상속받은 객체 • 모든 브라우저에서 동작

   const elem = document.querySelector('#two');
   
   elem.parentNode.className = 'blue';
   // 여기서 변경하는 것은 elem의 부모 노드이다. 따라서 ul의 클래스 네임이 'blue'가 된다. (위의 html 코드 참조)
   // 이때 결과는 마지막 도쿄만 blue의 효과가 적용된다. 
   // 그 이유는 서울,런던, 뉴욕이 부모의 요소보다 가까운 자신의 클래스네임으로 red를 가지고 있기 때문이다.