[Javascript] DOM에 대해 알아보자

DOM이란 document object model의 약자로, 웹페이지에 대한 인터페이스이다. 프로그램이 페이지의 컨텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 해준다.

 

활용구문은 다음과 같다.

document.getElementById('id명') : ID는 단일요소이기 때문에 해당하는 단일요소를 리턴한다.

document.getElementByClassName('클래스이름'): 복수의 요소를 리턴할 수 있다. HTMLCollection 타입으로 저장한다.

document.getElementByTagName('태그이름'): 클래스이름과 같으나 태그이름의 요소를 리턴한다.

 

활용해보자.

    <h2 id="subHeader">
        태그로 가져올 것
    </h2>
    <ul>
        <li class="listEle">
            요소 가져오기
        </li>
        <li class="listEle">
            클래스로 가져와볼 것 1    
        </li>
        <li class="listEle">
            클래스로 가져와볼 것 2
        </li>
        <li>
            요소3
        </li>
        <li>
            요소4
        </li>
    </ul>
    <script>
        const h1 = document.getElementById('subHeader');
        const lis = document.getElementsByClassName('listEle');
        const ul = document.getElementsByTagName('ul');
        console.log(h1);
        console.log(lis);
        console.log(ul);
        console.log(h1.innerText.length);
        console.log(lis[0].innerText);
    </script>

콘솔에 출력되는 결과는 이와 같다.