DOM(Document Object Model)

DOM을 '문서 객체 모델'이라고 하며 document 객체를 의미합니다. DOM은 HTML요소(element)의 선택, 생성, 삭제 등을 위해 사용됩니다.

HTML문서를 작성했을 때 DOM의 구조

HTML요소들은 노드(node)와 노드(node)가 연결된 Tree구조로 만들어 줍니다. html, head, meta, title, body, h1, p와 같ㅇ느 태그 요소들을 '요소 노드'라고 하고 텍스트를 '텍스트 노드'라고 합니다.

요소선택

<요소를 직접 선택하는 메서드>

메서드 설명
getElementById( ) document.getElementById('content')일 경우 HTML요소 중 id속성이 'content'인 요소를 선택
getElementByClassName( ) document.getElementByClassName('menu')일 경우 HTML요소 중 class명이 'menu'인 요소들을 선택
getElementByTagName( ) document.getElementByTagName('ul')일 경우 HTML요소 중 태그명이 'ul'인 요소들을 선택
getElementByName( ) document.getElementByName('txt')일 경우 HTML요소 중 name명이 'txt'인 요소들을 선택
querySelector( ) 요소의 선택방법이 css의 선택방법과 같습니다. 선택된 요소 중 첫번째 요소만 선택
document.querySelector('.lnb')
document.querySelector(div)
document.querySelector('#gnb li')
querySelectorALl( ) querySelector( )는 선택된 요소 중 첫 번째 요소만 선택하는 반면 querySelectorALl( )는 모든 요소를 선택


[예제] 
<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>요소를 직접 선택하는 메서드</title>
        <script>
            window.onload = function(){
                var list1 = document.querySelector('#box1>ul>li');
                var list2 = document.querySelectorAll('#box2>ul>li');
                console. log(list1);
                console. log(list2);
                //list1.style.backgroud = "#ff6600";
                //list2[0].style.backgroud = "#ccc";
                //list2.item(1).style.backgroud = "#ddd";
            };
        </script>
    </head>
    <body>
        <div id = "box1">
            <ul>
                <li>내용1</li>
                <li>내용2</li>
                <li>내용3</li>
            </ul>
        </div>
        <div id="box2">
            <ul>
                <li>내용4</li>
                <li>내용5</li>
                <li>내용6</li>
            </ul>
        </div>
    </body>
</html>
[결과]
var list1 = document.querySelector ("#box1 > ul > li")는 첫 번째 요소만 선택
:내용1
var list1 = document.querySelectorAll ("#box2 > ul > li")는 모든 요소 선택
:내용4
내용5
내용6