DOM(문서 객체 모델) 관련 정리

노드에 대하여..

 

Document Object Model(문서객체모델)은  HTML페이지에서 문서의 구조를 나타내며 이를 조작 및 제어할 수 있는 방법을 제시한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

일반적인 HTML태그이며, DOM에서는 이것을 노드라고 한다.

노드에는 다음 4개가 있다.

document	- 최상위(root) 노드. - 최상위 이기 때문에 아래 3가지 요소,속성,텍스트 노드에 접근하기 위해서는 document노드를 통하여야 한다.
div, ul, li	- 요소 노드. - 부모 노드와 자식노드를 가질 수 있다.
first, second	- 애트리뷰트(속성) 노드. - 부모노드를 가질 수 없다. -  이 노드에 접근하려면 해당 노드의 요소노드에 접근 필요
javascript, React.js, Vue.js	- 텍스트 노드. - 자식노드를 가질 수 없는 최하단 노드. - 이 노드에 접근하려면 부모노드에 접근 필요

 

 

요소 노드를 가져오는 방법

 

1. querySelector, getElementById

             $div = document.querySelector('div');
            console.log('***querySelector*** \n'+$div);
            console.log($div.textContent);
            
            $second = document.getElementById('second');
            console.log('***getElementById*** \n'+$second);
            console.log($second.textContent);

querySelector 메서드, getElementById 메서드 둘다 변수를 log띄워보면, HTMLDivElement형식이다.

querySelector나 getElementById는 요소를 가져올 때 중복된 요소가 있다면 제일 먼저 선언한 요소를 가져온다.

querySelector나 querySelectorAll 메서드는 인자값에 선택자를 사용할 수 있다.

       <div id="first">
        javascript
       </div>

querySelector는 div태그 요소를 가져오는데 div요소가 여러개여서 제일 먼저 선언한 div태그를 가져온다.

textContent 변수를 사용하면 해당 태그안의 텍스트요소 값인 javascript문자열을 가져온다.

<div id='second'>
        <ul>
            <li class="cn">
                React.js
            </li>
            <li class="cn">
                Vue.js
            </li>
        </ul>
    </div>

getElementById는 id속성값이 second값을 갖는 요소를 가져오므로 위와 같을 것이다.

 

 

 

2. getElementsByTagName, getElementsByClassName

메서드 이름처럼 getElementsByTagName 는 지정한 태그이름과 일치하는 요소를 가져오는 것이고, getElementsByClassName은 지정한 클래스값과 일치하는 요소를 가져오는 것이다.

둘 다 여러개의 요소를 갖는 HTMLCollection객체를 반환한다.

            $tag = document.getElementsByTagName('div');
            for(i=0; i<$tag.length; i++){
                console.log('***TagName*** \n'+$tag[i].textContent);
            }

위 코드는 div태그를 전부 가져와서 해당 태그의 텍스트 값을 출력한다.

    ***TagName*** 
        javascript
   ***TagName*** 
        React.js

        Vue.js
     

          $class = document.getElementsByClassName('cn');
            for(i=$class.length-1; i>=0; i--){
                $class[i].className = 'red';
          }

위 코드는 class속성의 값이 'cn'인 요소를 가져오고, 해당 요소들을 for문을 돌려 class속성의 값을 'red'로 바꾸는 것이다.

그런데 위에서 for문을 증가문이 아니라 감소문을 썼는데, HTMLCollection객체를 반환하는getElementsByTagName, getElementsByClassName은 실시간으로 적용되는 특성이 있기 때문이다.

만약에 위의 코드에서 증가문을 썼다면, 첫번째 요소인 React.js는 정상적으로 red로 변경되겠으나 Vue.js는 변경이 되지 않을 것이다.

이유는 말한바와 같이 실시간 특성이 있기때문에  for증가문을 썻다면 for문을 1회전 하는 당시에 첫번째 'cn'요소의 클래스명이 'red'로 변경이 되면 $class변수가 가지고 있는 HTMLCollection에서 'red'로 바뀐 해당 요소는 사라지고, 그 다음 위치한 요소인 Vue.js텍스트노드가 0번째 위치로 하나씩 당겨지게 된다. 하지만 다음 for문 진입시 $class.length는 1이 되어 for문 조건이 false가 되어 수행되지 못하고 종료된다.

 

그렇기 때문에 위와 같이 증가for문이 아닌 감소for문을 사용하면 해결된다.

 

 

 

3. querySelector, querySelectorAll

 querySelector는 위에서 봤으니 생략하고, querySelectorAll은 여러개의 요소를 가지고 있는 NodeList객체를 반환한다. HTMLCollection을 반환하는 getElementsByTagName, getElementsByClassName은 실시간 특성이 있다고 했는데 NodeList는 실시간 특성이 없기 때문에 증가for문을 이용해도 정상적인 결과를 얻을 수 있다.

           $cnAll = document.querySelectorAll('.cn');
            
             for(i=0; i<$cnAll.length; i++){
                $cnAll[i].className = 'red';
            }

querSelector메서드나 querySelectorAll메서드는 선택자를 이용해 요소를 가져온다. 위의 '.cn'은 class의 속성 값이 cn인 요소를 가져온다는 뜻이다.

어쨌든 NodeList객체를 반환하는  querySelectorAll은 getElementsByTagName, getElementsByClassName과는 달리 위의 코드처럼 증가for문을 써도 정상적으로 해당 요소들의 class 속성 값이 전부 'red'로 변경된다.